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

设置是否只展开一个二级菜单

Event 事件

语法: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
						    }
						]