模擬微調數與鼠標按下

我做了一個控制（數字微調上下），在表的工作：模擬微調數與鼠標按下

的jsfiddle：http://jsfiddle.net/Leandro1981/wn8vd/1/

，我想模擬「鼠標按下，增量而鼠標按鍵時持有「但我做不到。我試圖把它與下面和功能的腳本混合：

的jsfiddle：http://jsfiddle.net/Leandro1981/kKW85/

，但我無法做到這一點。

我最後在這裏嘗試： http://jsfiddle.net/Leandro1981/S8Zt9/1/

也許錯的是

timeout = setInterval(function() {

但我無法弄清楚。我使用引導3，所以我不能使用一些JQuery UI插件...

任何幫助將preciated！

請在下面發表評論，如果您有我的英語水平有任何疑問，意見或任何改善這個問題，對不起:)

請隨意使用我的代碼/控制以任何方式。

感謝和親切的問候

來源

2014-04-01 Leandro Tupone

寫出廠設置每個控件，所以你在變量得到閉合，現在它只是一個能夠使其工作給出的相關要素問題。對於這一點，你需要

監聽mousedown在了和下節點來襯托變化
開始超時循環繼續做你的變化
監聽mouseup在window，以確保您取消超時循環（您可能還想要聽取鼠標/焦點丟失）

因此，所有在一起，

function spinFactory(node, up, down) { // I wrote this vanilla :D 
    var spinning, delta; 
    window.addEventListener('mouseup', stopSpin); 
    function spin() { 
     node.value = +node.value + delta; 
     spinning = setTimeout(spin, 500); 
    } 
    function stopSpin() { // maybe also invoke this on mouseout/loss of focus 
     window.clearTimeout(spinning); 
     delta = 0; 
    } 
    up.addEventListener('mousedown', function spinUp() { 
     delta = 1; 
     spin(); 
    }); 
    down.addEventListener('mousedown', function spinDown() { 
     delta = -1; 
     spin(); 
    }); 
} 
// apply to your control, used a bit of jQuery to make life easier 
$('.PNET-spinner').each(function() { 
    spinFactory(
     this.getElementsByTagName('input')[0], 
     $(this).find('.btn:first-of-type')[0], 
     $(this).find('.btn:last-of-type')[0] 
    ); 
});

DEMO

來源

2014-04-01 20:17:20

我已經更新了Fiddle here ...請檢查並它可能會幫助你..

腳本

  $('.PNET-spinner .btn:first-of-type').on('mousedown', function (e) { 
       var timer, proxy = this; 

       timer = setInterval(function() { 
        increment(proxy); 
       }, 200); 

       $(document).one("mouseup", function() { 
        increment(proxy); 
        if (timer) clearInterval(timer); 
       }); 
      }); 
      $('.PNET-spinner .btn:last-of-type').on('mousedown', function() { 
       var timer, proxy = this; 

       timer = setInterval(function() { 
        decrement(proxy); 
       }, 200); 

       $(document).one("mouseup", function() { 
        decrement(proxy); 
        if (timer) clearInterval(timer); 
       }); 
      }); 

     function increment(proxy) { 
      var numupdown = $('.PNET-spinner input', $(proxy).closest("tr")); 
      var inputValue = parseInt($(numupdown).val(), 10); 
      inputValue++; 
      $(numupdown).val(inputValue); 
     } 
     function decrement(proxy) { 
      var numupdown = $('.PNET-spinner input', $(proxy).closest("tr")); 
      var inputValue = parseInt($(numupdown).val(), 10); 
      if (inputValue > 1) { 
       inputValue--; 
       $(numupdown).val(inputValue); 
      } 
     }

來源

2014-04-01 20:17:44 Soundar

你只需要照顧的兩件事。首先，應該一次又一次地調用用於遞增和遞減文本框中的值的函數，直到用戶做出mouseout或mouseup。其次，確保this的值正確var numupdown = $('.PNET-spinner input', $(this).closest("tr"));

以下代碼顯示如何爲增量按鈕執行此操作。類似的事情，你可以實現遞減按鈕。

var timeout; 
var inc = function() { 
    var myThis = this; 
    var numupdown = $('.PNET-spinner input', $(this).closest("tr")); 
    var inputValue = parseInt($(numupdown).val(), 10); 
    inputValue++; 
    console.log(inputValue); 
    $(numupdown).val(inputValue); 
    clearTimeout(timeout); 
    timeout = setTimeout(function(){ 
     //http://stackoverflow.com/questions/3630054/how-do-i-pass-the-this-context-to-a-function 
     inc.apply(myThis, arguments); 
    }, 1000); 
}; 
var incStop = function(){ 
    clearTimeout(timeout); 
} 
$('.PNET-spinner .btn:first-of-type').on('mousedown', inc); 
$('.PNET-spinner .btn:first-of-type').on('mouseup', incStop); 
$('.PNET-spinner .btn:first-of-type').on('mouseout', incStop);

檢查此DEMO here。

來源

2014-04-01 21:10:32 Monish

模擬微調數與鼠標按下

回答

相關問題