2014-12-07 2 views
4

Я хочу изменить диапазон слайдера JQuery до RTL. Я usign это: http://jqueryui.com/slider/#rangejquery ui slider range fix to RTL

Jquery код:

$(function() { 
    $("#slider-range").slider({ 
     range: true, 
     min: 0, 
     max: 1000000, 
     values: [ 100000, 500000 ], 
     slide: function(event, ui) { 
     $("#amount").val(addCommas(ui.values[1])+ " تومان    " + addCommas(ui.values[0])+" تومان"); 
     } 
    }); 
    $("#amount").val(addCommas($("#slider-range").slider("values", 1)) + " تومان    " + addCommas($("#slider-range").slider("values", 0)) + "تومان"); 
    }); 

    function addCommas(nStr){ 
    nStr += ''; 
    x = nStr.split('.'); 
    x1 = x[0]; 
    x2 = x.length > 1 ? '.' + x[1] : ''; 
    var rgx = /(\d+)(\d{3})/; 
    while (rgx.test(x1)) { 
     x1 = x1.replace(rgx, '$1' + ',' + '$2'); 
    } 
    return x1 + x2; 
    } 

HTML код:

<label for="amount">قیمت:</label> 
<div id="slider-range"></div> 
<input type="text" id="amount" readonly> 

См изображения: enter image description here

Я хочу, чтобы инвертировать макс и мин кнопки место (RTL). Как изменить код jquery или html-код?

ответ

4

Посетите ссылку ниже для получения дополнительной помощи:

http://keith-wood.name/rtlsliders.html

+1

Спасибо. Я пробовал это и отлично работал. –

+0

Но для этого нет соответствующей документации, есть ли у вас рабочий пример для этого? –

+0

@PardeepJain приведенная выше ссылка - рабочий пример, я вообще не пробовал себя. – Shadi

5

Мне не нравится патч от http://keith-wood.name/rtlsliders.html просто потому, что он исправляет старую версию JQuery UI, и, к сожалению, они не включить его в главный код еще (почему ?!).

Другим вариантом является изменение min и max, но виджет не позволяет min > max, поэтому я обманул его. Я сделал { min: max * -1, max: min * -1 }, а затем использовал value * -1.

Пример времени: скажем, вы хотите, чтобы ползунок позволял пользователю выбирать число между 1 и 10.

{ min: 1, max: 10 } 
Generates: <[1][2][3][4][5][6][7][8][9][10]> 
{ min: -10, max: -1 } 
Generates: <[-10][-9][-8][-7][-6][-5][-4][-3][-2][-1]> 

Теперь он выглядит справа налево! Теперь вам просто нужно умножить любой результат, получаемый с ползунка, на -1, поэтому, когда он перемещает ползунок, где 7 в RTL будет, и вы получите -7, просто умножьте его на -1 перед использованием. Это также работает для диапазонов.

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

Смежные вопросы