Navbar组件

Navbar组件是基于layui导航菜单封装的组件，配合 tab组件能完成多开页面的操作

设置绑定方式

提供两种设置方式(设置data属性和 kit-target 属性),以下两种方式都能正确解析[详细请参考index.html]

方式一

//data-url //跳转地址
//data-icon //图标，支持layui图片和fa图标
//data-title //标题
//data-id //唯一id
Example:
data-url="form.html" data-icon="fa-user" data-title="表单" kit-target data-id='2' kit-target

方式二

kit-target data-options="{url:'test.html',icon:'fa-user',title:'表格',id:'1'}"

渲染方式

该组件提供了三种渲染方式

渲染方式	方法	备注	详细说明
服务端渲染后绑定	调用navbar.bind()方法	已实现	此方法需在dom元素渲染完成后执行 Example: //注：需在容器内添加属性 kit-navbar或指定容器,example:navbar.set({elem:'#container'}); navbar.bind(function(data) { t.tabAdd(data);//这个方法为tab组件提供的方法 }); data的数据结构: data.icon;//图标，支持layui图标和fontawesome图标 data.id;//id,唯一标识 data.title;//标题 data.url;//跳转地址
异步渲染方式(AJAX)	通过设置url参数组件内部渲染	已实现	设置remote参数，调用render方法
本地数据渲染方式	通过设置data参数组件内部渲染	已实现	设置data参数，调用render方法

渲染方式

方法

备注

详细说明

服务端渲染后绑定

调用navbar.bind()方法

已实现

此方法需在dom元素渲染完成后执行

Example:

//注：需在容器内添加属性 kit-navbar或指定容器,example:navbar.set({elem:'#container'});
navbar.bind(function(data) {
    t.tabAdd(data);//这个方法为tab组件提供的方法
});
data的数据结构:
data.icon;//图标，支持layui图标和fontawesome图标
data.id;//id,唯一标识
data.title;//标题
data.url;//跳转地址

异步渲染方式(AJAX)

通过设置url参数组件内部渲染

已实现

设置remote参数，调用render方法

本地数据渲染方式

通过设置data参数组件内部渲染

已实现

设置data参数，调用render方法

可用的方法

名称	参数	返回值	描述
set(options)	options/object	this/object	配置一些全局参数,返回当前navbar对象，以便于链式调用 Example: navbar.set({ elem:'#navbarContainer', url:'' });
bind(callback)	callback/function(data)	void	绑定a标签的点击事件 Example: navbar.bind(function(data) { t.tabAdd(data);//这个方法为tab组件提供的方法 });
render(callback)	callback/function(data)	void	渲染navbar Example: navbar.render(function(data) { t.tabAdd(data);//这个方法为tab组件提供的方法 });

名称

参数

返回值

描述

set(options)

options/object

this/object

配置一些全局参数,返回当前navbar对象，以便于链式调用

Example:

navbar.set({
    elem:'#navbarContainer',
    url:''
});

bind(callback)

callback/function(data)

void

绑定a标签的点击事件

Example:

navbar.bind(function(data) {
    t.tabAdd(data);//这个方法为tab组件提供的方法
});

render(callback)

callback/function(data)

void

渲染navbar

Example:

    navbar.render(function(data) {
        t.tabAdd(data);//这个方法为tab组件提供的方法
    });

options参数说明

名称	类型	默认值	描述
elem	string	undefined	容器DOM，支持id选择器和类选择器 (如果elem为undefined就必须在容器标签添加kit-navbar属性，否则会抛异常)
filter	string	kitNavbar	过滤器名称
data	object	undefined	本地数据源，有特定的数据结构，点击我查看
remote	object	详细看描述 url:undefined,type:'GET',jsonp:false	navbar.set{ remote:{ url: 'xx/api', //接口地址 type: 'POSST', //请求方式 jsonp: false //跨域 } }

Data数据结构(注：当前只支持两级菜单)

//图标支持layui图标和fontawesome字体图标
[{
    "id": "1",
    "title": "基本元素",
    "icon": "fa-cubes",
    "spread": true, //如果为true则展开 (v1.0.3可用)
    "children": [{
        "id": "7",
        "title": "表格",
        "icon": "",
        "url": "test.html"
    }, {
        "id": "8",
        "title": "表单",
        "icon": "",
        "url": "form.html"
    }]
}, {
    "id": "5",
    "title": "这是一级导航",
    "icon": "fa-stop-circle",
    "url": "https://www.baidu.com",
    "spread": false
}]

这个文档就先写到这里吧，后面新增了再补充啦。