jquery ui滑块范围修复到RTL

Question

我想将Jquery滑块范围更改为RTL.我是这样的:http://jqueryui.com/slider/#range

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>

见图:

我想反转最大和最小按钮位置(RTL).如何更改jquery代码或HTML代码？

Answer 1

我不喜欢来自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中的位置将会得到a -7,-1在使用之前只需乘以它即可.这也适用于范围.

您显然可以使用其他数学系统,但我发现这是最容易理解的.

Answer 2

请访问以下链接以获取更多帮助：

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