普元EOS开发总结——导航控件

1.ToolBar：工具栏

1.1 普通工具栏

<h3>创建工具栏</h3>
 <div class="nui-toolbar">
    <a class="nui-button" iconCls="icon-add">增加</a>
    <a class="nui-button" iconCls="icon-edit">修改</a>
    <a class="nui-button" iconCls="icon-remove">删除</a>
    <span class="separator"></span>
    <a class="nui-button" plain="true">增加</a>
    <a class="nui-button" plain="true">修改</a>
    <a class="nui-button" plain="true">删除</a>
    <span class="separator"></span>
    <input class="nui-textbox" />
    <a class="nui-button" plain="true">查询</a>
</div>

注意：这里的 “plain = true” 代表去除边框

1.2 复杂工具栏

 <h3>复杂工具栏</h3>
 <div id="toolbar1" class="nui-toolbar" style="padding:2px;">
    <table style="width:100%;">
        <tr>
        <td style="width:100%;">
            <a class="nui-menubutton" plain="true" menu="#popupMenu">文件</a>
            <a class="nui-button" iconCls="icon-addfolder" plain="true" enabled="false">增加</a>
            <a class="nui-button" iconCls="icon-edit" plain="true">修改</a>
            <a class="nui-button" iconCls="icon-remove" plain="true">删除</a>
            <span class="separator"></span>
            <a class="nui-button" iconCls="icon-reload" plain="true">刷新</a>
            <a class="nui-button" iconCls="icon-download" plain="true">下载</a>
        </td>
        <td style="white-space:nowrap;"><label style="font-family:Verdana;">Filter by: </label>
            <input class="nui-textbox" />
            </td>
        </tr>
    </table>
</div>

2. 菜单

 <h3>创建菜单</h3>
  <ul id="menu1" class="nui-menubar" style="width:100%;" showTreeIcon="true"
    url="../data/listMenu.txt" dataField="menulist" idField="id" parentField="pid" textField="text">
 </ul>

url数据格式：
{menulist:
[
{ id: “1”, text: “文件(F)”},

{ id: "2", text: "新建", iconCls: "icon-new", pid: "1"},
{ id: "3", text: "文件", pid: "2"},
{ id: "4", text: "文件夹", pid: "2"},
{ id: "5", text: "打开", iconCls: "icon-folderopen", pid: "1"},
{ id: "6", text: "保存", pid: "1"},
{ id: "7", text: "关闭", pid: "1"},

{ id: "8", text: "编辑(E)"},
{ id: "9", text: "剪切", iconCls: "icon-cut", pid: "8"},
{ id: "10", text: "复制", pid: "8"},
{ id: "11", text: "粘贴", pid: "8"},

{ id: "12", text: "查看(V)"},
{ id: "13", text: "帮助(H)", iconCls: "icon-help"}

]
}

3.菜单：HTML标签

 <h3>菜单:HTML标签</h3>
  <ul id="menu2" class="nui-menubar" style="width:100%;">
    <li>
        <span >文件(F)</span>
        <ul>
            <li onclick="onItemClick">
                <span >新建</span>
                <ul>
                    <li iconCls="icon-new" onclick="onItemClick">文件</li>
                    <li onclick="onItemClick">项目</li>
                    <li onclick="onItemClick">网站</li>
                </ul>
            </li>
            <li class="separator"></li>
            <li iconCls="icon-cut" onclick="onItemClick">Cut</li>
            <li iconCls="icon-add" onclick="onItemClick">Add</li>
            <li iconCls="icon-remove" onclick="onItemClick">Close</li>
        </ul>
    </li>
    <li class="separator"></li>
    <li >编辑(E)</li>
    <li  onclick="onItemClick">查看(V)</li>
    <li iconCls="icon-help" onclick="onItemClick">帮助(H)</li>
</ul>

4.Tabs：选项卡

<h3>Tabs：选项卡</h3>
 <div id="tabs1" class="nui-tabs" activeIndex="0" style="width:350px;height:200px;">
    <div title="Tab1">
        1
    </div>
    <div title="Tab2" iconCls="icon-cut" >
        2
    </div>
    <div title="Tab3" showCloseButton="true">
        3
    </div>
    <div title="Tab4" showCloseButton="true" enabled="false">
        4
    </div>
</div>

5.Tabs:懒加载

<h3>Tabs：懒加载</h3>
  <ul id="tree1" class="nui-tabs" url="../data/page.txt" style="width:300px;padding:5px;"
     textField="url" dataField="trees" idField="title" >
  </ul>

通过url返回的数据结构如下：
{trees:
[
{title: “Tab1”, url: “…/eos/page1.html”, refreshOnClick: true},
{title: “Tab2”, url: “…/eos/page2.html”, showCloseButton: true,refreshOnClick: true},
{title: “Tab3”, url: “…/eos/page3.html”,refreshOnClick: true}

]
}

这里通过refreshOnClick: true 这个属性来实现懒加载，首先不加载页面或者图片，先加载一个loading的图样标识，如果用户点击请求才加载真正的url地址。这样就降低了流量。

6.OutlookBar：折叠面板组

 <h3>OutlookBar：折叠面板组</h3>
  <div id="outlookbar1" class="nui-outlookbar " activeIndex="0" style="width:180px;height:250px;" autoCollapse="true">
    <div title="权限管理">
        1
    </div>
    <div title="用户管理">
        2
    </div>
</div>

这个折叠板组件可以实现面板的折叠，把当前的面板的所有下方面板自动拉到最下面。

7.Pager：分页控件

<div class="nui-pager" style="width:600px;background:#ccc;"
    totalCount="123" onpagechanged="onPageChanged" sizeList="[5,10,20,100]"
    showTotalCount="true"
    >
</div>
<script type="text/javascript">
    function onPageChanged(e) {
        alert(e.pageIndex+":"+e.pageSize);
    }
</script>