在Bootstrap popover中嵌入jQuery滑块

Question

我正在尝试将此代码用于rails:

$(elem).popover({
  title:"Brake activity",
  content: $("<div>").append( $("#slider").slider({ 
    range: "max",
    max: maxValue,
    min: maxValue / 5,
    value: maxValue / 2}) ).eq(0).outerHTML(),
  trigger: "manual"});

几乎一切都很顺利,但滑块没有用 - 它似乎被禁用了.即使我将禁用的选项定义为false,我也得到了相同的结果.outerHTML()方法是从Get selected元素的外部HTML中提取的.

我上传了一个屏幕截图,显示了滑块的显示方式:http://i48.tinypic.com/24azpkm.png

Answer 1

可能的问题

首先,在弹出窗口中呈现时,分配给content属性的任何值都将包含在<p>元素中.我怀疑可能会产生滑块问题.

其次,与其他Bootstrap组件(例如Modal)不同,Popover中的内容不是持久性的,而是在运行时呈现.因此,根据您到目前为止的指示,您将有一个问题能够在滑块中保留值.

一个办法

一种可能的方法是在显示或隐藏弹出框时附加和分离内容(在本例中为滑块).不幸的是,Popovers不会触发事件,所以你必须手动管理它.

首先实例化您将使用的滑块,并将其保留在您将处理弹出窗口切换的范围内:

var $slider = $('<div>').slider({
  range: "max",
  max: maxValue,
  min: maxValue / 5,
  value: maxValue / 2
});

显示弹出窗口后,您可以使用以下命令附加滑块:

$('.popover-content')
  .empty()
  .append($slider);

_{注意:如果一次打开多个弹出窗口,则必须使用更具体的选择器.}

在隐藏弹出窗口之前,您将手动分离滑块:

$slider.detach();

这将把它从DOM中删除,但它的所有数据都会持续存在.

我做了一个演示,使用切换按钮来触发弹出窗口.请注意,弹出窗口首先被初始化(未显示),并且没有给出内容的初始值.

的jsfiddle