UI滑塊一次側滑塊

jQuery UI的滑塊可以一邊 enter image description here UI滑塊一次側滑塊

如果較大箭頭移到一側傾斜能拖上反轉位置如何解決這一問題，一旦箭頭拖動。

例如，一旦達到2着能來1它要移動3，更然後3

這裏是我的代碼：

<html> 
    <head> 
     <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" /> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       function update() { 
        var tasks_time = $('#tasks_time').slider('value'); 
        var tasks_done = $('#tasks_done').slider('value'); 
        var total_cost = (tasks_time * 4 * tasks_done)/(tasks_done * 3); 
        var credits_needed = Math.round((total_cost/10) + 1); 
        $("#total_cost").text(total_cost.toFixed(2)); 
        $("#curr-tasks_time").text(tasks_time); 
        $("#curr-tasks_done").text(tasks_done); 
        $("#credits_needed").text(credits_needed.toFixed(0)); 
       } 
       $("#tasks_time").slider({ 
        value: 1, 
        min: 0, 
        max: 72, 
        step: 1, 
        slide: function() { 
         update(); 
        } 
       }); 
      }); 
     </script> 
     <style> 
      .ui-widget-content { border: 1px solid #ccc; background: #ff9900 url(images/ui-bg_flat_100_ff9900_40x100.png) 50% 50% repeat-x; color: #222222; } 
      .ui-widget-header { border: 1px solid #aaaaaa; background: #797979 url(images/ui-bg_highlight-soft_75_797979_1x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; } 
      .ui-slider { position: relative; text-align: left; } 
      .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; } 
      .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; } 
      .ui-slider-horizontal { height: .8em; } 
      .ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; } 
      .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } 
      .ui-slider-horizontal .ui-slider-range-min { left: 0; } 
      .ui-slider-horizontal .ui-slider-range-max { right: 0;} 
     </style> 
    </head> 
    <body> 
     Finish these items in <span id="curr-tasks_time" class="calc_number">1</span> hours 
     <div id="tasks_time"> 
     </div> 
    </body> 
</html>

JSFiddle

來源

2014-01-17 I' m Back

請提供您的實際代碼 –

http://jsfiddle.net/EAaLK/檢查這個代碼 –

@faizphp我加你的小提琴從評論你的問題。但是你的代碼在jsfiddle中正確向前和向後拖動。 –

我更新你的小提琴，用下面的邏輯：

註冊starting value當滑呃拖動，
滑動時正在執行，檢查current value比starting value更大，
如果current value小於starting value再鎖定滑塊。

觀看演示： http://jsfiddle.net/EAaLK/906/

$(document).ready(function(){ 

     function update() { 
      var tasks_time = $('#tasks_time').slider('value'); 
      var tasks_done = $('#tasks_done').slider('value'); 
      var total_cost = (tasks_time * 4 * tasks_done)/(tasks_done * 3); 
      var credits_needed = Math.round((total_cost/10)+1); 
      var startVal; //Register the value when dragging is starting. 
      $("#total_cost").text(total_cost.toFixed(2)); 
      $("#curr-tasks_time").text(tasks_time); 
      $("#curr-tasks_done").text(tasks_done); 
      $("#credits_needed").text(credits_needed.toFixed(0)); 

     } 

     $("#tasks_time").slider({ 
      value: 1, 
      min: 0, 
      max: 72, 
      step: 1, 
      start: function(e, ui){ 
       startVal = ui.value; 
      }, 
      slide: function(e, ui) { 
       if(ui.value < startVal){ 
        //Temporarily disable to slider 
        $(this).slider('disable'); 
       }else{ 
        update(); 
       } 
      }, 
      stop: function(){ 
       //Check if slider has been disabled 
       if($(this).slider("option", "disabled")){ 
        //If Yes then reset value to starting value 
        //and then re-enable slider 
        $(this).slider('value', startVal);      
        $(this).slider('enable'); 
       } 
      } 
     }); 


    });

來源

2014-02-13 08:04:04

UI滑塊一次側滑塊

回答

相關問題