Bootstrap 树形列表与右键菜单
Bootstrap 树形列表与右键菜单
介绍两个Bootstrap的扩展
- Bootstrap Tree View 树形列表
- jQuery contextMenu 右键菜单
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/bootstrap@3.3.7/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/jquery@1.12.4/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/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', tags: ['0'] }, {text: 'Parent 4',href: '#parent4',tags: ['0'] }, {text: 'Parent 5',href: '#parent5' ,tags: ['0'] }];retu 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/bootstrap@3.3.7/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/jquery@3.3.1/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/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){ retu 'context-menu-icon context-menu-icon-quit'; }}}});});</script></body></html>作者：Recycer
来源链接：https://www.cnblogs.com/recycer/p/11332134.html
版权声明：
1、JavaClub（https://www.javaclub.cn）以学习交流为目的，由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容，包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网，本站不享有版权，版权归原作者所有。
2、本站提供的内容仅用于个人学习、研究或欣赏，以及其他非商业性或非盈利性用途，但同时应遵守著作权法及其他相关法律的规定，不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容，请及时通知本站（javaclubcn@163.com），我们将第一时间核实后及时予以删除。
