master

分支 (2)

管理

管理

master

v2.0

kit_admin
/
navbar.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Navbar组件</title>
    <link rel="stylesheet" href="./plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="./build/css/doc.css" media="all">
</head>

<body>
    <div class="kit-doc">
        <blockquote class="layui-elem-quote">Navbar组件是基于<a href="http://www.layui.com/doc/element/nav.html" target="_blank">layui导航菜单</a> 封装的组件，配合
            <a href="tab.html">tab组件</a>能完成多开页面的操作</blockquote>
        <div class="kit-doc-title">
            <fieldset>
                <legend><a name="blockquote">设置绑定方式</a></legend>
            </fieldset>
        </div>
        <p>提供两种设置方式(设置data属性 和 kit-target 属性),以下两种方式都能正确解析[详细请参考index.html]</p>
        <table class="layui-table">
            <colgroup>
                <col width="100">
                <col>
            </colgroup>
            <tbody>
                <tr>
                    <td>方式一</td>
                    <td>
                        <pre class="layui-code">
//data-url //跳转地址
//data-icon //图标，支持layui图片和fa图标
//data-title //标题
//data-id //唯一id
Example:
<pre class="layui-code">
data-url="form.html" data-icon="fa-user" data-title="表单" kit-target data-id='2' kit-target</pre></pre>
                    </td>
                </tr>
                <tr>
                    <td>方式二</td>
                    <td>
                        <pre class="layui-code">
kit-target data-options="{url:'test.html',icon:'fa-user',title:'表格',id:'1'}"</pre>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="kit-doc-title">
            <fieldset>
                <legend><a name="blockquote">渲染方式</a></legend>
            </fieldset>
        </div>
        <p> 该组件提供了三种渲染方式 </p>
        <table class="layui-table">
            <colgroup>
                <col width="180">
                <col width="230">
                <col width="100">
                <col>
            </colgroup>
            <thead>
                <tr>
                    <th>渲染方式</th>
                    <th>方法</th>
                    <th>备注</th>
                    <th>详细说明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>服务端渲染后绑定</td>
                    <td>调用navbar.bind()方法</td>
                    <td>已实现</td>
                    <td>此方法需在dom元素渲染完成后执行
                        <p>Example:</p>
                        <pre class="layui-code">
//注：需在容器内添加属性 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;//跳转地址</pre>
                    </td>
                </tr>
                <tr>
                    <td>异步渲染方式(AJAX)</td>
                    <td>通过设置url参数组件内部渲染</td>
                    <td>已实现</td>
                    <td>设置remote参数，调用render方法</td>
                </tr>
                <tr>
                    <td>本地数据渲染方式</td>
                    <td>通过设置data参数组件内部渲染</td>
                    <td>已实现</td>
                    <td>设置data参数，调用render方法</td>
                </tr>
            </tbody>
        </table>
        <div class="kit-doc-title">
            <fieldset>
                <legend><a name="blockquote">可用的方法</a></legend>
            </fieldset>
        </div>
        <table class="layui-table">
            <colgroup>
                <col width="150">
                <col width="200">
                <col width="150">
                <col>
            </colgroup>
            <thead>
                <tr>
                    <th>名称</th>
                    <th>参数</th>
                    <th>返回值</th>
                    <th>描述</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>set(options)</td>
                    <td><a href="#options">options</a>/object</td>
                    <td>this/object</td>
                    <td>配置一些全局参数,返回当前navbar对象，以便于链式调用
                        <p>Example:</p>
                        <pre class="layui-code">
navbar.set({
    elem:'#navbarContainer',
    url:''
});</pre>
                    </td>
                </tr>
                <tr>
                    <td>bind(callback)</td>
                    <td>callback/function(data)</td>
                    <td>void</td>
                    <td>绑定a标签的点击事件
                        <p>Example:</p>
                        <pre class="layui-code">
navbar.bind(function(data) {
    t.tabAdd(data);//这个方法为tab组件提供的方法
});</pre></td>
                </tr>
                <tr>
                    <td>render(callback)</td>
                    <td>callback/function(data)</td>
                    <td>void</td>
                    <td>渲染navbar
                        <p>Example:</p>
                        <pre class="layui-code">
    navbar.render(function(data) {
        t.tabAdd(data);//这个方法为tab组件提供的方法
    });</pre></td>
                </tr>
            </tbody>
        </table>
        <div class="kit-doc-title">
            <fieldset>
                <legend><a name="blockquote" id="options">options参数说明</a></legend>
            </fieldset>
        </div>
        <table class="layui-table">
            <colgroup>
                <col width="150">
                <col width="150">
                <col width="150">
                <col>
            </colgroup>
            <thead>
                <tr>
                    <th>名称</th>
                    <th>类型</th>
                    <td>默认值</td>
                    <th>描述</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>elem</td>
                    <td>string</td>
                    <td>undefined</td>
                    <td>容器DOM，支持id选择器和类选择器<br/>(如果elem为undefined就必须在容器标签添加kit-navbar属性，否则会抛异常)</td>
                </tr>
                <tr>
                    <td>filter</td>
                    <td>string</td>
                    <td>kitNavbar</td>
                    <td>过滤器名称</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>object</td>
                    <td>undefined</td>
                    <td>本地数据源，有特定的数据结构，<a href="#data">点击我查看</a></td>
                </tr>
                <tr>
                    <td>remote</td>
                    <td>object</td>
                    <td> 详细看描述 url:undefined,type:'GET',jsonp:false</td>
                    <td>
                        <pre class="layui-code">
navbar.set{
    remote:{
        url: 'xx/api', //接口地址
        type: 'POSST', //请求方式
        jsonp: false //跨域
    }
}</pre>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="kit-doc-title">
            <fieldset>
                <legend><a name="blockquote" id="data">Data数据结构(注：当前只支持两级菜单)</a></legend>
            </fieldset>
        </div>
        <blockquote class="layui-elem-quote">
            <pre class="layui-code">
//图标支持<a href="http://www.layui.com/doc/element/icon.html" target="_blank">layui图标</a>和<a href="http://www.fontawesome.com.cn/faicons/" target="_blank">fontawesome字体图标</a>
[{
    "id": "1",
    "title": "基本元素",
    "icon": "fa-cubes",
    "spread": true, //如果为true则展开 (v1.0.3可用)
    "children": [{
        "id": "7",
        "title": "表格",
        "icon": "&#xe6c6;",
        "url": "test.html"
    }, {
        "id": "8",
        "title": "表单",
        "icon": "&#xe63c;",
        "url": "form.html"
    }]
}, {
    "id": "5",
    "title": "这是一级导航",
    "icon": "fa-stop-circle",
    "url": "https://www.baidu.com",
    "spread": false
}]</pre>
        </blockquote>
        <blockquote class="layui-elem-quote">这个文档就先写到这里吧，后面新增了再补充啦。</blockquote>
    </div>
    <script src="./plugins/layui/layui.js"></script>
</body>

</html>