呈現指標和里程碑標籤UI滑桿

使用HTML &的JavaScript呈現指標和里程碑標籤UI滑桿

我創建了一個滑動條，成功地響應了選擇選項左右逢源。但是我選擇'隱藏'選擇選項框。我想知道是否有人可以給我任何提示，爲滑塊創建標籤，因爲用戶現在不知道他們選擇了什麼。我已經找到的例子顯示了完美的指標，里程碑數字和浮動數字，但是所有事情都與滑動條相關，而不是標籤。幫幫我！

我的JavaScript滑塊條形碼

 $(function() { 
      var select = $("#logbytes"); 
      var slider = $(" <div id='slider'></div>").insertAfter(select).slider({ 
       min: 1, 
       max: 6, 
       step: 1, 
       value: select[0].selectedIndex + 1, 
       slide: function(event, ui) { 
        select[0].selectedIndex = ui.value - 1; 
       } 
      }); 

      $('#logbytes').after(slider).hide(); 
     });

來源

2011-09-06 smurf

你是什麼意思？就像標籤的當前值高於div？ –

是的，只是表明選擇了什麼，因爲在最小我所有的是滑塊。或者像0 1 2 3 4這樣的滑塊下類似時間線類型的條 – smurf

的基本思想是包裝的包裝DIV中的滑塊。然後在包裝中添加另一個div。它的文本將是滑塊的當前值。

然後，唯一要做的就是移動該div並更新它的文本。它類似於：

slide: function(event, ui) { 
    $(".amount").text(ui.value); 
    $(".amount").css("margin-left",(ui.value-min)/(max-min)*100+"%"); 
}

其中min和max分別是滑塊的最小值和最大值。

查看http://jsfiddle.net/WYdLF/的例子。

來源

2011-09-06 11:24:50

呈現指標和里程碑標籤UI滑桿

回答

相關問題