2

我使用了 jquery ui ( http://jqueryui.com/slider/#steps ) 并对代码进行了一些更改以满足我的需要。

我正在尝试制作这样的东西，

在此处输入图像描述

现在我正在使用这些功能，稍后会使用用户界面。

我正在尝试使滑块捕捉到所有值，而不是跳到单击鼠标的位置。例如滑块上的手柄在最左端，当我单击右端的滑块时，它会跳转到单击鼠标的位置，我不希望这种情况发生。我希望滑块跟随数组上的值，从数组 [0] 到数组 [19] 或从数组 [19] 到数组 [0]。

var valMap = [10,9,8,7,6,5,4,3,2,1,1,2,3,4,5,6,7,8,9,10]; //10x optical zoom WIDE/TELE

当句柄位于左端数组 [0] 等于 10 并且当我单击数组 [19] 右端时，它不应跳转到数组 [19] 它应该从数组1开始，即 9 然后再次单击数组[2] 即 8 等。

它应该有序而不是跳跃。

10,9,8,7,6,5,4,3,2,1 <--- LEFT END 缩小（宽）

1,2,3,4,5,6,7,8,9,10 <--- RIGHT END 放大（TELE）

即使我单击滑块的任何部分，它也应该按照顺序而不是跳转到单击鼠标的位置。

用于放大的滑块示例

& = 滑块手柄

^ = 鼠标点击

W & - - - - - - - - - - - - - - ^ - - - - T  
 10 9 8 7 6 5 4 3 2 1 1 2 3 4 5 6 7 8 9 10


W - & - - - - - ^ - - - - - - - - - - - - T  
 10 9 8 7 6 5 4 3 2 1 1 2 3 4 5 6 7 8 9 10

查看手柄如何从 10 移动到 9，而不是跳转到单击鼠标的 6。

再次点击：

W - - & - - - - - - - - - - - - - - - - - T  
 10 9 8 7 6 5 4 3 2 1 1 2 3 4 5 6 7 8 9 10

用于缩小的滑块示例

W - - - - ^ - - - - - - - - - - - - - - & T  
 10 9 8 7 6 5 4 3 2 1 1 2 3 4 5 6 7 8 9 10


W - - - - - - - - - - - ^ - - - - - - & - T  
 10 9 8 7 6 5 4 3 2 1 1 2 3 4 5 6 7 8 9 10

再次点击：

W - - - - - - - - - - - - - - - - - & - - T  
 10 9 8 7 6 5 4 3 2 1 1 2 3 4 5 6 7 8 9 10

这是我的代码：

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Slider - Snap to increments</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>

  $(document).ready(function() {
    var valMap = [10,9,8,7,6,5,4,3,2,1,1,2,3,4,5,6,7,8,9,10]; //10x optical zoom WIDE/TELE
    var slider = $( "#slider" ).slider({
      disabled: false,
      animate: true,
      min: 0,
      max: valMap.length-1,
      values: [10],
      change: function( event, ui ) {
        $( "#zomlevel" ).val(valMap[ui.values[0]] + "x");
        slider.slider("option", "disabled", true);
        slider.slider("option", "animate", "slow");
        setTimeout(ENABLE, 3000);
      },
      stop: function(event, ui){
        if(ui.value == 10){
          alert("Default ZOOM");
        }
        if(ui.value < 10){

          WIDE();


        }
        if(ui.value > 10){

          TELE();
        }
      }
    });
$( "#zomlevel" ).val( "x" + $( "#slider" ).slider( "value" ) );
    function WIDE(){
      $.post( 
                'cntr_L.php', 
                { cmd: "OUT" }, 
                function( data ){  

                $( 'body ').append( data );

                });
    }

    function TELE(){
      $.post( 
                'cntr_L.php', 
                { cmd: "IN" }, 
                function( data ){  

                $( 'body ').append( data );

                });
    }

    function ENABLE(){
      slider.slider("option", "disabled", false);
    }

  });

  </script>
</head>
<body>

<p>
  <label for="zoom">ZOOM CONTROLLER(W/T)</label>
  <input type="text" id="zomlevel" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>

<div id="slider"></div>


</body>
</html>

我怎样才能让它像那样工作？

这是一个jsfiddle：http: //jsfiddle.net/endl3ss/sqsCV/

4

0 回答 0