Bootstrap 树形列表与右键菜单
介绍两个Bootstrap的扩展
Demo采用CDN分发，直接复制到本地就可以看到效果。也可以自己到上面的链接下载对应的js和css。
1. bootstrap-treeview
先上效果图：
不多BB，直接上完整Demo代码，复制下来自己对照着看，其他细节以及更多用法可以去上面的链接看作者怎么说。
<!doctype html> <html lang="en"> <head> <Meta charset="UTF-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 兼容IE --> <Meta name="viewport" content="width=device-width,initial-scale=1"> <title>bootstrap-treeview</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-4"> <h2>默认</h2> <div id="treeview1" class=""> </div> </div> <div class="col-sm-4"> <h2>自定义图标</h2> <div id="treeview2" class=""> </div> </div> <div class="col-sm-4"> <h2>丰富多彩</h2> <div id="treeview3" class=""> </div> </div> </div> </div> <!-- Script --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script> <script type="text/javascript"> $(function() { // 设置树的相关属性并构造树 $('#treeview1').treeview({ backColor: "#FFFFFF",color: "#428bca",enableLinks: true,data: getTree() }); $('#treeview2').treeview({ color: "#428bca",expandIcon: 'glyphicon glyphicon-chevron-right',collapseIcon: 'glyphicon glyphicon-chevron-down',nodeIcon: 'glyphicon glyphicon-bookmark',data: getTree() }); $('#treeview3').treeview({ expandIcon: "glyphicon glyphicon-stop",collapseIcon: "glyphicon glyphicon-unchecked",nodeIcon: "glyphicon glyphicon-user",color: "yellow",backColor: "purple",onhoverColor: "orange",borderColor: "red",showBorder: false,showTags: true,highlightSelected: true,selectedColor: "yellow",selectedBackColor: "darkorange",data: getTree() }); //定义树里的数据来源 function getTree(){ var data = [ { text: 'Parent 1',href: '#parent1',tags: ['4'],nodes: [ { text: 'Child 1',href: '#child1',tags: ['2'],nodes: [ { text: 'Grandchild 1',href: '#grandchild1',tags: ['0'] },{ text: 'Grandchild 2',href: '#grandchild2',tags: ['0'] } ] },{ text: 'Child 2',href: '#child2',tags: ['0'] } ] },{ text: 'Parent 2',href: '#parent2',tags: ['0'] },{ text: 'Parent 3',href: '#parent3',{ text: 'Parent 4',href: '#parent4',{ text: 'Parent 5',href: '#parent5',tags: ['0'] } ]; return data; } }); </script> </body> </html>
jQuery-contextMenu
先上效果图：
完整Demo代码，复制下来自己对照着看，其他细节以及更多用法可以去上面的链接看作者怎么说。
<!doctype html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>jquery-contextmenu</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css"> </head> <body> <ul id="the-node" class="btn-group-vertical"> <li class="btn btn-primary">right click me 1</li> <li class="btn btn-primary">right click me 2</li> <li class="btn btn-primary">right click me 3</li> <li class="btn btn-primary">right click me 4</li> </ul> <!-- Script --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.ui.position.js"></script> <script> $(function(){ //注册右键菜单的项与动作 $('#the-node').contextMenu({ selector: 'li',// 选择器，为某一类元素绑定右键菜单 callback: function(key,options) { var m = "clicked: " + key + " on " + $(this).text(); window.console && console.log(m) || alert(m); },items: { "edit": {name: "Edit",icon: "edit"},"cut": {name: "Cut",icon: "cut"},"copy": {name: "copy",icon: "copy"},"paste": {name: "Paste",icon: "paste"},"delete": {name: "Delete",icon: "delete"},"sep1": "---------","quit": {name: "Quit",icon: function($element,key,item){ return 'context-menu-icon context-menu-icon-quit'; }} } }); }); </script> </body> </html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
