Question

我想模仿jquery mobile所做的here，但不加载库。只是使用jquery和jquery-ui（如果我知道如何在没有它的情况下创建滑块，我可能会停止使用jquery-ui。）

我想在滑块手柄（ui.handle）内以及手柄上方的div中显示滑块值（ui.value），就像在第三个示例中一样（两个选项一起）：

var initialValue = 5;

$("#slider").slider({
    min: 1,
    max: 50,
    value: initialValue,
    start: function( event, ui ) {
        $(ui.handle).find('.ui-slider-tooltip').show();
    },
    stop: function( event, ui ) {
        $(ui.handle).find('.ui-slider-tooltip').hide();
    },
    slide: function( event, ui) {
        $(ui.handle).find('.ui-slider-tooltip').text(ui.value);
        $(ui.handle).text(ui.value);
    },
    create: function( event, ui ) {
        var tooltip = $('<div class="ui-slider-tooltip" />').css({
            position: 'absolute',
            top: -25,
            left: 0,
            border: '1px grey'
        });

        $(event.target).find('.ui-slider-handle').append(tooltip);
        $('.ui-slider-handle').text(initialValue);
    }
    });

但由于某些未知原因，操纵滑块手柄会阻止向其附加任何内容或显示/隐藏它。

我也无法设置工具提示的边框，在检查代码时它没有自动添加，我也不知道为什么......（jquery-ui ofc但为什么？）< / p>

我只想要像jquery mobile这样的东西。

http://jsfiddle.net/udxgkbmv/1/

Answer 1

我打算尝试使用花哨的文字阴影，但那不会起作用。我能够添加另一个内部DIV并在工具提示DIV之后添加它。默认情况下，工具提示DIV和内部DIV都将包含initialValue。幻灯片事件现在更新内部和工具提示DIV。

边框未显示的问题只是缺少边框类型（例如，实体）。我没有在工具提示或内部添加任何样式，并且会将其留给您。

$(document).ready(function () {
     var initialValue = 5;

     $("#slider").slider({
         min: 1,
         max: 50,
         value: initialValue,
         start: function( event, ui ) {
             $(ui.handle).find('.ui-slider-tooltip').show();
         },
         stop: function( event, ui ) {
             $(ui.handle).find('.ui-slider-tooltip').hide();
         },
         slide: function( event, ui) {
             $(ui.handle).find('div').text(ui.value);
             //$(ui.handle).text(ui.value);
         },
         create: function( event, ui ) {
              var tooltip = $('<div class="ui-slider-tooltip" />').css({
                 position: 'absolute',
                 top: -25,
                 left: 0,
                 border: '1px solid gray',
                 display: 'none'
             }).text(initialValue);
             var inner = $('<div class="ui-slider-inner" />').css({
                 position: 'absolute',
                 top: 0,
                 left: 0,
                 display: 'block'
             }).text(initialValue);
             $(event.target).find('.ui-slider-handle').append(tooltip).append(inner);
             //$('.ui-slider-handle').text(initialValue);
         }
    });
});

JSFiddle：http://jsfiddle.net/udxgkbmv/3/

没有jquery mobile的滑块工具提示扩展

1 个答案: