【问题标题】:Enabling Popovers using Twitter Bootstrap's "bootstrap-popover.js" in Rails 3.2在 Rails 3.2 中使用 Twitter Bootstrap 的“bootstrap-popover.js”启用弹出框
【发布时间】:2012-05-25 06:48:35
【问题描述】:

Ruby on Rails 和 Twitter Bootstrap 的新手:P

尝试向图像添加弹出框,当您滚动它时,会出现带有较大版本图像的弹出框。

图片:

<ul class="thumbnails">
  <div class="span1">
    <ul>
     <li>
      <a href="#" class="thumbnail"><img src="http://placehold.it/125x100" alt=""></a>
     </li>
  </div>
    </ul>

我正在尝试通过将“bootstrap-popover.js”和“bootstrap-tooltip.js”(它扩展)添加到我的资产目录中的适当文件夹(使用 Rails 3.2)来使用 Twitter Bootstrap 的“Popovers”。

如果我想激活它,以便在我滚动图像时弹出窗口起作用,我该怎么做?

我真的只是不确定如何调用特定元素以使弹出框起作用。

非常感谢!!!

【问题讨论】:

    标签: javascript twitter-bootstrap ruby-on-rails-3.2


    【解决方案1】:

    将此 javascript 语句放在您链接 javascript 文件的任何位置之后。这将激活所有“a”元素(页面中的链接)的弹出框。

    $('a').popover(placement:'top');
    

    试试这个代码来测试一下。在链接标签中设置 rel、title 和 data-content 属性将激活该元素上的弹出框。

    <ul class="thumbnails">
      <div class="span1">
        <ul>
         <li>
          <a href="#" rel="popover" title="A Title" data-content="<img src='http://placehold.it/125x100'/>">Hover over me for image.</a>
         </li>
      </div>
    </ul>
    

    【讨论】:

    • 非常感谢 chapman84!我测试了一下,不得不把
    • > placehold.it/125x100'/></a>,其他代码刚刚显示“悬停在图像上”
  • 酷。很高兴它让你朝着正确的方向前进。我在表格标题元素上使用了弹出框。我没有图像,但我有无序列表,所以我认为图像也可以。
  • 你有没有指定弹出框看起来像上图?我正在尝试获得这种效果,但将其弹出在其上方而不是在其右侧...:p
  • 在你添加的那行javascript中,将placement:'top'更改为placement:'right'。您可以进行上、右、左和下操作。
  • 再次感谢查普曼,它似乎不起作用(无论我指定什么,它都保持相同类型的弹出框和同一个地方)所以我在这里发布了一个更具描述性的问题:@987654323 @
  • 猜你喜欢
    相关资源
    最近更新 更多
    热门标签