jQuery UI滑块与Bootstrap弹出窗口事件变化

我有一个bootstrap和jQueryUI的问题，我认为它更多的实现问题。jQuery UI滑块与Bootstrap弹出窗口事件变化

我试图自举酥料饼添加到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文本。

来源

2012-11-29 jderonde

那么，弹出窗口不会被告知您更改选项。尝试调用setContent：

var popover = jQuery("#slider1").data('popover'); 
popover.options.content = 'new content 10'; 
popover.setContent();

来源

2012-11-29 20:55:25

这似乎比我的解决方案更优雅。 – jderonde

行，所以我一直在做这个，因为发帖的问题，我确实已经找到了修复

所以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之间也做了同样的事情，只要值改变popover消失，这正是我想要的。

我对它的唯一轻微疑惑是，当页面初始化时弹出窗口弹出时，弹出窗口稍微高于它应该在的位置，然后当滑动窗口移动时弹出窗口有点下降，但是我确定我可以玩它，并让它出现在同一个地方。

希望这有助于以同样的问题

干杯乔人。

来源

2012-11-30 09:06:28 jderonde

jQuery UI滑块与Bootstrap弹出窗口事件变化

回答

相关问题