Navbar 组件 (动态渲染)

						//示例代码
						//html
						<div id="nav" lay-filter="demo"></div>
						//js
						layui.config({
						    base: 'js/'
						}).use('navbar', function() {
						    var navbar = layui.navbar();
						    navbar.set({
						        elem: '#nav',
						        url: 'datas/nav.json'
						    });
						    navbar.render();
						    navbar.on('click(demo)', function(data) {
						        layui.layer.msg(data.field.href);
						    });		
						});
						

属性名称	类型	默认值	描述
elem	string/object	undefined	存在组件的容器，支持类名、ID名 和Jquery对象. 举个栗子： 1. elem:'.nav' 2. elem:'#nav' 3. elem:$('.nav')
data	object	undefined	提供给组件的数据列表，请严格按照规定格式提供。
url	string	undefined	提供数据源远程的URL,当前只支持同步的方式读取数据
type	string	GET	请求的方式，可选参数：GET、POST
cached	bool	false	是否启用缓存，如果设置为true，则将初始化数据的数据添加至缓存
spreadOne	bool	false	设置是否只展开一个二级菜单

语法：navbar.on('event(过滤器值)', callback);

事件	描述
click	Navbar点击事件,元素被点击后会触发

举个栗子：

						navbar.on('click(side)', function(data) {
						    //Do something...
						    //data参数说明
						    //包含两个属性：data.elem 和 data.field
						    //data.elem 是点击的a标签dom对象
						    //data.field 包含三个属性
						    //1、data.field.href  设置的连接地址
						    //2、data.field.icon  设置的图标
						    //3、data.field.title 设置的标题
					     console.log(data.elem);
					     console.log(data.field.title);
					     console.log(data.field.icon);
					     console.log(data.field.href);
						});
						

名称	参数说明	描述
set	参数名：options 类型：object 属性类型：参考属性说明	如果组件在初始化时没有设置参数，那么该方法必须在调用render方法前调用 举个栗子： //栗子一 layui.config({ base:'js/' }).use('navbar',function(){ var navbar = layui.navbar({ elem: '#nav', url: 'datas/nav.json' }); //这是调用navbar组件初始化的情况，如果设置了参数，那么可以直接使用render方法渲染 navbar.render(); //Do something... }); //栗子二 layui.config({ base:'js/' }).use('navbar',function(){ var navbar = layui.navbar(); //navbar组件没有被初始化的情况，需要调用set方法设置一些参数 navbar.set({ elem: '#nav', url: 'datas/nav.json' }); navbar.render(); //Do something... });
render	无	渲染出navbar导航栏 //调用之前需要设置一些参数，参考set的方法说明 navbar.render();
cleanCached	无	清除缓存 //清除缓存方式的其中一种，还有一种是将参数cached设置为false，也会自动清除缓存 //栗子 navbar.cleanCached();
on	参数一：events --- 说明：事件名 -- 类型：String 参数二：callback --- 说明：架设函数 -- 类型：Function	调用此方法绑定事件，具体栗子请参考 事件文档 语法：navbar.on('event(过滤器值)', callback);

请严格按照以下数据结构设置数据

						//数据结构
						[
						    {
						        "title": "这是动态渲染的", //标题
						        "icon": "ဂ",       //图标，支持layui-icon 和 font-awesome
						        "href": "",               //跳转的地址，如果有字节点，该地址将无效
						        "spread":true,            //默认展开
						        "children": [             //子项 
						            {
						                "title": "表单",
						                "icon": "",
						                "href": "form.html"
						            }
						            //...
						        ]   
						    }, {
						        "title": "地址本",
						        "icon": "fa-address-book",
						        "href": "",
						        "spread":false,
						        "children": [
						            {
						                "title": "Github",
						                "icon": "fa-github",
						                "href": "https://www.github.com/"
						            },
						            {
						                "title": "QQ",
						                "icon": "fa-qq",
						                "href": "http://www.qq.com/"
						            },
						            {
						                "title": "Fly社区",
						                "icon": "",
						                "href": "http://fly.layui.com/"
						            }
						            //...
						        ] 
						    }, {
						        "title": "33333",
						        "icon": "",
						        "href": "",		
						        "spread":false
						    }
						]