在 Rails 3.2 中为 Twitter Bootstrap 的“bootstrap-popover.js”设计“popovers”样式
Posted
技术标签:
【中文标题】在 Rails 3.2 中为 Twitter Bootstrap 的“bootstrap-popover.js”设计“popovers”样式【英文标题】:Styling "popovers" in Twitter Bootstrap's “bootstrap-popover.js” in Rails 3.2 【发布时间】:2012-05-26 08:29:38 【问题描述】:使用 Rails 3.2 和 Twitter Bootstrap“bootstrap-popover.js”和“bootstrap-tooltip.js”here
这就是我想要发生的事情:
当我将鼠标悬停在上面时:
<li>
<a href="#" class="thumbnail"><img src="http://placehold.it/125x100" ></a>
</li>
在“bootstrap-popover.js”和“bootstrap-tooltip.js”中我都有 $('a').popover(placement:'top');。
我还可以指定哪些其他选项以使弹出窗口看起来像上图一样,带有选项“A 标题”和“这里有一些很棒的内容。非常吸引人,对吧?”
这是我目前得到的图片:
谢谢。
【问题讨论】:
【参考方案1】:这是您想要的声音的一个工作示例: http://jsfiddle.net/chapmanc/DuKCg/4/
此外,您只需将 javascript 行放在一个地方。我通常使用我的所有自定义函数创建一个新的 .js 文件,并将其包含在我的页面中,就像包含弹出框和工具提示脚本一样。
例如,您文件的底部可能如下所示:
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/bootstrap-tooltip.js" type="text/javascript"></script>
<script src="js/bootstrap-popover.js" type="text/javascript"></script>
<script src="js/customFunctions.js" type="text/javascript"></script>
使用 customFunctions.js 具有:
$('a').popover(placement:'right');
【讨论】:
嗨,查普曼,非常感谢您的帮助。泰。我已经完成了你所说的一切,但即使我放 $('a').popover(placement:'right');在 bootstrap-popover.js 中。我认为这与弹出框“扩展”工具提示的事实有关,所以我会继续玩弄这些东西。感谢您的所有努力!以上是关于在 Rails 3.2 中为 Twitter Bootstrap 的“bootstrap-popover.js”设计“popovers”样式的主要内容,如果未能解决你的问题,请参考以下文章
如何在iOS中为twitter和Facebook实现通用深层链接?
我如何在 rails 中获得 twitter/friendfeed 之类的主页网址?
Rails 5 - 如何删除 twitter-bootstrap-rails gem 并手动安装