Доброго времени суток уважаемые жители форума!
т.к. в php и js не силен прошу помочь с редактированием части компонента. Этот компонент был разработан другим человеком, и написан он был вручную.
сам компонент (form.select1) выполняет функцию фильтра, при использовании которого отфильтрованные данные отображаются на карте и в виде списка доступных вариантов под картой.
внутри компонента есть 2 кнопки по нажатию на которые открывается всплывающее поле с выбором района и выбором метро соответственно.
в этом поле использованы картинки при наведении и клике на которые мы можем выбрать район или метро, которые в свою очередь добавляются под кнопку как выбранные.
Нам же нужно уйти от этой системы и использовать вместо кнопок или <select> или всплывающее меню которое можно стилизовать,соответственно с выбором местоположения района и метро. чтобы выбранные районы так же добавлялись под <select> как выбранные...
url сайта с формой фильтра для карты :http://roslex-estate.ru/flats-sale/#
компонент(form.select1)
код отвечающий за вывод кнопок и всплывающего меню (/bitrix/components/custom/form.select1/templates/.default/template.php)
/bitrix/components/custom/form.select1/templates/.default/script.js
оч прошу помогите реализовать!
буду благодарен любой помощи!)
т.к. в php и js не силен прошу помочь с редактированием части компонента. Этот компонент был разработан другим человеком, и написан он был вручную.
сам компонент (form.select1) выполняет функцию фильтра, при использовании которого отфильтрованные данные отображаются на карте и в виде списка доступных вариантов под картой.
внутри компонента есть 2 кнопки по нажатию на которые открывается всплывающее поле с выбором района и выбором метро соответственно.
в этом поле использованы картинки при наведении и клике на которые мы можем выбрать район или метро, которые в свою очередь добавляются под кнопку как выбранные.
Нам же нужно уйти от этой системы и использовать вместо кнопок или <select> или всплывающее меню которое можно стилизовать,соответственно с выбором местоположения района и метро. чтобы выбранные районы так же добавлялись под <select> как выбранные...
url сайта с формой фильтра для карты :
компонент(form.select1)
Код |
---|
<?$APPLICATION->IncludeComponent("custom:form.select1", ".default", array( "REGION_ID" => "14", "SELECT_BY" => array( "METRO" => "Y", "ROOMS" => "Y", "ROOM" => "Y", "STUDIO" => "Y", "PRICE" => "Y", "M_PRICE" => "N", "SQUARE" => "Y", "KITCHEN" => "Y", "BUSINESS_CENTER" => "N", "DEADLINE" => "N", "TYPE" => "N", ) ), false, array( "ACTIVE_COMPONENT" => "Y" ) );?> |
код отвечающий за вывод кнопок и всплывающего меню (/bitrix/components/custom/form.select1/templates/.default/template.php)
Код |
---|
<div id="map2selectDistr"> <p class="closeIt">закрыть X</p> <div id="border2Distr" style="display: inline-block;"> <? echo CFile::ShowImage($arResult["MAP_IMAGE"],0,0,"usemap='#districtselect'");?> <map name='districtselect'> <? foreach ($arResult["DIST_DATA"] as $key => $val) { echo "<area shape='poly' coords='{$val['COORDS']}' alt='{$val['NAME']}' title='{$val['NAME']}' href=# onclick='CustomSelect($key,\"{$val['NAME']}\",\"Distr\"); $(\"#district".$key."image\").addClass(\"active\"); return false;' onmouseover='$(\"#district".$key."image\").fadeIn(200);' onmouseout='if (!$(\"#district".$key."image\").hasClass(\"active\")) $(\"#district".$key."image\").fadeOut(200);' />"; }?> </map> <? $selDistr = explode(',', $_REQUEST["d"]); foreach ($arResult["DIST_DATA"] as $key => $val) { $coords = explode(",", $val["CODE"]); echo "<img src='/upload/images/Distr-sel.png' style='left: ".($coords[0]-8)."px; top: ".($coords[1]-14)."px' class='".(in_array($key, $selDistr) ? "selected" : "noselected")."' id='Distr$key'/>"; if (@is_file($_SERVER['DOCUMENT_ROOT'].'/images/districts/'.$key.'.gif')) echo '<img src="/images/districts/'.$key.'.gif" style="position: absolute; left: 0; top: 0; '.(in_array($key, $selDistr) ? '' : 'display: none;').'" id="district'.$key.'image" '.(in_array($key, $selDistr) ? ' class="active"' : '').'/>'; }?> </div> </div> <? if($arParams["SELECT_BY"]["METRO"]=="Y"):?> <div id="map2selectMetro"> <p class="closeIt">закрыть X</p> <div id="border2Metro"> <? echo CFile::ShowImage($arResult["METRO_IMAGE"],0,0,"usemap='#metroselect'");?> <map name='metroselect'> <? foreach ($arResult["METRO_DATA"] as $key => $val) { echo "<area shape='circle' coords='{$val['COORDS']},11' alt='{$val['NAME']}' title='{$val['NAME']}' href=# onclick='CustomSelect($key,\"{$val['NAME']}\",\"Metro\"); return false;'/>"; }?> </map> <? $selMetro = explode(',', $_REQUEST["m"]); foreach ($arResult["METRO_DATA"] as $key => $val) { $coords = explode(",", $val["COORDS"]); echo "<img src='/upload/images/Metro-sel.png' style='left: ".($coords[0]-11)."px; top: ".($coords[1]-11)."px' class='".(in_array($key, $selMetro) ? "selected" : "noselected")."' id='Metro$key'/>"; }?> </div> </div> <? endif;?> <form method="get" id="selectorForm"> <input type="hidden" name="d" value="<?echo $_REQUEST['d']?>" id="CustomDistrInput"> <input type="hidden" name="m" value="<?echo $_REQUEST['m']?>" id="CustomMetroInput"> <table id="selectorTab"> <tr> <td class="left1"><a href=# id="selDistrHref">Выберите район</a></td> <td id="CustomSelectedDistr"> <? if ($_REQUEST["d"]) { $selDistricts = explode(',', $_REQUEST["d"]); foreach ($selDistricts as $sd) echo "<span id='inDistr$sd'><a href=# onclick='CustomDelete(\"$sd\",\"Distr\")' title='удалить'>X</a> {$arResult['DIST_DATA'][$sd]['NAME']} </span> "; }?> </td> </tr> <? if($arParams["SELECT_BY"]["METRO"]=="Y"):?> <tr> <td class="left1"><a href=# id="selMetroHref">Выберите метро</a></td> <td id="CustomSelectedMetro"> <? if ($_REQUEST["m"]) { $selMetro = explode(',', $_REQUEST["m"]); foreach ($selMetro as $sm) echo "<span id='inMetro$sm'><a href=# onclick='CustomDelete(\"$sm\",\"Metro\")' title='удалить'>X</a> {$arResult['METRO_DATA'][$sm]['NAME']} </span> "; }?> </td> </tr> <? endif;?> |
Код |
---|
function CustomSelect(id,name,type) { if (document.getElementById('Custom' + type + 'Input').value > "") var SelArr = document.getElementById('Custom' + type + 'Input').value.split(','); else var SelArr = new Array(); for(var i=0; i<SelArr.length; i++) { if (SelArr[i]==id) return;} SelArr.push(id); var selected = document.getElementById('CustomSelected' + type).innerHTML; selected += ' <span id="in' + type + id + '"><a href=# onclick="CustomDelete(' + id + ', \'' + type + '\')">X</a> ' + name + ' </span>'; document.getElementById('CustomSelected' + type).innerHTML = selected; document.getElementById('Custom' + type + 'Input').value = SelArr.join(','); document.getElementById(type + id).className = "selected"; } function CustomDelete(id,type) { if (type == 'Distr') { $('#district' + id + 'image').hide(); $('#district' + id + 'image').removeClass('active'); } if (document.getElementById('Custom' + type + 'Input').value > "") var SelArr = document.getElementById('Custom' + type + 'Input').value.split(','); else var SelArr = new Array(); document.getElementById('in' + type + id).innerHTML = ''; for(var i=0; i<SelArr.length; i++) { if (SelArr[i]==id) { SelArr.splice(i,1);} } document.getElementById(type + id).className = 'noselected'; document.getElementById('Custom' + type + 'Input').value = SelArr.join(','); } function checkDeadline(obj) { if (obj.checked) { document.getElementById('dtokv').disabled = false; document.getElementById('dtoyear').disabled = false; } else { document.getElementById('dtokv').disabled = true; document.getElementById('dtoyear').disabled = true; } } function ClearSelectorForm() { //var field1, field2; if (field = document.getElementById('CustomSelectedMetro')) { field.innerHTML = "";} if (field = document.getElementById('CustomSelectedDistr')) field.innerHTML = ""; if (field = document.getElementById('dtokv')) field.disabled = true; if (field = document.getElementById('dtoyear')) field.disabled = true; var inputes = document.getElementById("selectorForm").getElementsByTagName("input"); for (var i in inputes) { if (inputes[i].type == "text") inputes[i].value = ""; if (inputes[i].type == "hidden") inputes[i].value = ""; else if (inputes[i].type == "checkbox") inputes[i].checked = false; } var imgs = document.getElementById('border2Distr').getElementsByTagName('img') for (var i=1; i<imgs.length; i++) imgs[i].className = 'noselected'; var imgs = document.getElementById('border2Metro').getElementsByTagName('img') for (var i=1; i<imgs.length; i++) imgs[i].className = 'noselected'; } $( function() { if ($('#select-type').val() == 2227 || $('#select-type').val() == 3390) $('#select-business-center-tr').show(); $('#selDistrHref').click(function(){ $('#map2selectDistr').slideDown(600); }); $('#selMetroHref').click(function(){ $('#map2selectMetro').slideDown(600); }); $('#map2selectDistr p.closeIt').click(function(){ $('#map2selectDistr').slideUp(600); }); $('#map2selectMetro p.closeIt').click(function(){ $('#map2selectMetro').slideUp(600); }); $('#select-type').change(function(){ if ($(this).val() == 2227 || $(this).val() == 3390) $('#select-business-center-tr').show(400); else $('#select-business-center-tr').hide(400); }); }) |
оч прошу помогите реализовать!
буду благодарен любой помощи!)