1

我在使用引导程序和 jQueryUI 时遇到问题,我认为它更多的是一个实现问题。

我正在尝试将引导弹出框添加到 jQueryUI 滑块,然后在滑块的附带事件中我试图更改弹出框的文本

以下是我到目前为止的代码。

<Script type="text/javascript">
    jQuery(function () {
    jQuery("#slider1").slider({
        value: 5,
        min: 0,
        max: 10,
        step: 1,
        slide: function (event, ui) {
            switch(ui.value){
                case 0:
                    jQuery("#slider1").data('popover').options.content = 'new content 0';
                break;
                case 1:
                    jQuery("#slider1").data('popover').options.content = 'new content 1';
                break;
                case 2:
                    jQuery("#slider1").data('popover').options.content = 'new content 2';
                break;
                case 3:
                    jQuery("#slider1").data('popover').options.content = 'new content 3';
                break;
                case 4:
                    jQuery("#slider1").data('popover').options.content = 'new content 4';
                break;
                case 5:
                    jQuery("#slider1").data('popover').options.content = 'new content 5';
                break;
                case 6:
                    jQuery("#slider1").data('popover').options.content = 'new content 6';
                break;
                case 7:
                    jQuery("#slider1").data('popover').options.content = 'new content 7';
                break;
                case 8:
                    jQuery("#slider1").data('popover').options.content = 'new content 8';
                break;
                case 9:
                    jQuery("#slider1").data('popover').options.content = 'new content 9';
                break;
                case 10:
                    jQuery("#slider1").data('popover').options.content = 'new content 10';
                break;
            }
            jQuery("#slider1").find(".ui-slider-handle").text(ui.value);
            jQuery("#ctl00_MainContent_rptQuestions_ctl00_sdrQuestion_hdnValue").val(ui.value);
        }
    });
    jQuery("#amount1").val("£" + jQuery("#slider1").slider("value"));
});
jQuery(document).ready(function() {
    var value = jQuery("#slider1").slider("option","value");
    jQuery("#ctl00_MainContent_rptQuestions_ctl00_sdrQuestion_hdnValue").val(value);
    jQuery("#slider1").popover({title: 'Twitter Bootstrap Popover 5', content: "It's so simple to create a tooltop for my website!"});
    jQuery("#slider1").popover('show');
    jQuery("#slider1").find(".ui-slider-handle").text(value); 
});

所以基本上上面的代码所做的就是设置一个从 0 到 10 的滑块,增量为 1,然后我在滑块句柄上设置一个标签以显示当前的 ui 值,并在幻灯片事件上更改它。我遇到的问题是移动滑块时引导程序没有改变

引导弹出窗口正在初始化,并显示页面加载时,正确的值,调试JS时,switch语句被命中并且值被传入,它似乎并没有改变bs文本。

4

2 回答 2

0

好吧,弹出窗口不会收到您更改选项的通知。尝试调用setContent

var popover = jQuery("#slider1").data('popover');
popover.options.content = 'new content 10';
popover.setContent();
于 2012-11-29T20:55:25.593 回答
0

好的,所以自从发布问题以来我一直在研究这个问题,我确实找到了解决方法

所以在我添加的 switch 语句中

                   case 0:
                       jQuery("#slider1").popover('destroy');
                       jQuery("#slider1").popover({title: 'Twitter Bootstrap Popover 0', content: "It's so simple to create a tooltop for my website!", animation: false});
                       jQuery("#slider1").popover('show');
                   break;

然后我对 0 - 10 做了同样的事情,也通过使动画为假,一旦值改变弹出框消失,这正是我想要的。

我唯一遇到的小问题是,当在页面初始化时加载弹出框时,弹出框会出现在它应该出现的位置稍上方,然后当滑块移动时,弹出框会下降一点,但我确定我可以玩弄它并让它出现在同一个地方。

希望这可以帮助任何有同样问题的人

干杯乔。

于 2012-11-30T09:06:28.730 回答