Слайдер

[PrimeTeam 0]

Здравствуйте. Подскажите, пожалуйста, как создать еще один слайдер для нового поля от/до ?

[XTRO 154]

сделать новый div с обработкой в js

[Дмитрий Кондин 690]

Здравствуйте. Подскажите, пожалуйста, как создать еще один слайдер для нового поля от/до ?

Вы пишите с вашими наработками лучше сразу.

Чем более точно зададите вопрос, тем более точный получите ответ.

[PrimeTeam 0]

Окей. Вот,что было сделано (вложения).
В header.tpl вписано:

<script>var square_all_max=1000000;var square_from=Number(0);var square_for=Number(1000000);</script>

 

[XTRO 154]

а сам скрипт вписан через {literal} в шаблоне или инклудится?

[PrimeTeam 0]

а сам скрипт вписан через {literal} в шаблоне или инклудится?

 

Ну, вписан он в /js/search_form.js . Так что,думаю,что да. 

[abushyk 694]

Я завтра напишу, как довесить слайдер на свой элемент.

[abushyk 694]

1. Инициализация значений в шаблон.

Нам необходиом поймать знчения из запроса в шаблон для полей площадей.

В /template/frontend/realia/standart_search_form.tpl в самом начале шаблона добавляем перехваты

{if isset($smarty.request.square_min) && $smarty.request.square_min!=''}{assign var='square_min' value=$smarty.request.square_min}{else}{assign var='square_min' value=0}{/if}{if isset($smarty.request.square_max) && $smarty.request.square_max!=''}{assign var='square_max' value=$smarty.request.square_max}{else}{assign var='square_max' value=1000000}{/if}

и чуть ниже, после 

var max_price={/literal}{if $max_price ne ''}{$max_price}{else}0{/if}{literal};var price_from=Number({/literal}{if isset($price_min)}{$price_min}{else}0{/if}{literal});var price_for=Number({/literal}{if (isset($price)) && ($price ne '')}{$price}{else}{$max_price}{/if}{literal});

добавляем

var square_all_max=Number(1000000);

2. Формируем разметку.

Слайдер состоит из трех элементов - двух межевых полей ввода и собственно слайдера.

<!-- Межевое поле --><div class="beds control-group">                <div class="controls">                    <input type="text" class="square_from square_field" name="square_min" value="{$square_min}"/>                </div><!-- /.controls -->            </div><!-- /.control-group --><!-- Межевое поле -->            <div class="baths control-group">                <div class="controls">                    <input type="text" class="square_for square_field" name="square_max" value="{$square_max}"/>                </div><!-- /.controls -->            </div><!-- /.control-group --> <!-- Слайдер -->                       <div class="price-value control-group">                <div class="controls">                    <div class="square_slider"></div>                </div><!-- /.controls -->            </div>

Значения межевых полей мы устанавливаем теми значениями, которые мы инициализировали в п.1

Разметку разместить в  /template/frontend/realia/standart_search_form.tpl в теле формы поиска.

 

3. Навеска слайдера.

/template/frontend/realia/js/search_form.js

После функций asMoney() и number_format() доюавляем функцию

function buidSlider(slider_el, min_el, max_el, maxvalue, asMoneyType){var min_value_now=min_el.val().replace(/\D/g,'');var max_value_now=max_el.val().replace(/\D/g,'');slider_el.slider({        range: true,        min: 0,        max: maxvalue,        values: [ min_value_now, max_value_now ],        slide: function( event, ui ) {            if (ui.values[0]<0){                ui.values[0] = 0;            }            min_el.val(asMoneyType==true ? asMoney(ui.values[0]) : ui.values[0]);            max_el.val(asMoneyType==true ? asMoney(ui.values[1]) : ui.values[1]);        }    });min_el.change(function(){        var value1=min_el.val().replace(/\D/g,'');        var value2=max_el.val().replace(/\D/g,'');        if (value1 > maxvalue) { value1 = maxvalue; min_el.val(asMoneyType==true ? asMoney(maxvalue) : maxvalue)}        if(parseInt(value1) > parseInt(value2)){            value1 = value2;            min_el.val(asMoneyType==true ? asMoney(value1) : value1);        }        slider_el.slider("values", 0, value1);     });max_el.change(function(){        var value1=min_el.val().replace(/\D/g,'');        var value2=max_el.val().replace(/\D/g,'');        if (value2 > maxvalue) { value2 = maxvalue; max_el.val(asMoneyType==true ? asMoney(maxvalue) : maxvalue)}        if(parseInt(value1) > parseInt(value2)){             value2 = value1;             min_el.val(asMoneyType==true ? asMoney(value2) : value2);        }        slider_el.slider("values", 1, value2);    });}

которая и удет рисовать наши слайдеры.

Функция потребляет в себя jQuery элементы сладйера, межевых полей и максимального значения.

 

Расположенный чуть выше блок

$(document).ready(function(){...});

приводим к следующему виду

$(document).ready(function(){$("input.price_field").autoNumeric({aSep: ' ', vMax: '999999999999', vMin: '0'});var simple_slider=$("div.property-filter .slider");var simple_price_from=$("div.property-filter input.price_from");var simple_price_for=$("div.property-filter input.price_for");buidSlider(simple_slider, simple_price_from, simple_price_for, max_price, true);var simple_slider=$("div.property-filter .square_slider");var simple_price_from=$("div.property-filter input.square_from");var simple_price_for=$("div.property-filter input.square_for");buidSlider(simple_slider, simple_price_from, simple_price_for, square_all_max);$('a.search_page_toggle').click(function(){$('div#simple_search').slideToggle();$('div#extended_search').slideToggle();return false;});});

В принципе уже сейчас слайдер должен работать.

[PrimeTeam 0]

Большое Вам спасибо. А можно ли как-то уменьшить шаг у слайдера?

[XTRO 154]

to PrimeTeam:

а зачем полностью цитировать предыдущий пост?

[PrimeTeam 0]

to PrimeTeam:

а зачем полностью цитировать предыдущий пост?

Убрал цитату, раз мешает. 

[abushyk 694]

Большое Вам спасибо. А можно ли как-то уменьшить шаг у слайдера?

 

Я так понимаю, что речь об "увеличить"?

По-умолчанию шаг слайдера стоит 1.

Что бы это изменить в 

slider_el.slider({        range: true,        min: 0,...

добавьте параметр

step: 100,

вместо 100 любое другое целое значение.

[PrimeTeam 0]

Именно, ошибся.
А можно как-нибудь сделать разный шаг у каждого слайдера?

[abushyk 694]

легко.

 

новый код функции

function buidSlider(slider_el, min_el, max_el, maxvalue, asMoneyType, step){if(step === undefined){   var sliderStep=1;}else{var sliderStep=step ;}var min_value_now=min_el.val().replace(/\D/g,'');var max_value_now=max_el.val().replace(/\D/g,'');slider_el.slider({        step: sliderStep,        range: true,        min: 0,        max: maxvalue,        values: [ min_value_now, max_value_now ],        slide: function( event, ui ) {            if (ui.values[0]<0){                ui.values[0] = 0;            }            min_el.val(asMoneyType==true ? asMoney(ui.values[0]) : ui.values[0]);            max_el.val(asMoneyType==true ? asMoney(ui.values[1]) : ui.values[1]);        }    });min_el.change(function(){        var value1=min_el.val().replace(/\D/g,'');        var value2=max_el.val().replace(/\D/g,'');        if (value1 > maxvalue) { value1 = maxvalue; min_el.val(asMoneyType==true ? asMoney(maxvalue) : maxvalue)}        if(parseInt(value1) > parseInt(value2)){            value1 = value2;            min_el.val(asMoneyType==true ? asMoney(value1) : value1);        }        slider_el.slider("values", 0, value1);     });max_el.change(function(){        var value1=min_el.val().replace(/\D/g,'');        var value2=max_el.val().replace(/\D/g,'');        if (value2 > maxvalue) { value2 = maxvalue; max_el.val(asMoneyType==true ? asMoney(maxvalue) : maxvalue)}        if(parseInt(value1) > parseInt(value2)){             value2 = value1;             min_el.val(asMoneyType==true ? asMoney(value2) : value2);        }        slider_el.slider("values", 1, value2);    });}

Далее для цены вызов слайдер

buidSlider(simple_slider, simple_price_from, simple_price_for, max_price, true, тут_поставьте_циферку_шага_для_цены);

 

Для площади

buidSlider(simple_slider, simple_price_from, simple_price_for, square_all_max, false, тут_поставьте_циферку_шага_для_площади);

 

Жирный подсветил отличия.

[PrimeTeam 0]

Огромное Вам спасибо.