大佬教程收集整理的这篇文章主要介绍了jquery – 如何将垂直菜单项添加到Bootstrap popover?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
菜单项应垂直,应如下所示:
>编辑活动
>邀请会员
>删除事件
每个菜单项都应该是超链接,以打开一些新的模态对话框或类似的东西.
对于它我尝试下面的代码,但它没有为我工作.
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <Meta charset="utf-8"> <Meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <a href="#" data-toggle="popover">Toggle popover</a> </div> <script> $(document).ready(function(){ $('[data-toggle="popover"]').popover(); }); </script>
这里我使用了现有的Bootstrap组件,列表组作为示例,但您可以将任何HTML放入您的popover:
HTML
<!-- body content --> <div class="container"> <div class="row"> <div class="col-xs-12"> <button type="button" class="btn btn-info" data-toggle="popover" title="Popover title">Toggle popover</button> </div> </div> </div> <!-- loaded popover content --> <ul id="popover-content" class="list-group" style="display: none"> <a href="#" class="list-group-item">Edit Event</a> <a href="#" class="list-group-item">Invite Members</a> <a href="#" class="list-group-item">delete Event</a> </ul>
jQuery的
$(function() { $('[data-toggle="popover"]').popover({ html: true,content: function() { return $('#popover-content').html(); } }); });
一个非常有用的库,可以很好地使用Bootstrap,可能会帮助你创建像内联编辑这样的异步@L_675_13@,这是X-Editable
以上是大佬教程为你收集整理的jquery – 如何将垂直菜单项添加到Bootstrap popover?全部内容,希望文章能够帮你解决jquery – 如何将垂直菜单项添加到Bootstrap popover?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。