工具提示跟随jquery滑块手柄?

前端之家收集整理的这篇文章主要介绍了工具提示跟随jquery滑块手柄?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想知道是否可以在滑块手柄附加工具提示?我当前的滑块功能是:
  1. $('#slider').slider({
  2. max: 18,animate: 'slow',orientation: 'vertical',slide: function(e,ui) {
  3. $('#storage').html(storage[ui.value-1]);
  4. $('#ram').html(ram[ui.value-1]);
  5. $('#bandwidth').html(bandwidth[ui.value-1]);
  6. $('#cpu').html(cpu[ui.value-1]);
  7. $('#price').html(price[ui.value-1]);
  8. }
  9. });

我想拿这个并应用一个工具提示来跟随句柄.是否会推荐以某种方式确定位置,并根据滑块位置动态更新工具提示位置?

解决方法

实际使用title属性是更容易的方法(belugabob想法)
  1. $(function() {
  2.  
  3.  
  4. $("#slider").slider()
  5. .find(".ui-slider-handle")
  6. .attr("title","Slide Me")
  7.  
  8. });

但是,如果要完全控制使用此示例

预览:http://jsbin.com/eluqi3/166/edit

  1. $(function() {
  2.  
  3. var $slideMe = $("<div/>")
  4. .css({ position : 'absolute',top : 10,left : 0 })
  5. .text("Slide Me!")
  6. .hide()
  7.  
  8.  
  9. $("#slider").slider()
  10. .find(".ui-slider-handle")
  11. .append($slideMe)
  12. .hover(function()
  13. { $slideMe.show()},function()
  14. { $slideMe.hide()}
  15. )
  16.  
  17. });

猜你在找的jQuery相关文章