1.插件依赖jQuery,打开index.html即可使用
2.菜单横向滑动功能依赖了官方的swiper-3.4.0.jquery.min.js
3.初始化
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | //引用组件 这里可以ajax接收后台数据 var res = {}; res.name = "全部" ; res.href = "" ; res.children =[{ "isDefault" :1, "src" : "images/icontype1.png" , "children" :[{name: "A模块" ,children:[{name: 'AA模块' ,children:[{name: "AAA模块" }]},{name: 'AA模块' ,children:[{name: "AAc模块" }]},{name: 'Ab模块' ,children:[{name: "Abb模块" }]}]},{name: "B模块" ,children:[{name: 'BB模块' ,children:[{name: "BBB模块" }]}]}], "domain" : "PB07" , "maptype" : "CONTAINER" , "name" : "维修公告" , "oid" : "com.imecms.container.Container:1001" },{ "path" : "用户手册" , "src" : "images/icontype1.png" , "domain" : "PB07" , "maptype" : "ST" , "name" : "用户手册" , "oid" : "com.imecms.container.Folder:3837" },{ "path" : "保养手册" , "src" : "images/icontype1.png" , "domain" : "PB07" , "maptype" : "ST" , "name" : "保养手册" , "oid" : "com.imecms.container.Folder:3838" },{ "path" : "下载区" , "src" : "images/icontype1.png" , "domain" : "PB07" , "maptype" : "JS" , "name" : "下载区" , "js" : "showDownloadAreaContent();" }]; require( [ 'MenuBar' ], function (MenuBar) { var menuBar = new MenuBar( "#swiper" ,{ data :res, }); } ); //初始化导航条滑动等 swiper.dataInit( "#swiper" ); |
4.基本功能只用绑定节点添加数据即可,如果需要点击节点事件以及动态render可以初始化的时候添加监听事件renderLeaf,具体例子里面有,这里贴出来参考一下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | renderLeaf: function (menuItem) { //点击叶子节点触发事件,与后台交互等等 console.log( '您点击了叶子节点' ); var data = menuItem.data; if ( typeof data == "string" ) { data = JSON.parse(data); } console.log(data); //支持动态添加menu事件,这里可以动态请求后台render数据 Example if (data.domain == "PB07" ) { var data1 = [{ name: "新数据1" , children: [{ name: "测试数据1" }] }, { name: "新数据2" , children: [{ name: "测试数据2" }] }]; //动态添加数据 menuItem.addSubItems(data1); } } |
5.滑动功能是引用了官方的swiper插件效果,为了防止污染menubar的封装性写在了组件的外面swiper.js里面
特别申明:
本站所有资源都是由网友投稿发布,或转载各大下载站,请自行检测软件的完整性!
本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!
如有侵权请联系我们删除下架,联系方式:lei1294551502@163.com