工具提示按照jQuery滑塊手柄？

我想知道是否可以將工具提示附加到滑塊手柄上？我目前的滑塊功能是：工具提示按照jQuery滑塊手柄？

  $('#slider').slider({ 
       max: 18, 
       animate: 'slow', 
       orientation: 'vertical', 
       slide: function(e,ui) { 
        $('#storage').html(storage[ui.value-1]); 
        $('#ram').html(ram[ui.value-1]); 
        $('#bandwidth').html(bandwidth[ui.value-1]); 
        $('#cpu').html(cpu[ui.value-1]); 
        $('#price').html(price[ui.value-1]); 
       } 
      });

我想採取這一點，並應用工具提示來跟隨句柄。它會被推薦以某種方式確定位置並根據滑塊位置動態更新工具提示位置？

來源

2010-06-30 Steven

你想在工具提示中顯示什麼？ – 2010-06-30 08:05:31

滑我！是我想要展示的。 – Steven 2010-06-30 08:10:43

實際使用title屬性的更簡單的方法（belugabob想法）

$(function() { 


    $("#slider").slider() 
       .find(".ui-slider-handle") 
       .attr("title", "Slide Me") 

});

但是，如果你想完全控制使用此示例

前瞻：http://jsbin.com/eluqi3/166/edit

$(function() { 

    var $slideMe = $("<div/>") 
        .css({ position : 'absolute' , top : 10, left : 0 }) 
        .text("Slide Me!") 
        .hide() 


    $("#slider").slider() 
       .find(".ui-slider-handle") 
       .append($slideMe) 
       .hover(function() 
         { $slideMe.show()}, 
         function() 
         { $slideMe.hide()} 
       ) 

});

來源

2010-06-30 08:20:29 jantimon

儘管我喜歡你的解決方案，但我不相信在滑動動作的整個過程中，工具提示應該是可見的。通過使用本機瀏覽器工具提示，它將只在鼠標進入滑塊句柄後短暫出現。我想，所有的事情都是有趣的。 – belugabob 2010-06-30 08:26:06

猜你是對的 - 它也簡化了代碼;） – jantimon 2010-06-30 08:32:12

我的目標是集成某種漂亮的css工具提示。這可能嗎？或者只使用title屬性？ – Steven 2010-06-30 08:34:54

幾乎任何HTML元素可以通過給它一個'title'屬性來指定一個工具提示，其中要求的文本是屬性的值。

對於滑塊，您能否可靠地找到用於繪製滑塊句柄的HTML元素？如果是這樣，只需添加一個標題屬性，你應該在業務。

編輯：正如一般的觀點一樣，明智地使用title屬性可以使頁面更加整潔 - 通過添加上下文相關的信息，在實際需要之前不會佔用屏幕空間，並且幫助那些不熟悉您網站的用戶界面的人。

來源

2010-06-30 08:22:39 belugabob

我只是想象幻燈片句柄中的工具提示是什麼樣子，我看不到它以有意義的方式添加到用戶體驗中。它實際上可能是有害的，特別是如果它無意中覆蓋滑塊的當前值。 – 2010-06-30 08:28:59

的確如此，這就是您的技術的優勢 - 對工具提示的位置有更多的控制權。我主要關心的是，工具提示的目的是提醒沒有經驗的用戶，並告知他們使用滑塊手柄。一旦他們開始滑動，工具提示是多餘的。 – belugabob 2010-06-30 08:32:38

工具提示按照jQuery滑塊手柄？

回答

相關問題