grid

參考示例：Pager：分頁控件

創建代碼   

<div class="mini-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>

參考示例：OutlookTree：折疊樹

創建OutlookTree     

<div id="leftTree" class="mini-outlooktree" url="../data/outlooktree.txt" onnodeselect="onNodeSelect"
    textField="text" idField="id" parentField="pid">
</div>
          

數據格式

[
    {id: "user", text: "用戶管理"},
        
    {id: "lists", text: "Lists", pid: "user" },
            
    {id: "datagrid", text: "DataGrid", pid: "lists"},            
    {id: "tree", text: "Tree" , pid: "lists"},
    {id: "treegrid", text: "TreeGrid " , pid: "lists"},
        
    {id: "layouts", text: "Layouts", expanded: false, pid: "user"},
        
    {id: "panel", text: "Panel", pid: "layouts"},
    {id: "splitter", text: "Splitter", pid: "layouts"},
    {id: "layout", text: "Layout ", pid: "layouts"},
        
    { id: "right", text: "權限管理"},
        
    {id: "base", text: "Base", expanded: false, pid: "right" },
                
    {id: "ajax", text: "Ajax", pid: "base"},
    {id: "json", text: "JSON", pid: "base"},
    {id: "date", text: "Date", pid: "base"},
        
    {id: "forms", text: "Forms", expanded: false, pid: "right"},
                
    {id: "button", text: "Button", pid: "forms"},
    {id: "listbox", text: "ListBox", pid: "forms"},
    {id: "checkboxlist", text: "CheckBoxList", pid: "forms"},
    {id: "radiolist", text: "RadioList", pid: "forms"},
    {id: "calendar", text: "Calendar", pid: "forms"}                
]

參考示例：OutlookMenu：折疊菜單

創建OutlookMenu        

<div class="mini-outlookmenu" url="../data/outlookmenu.txt" onitemselect="onItemSelect"
    idField="id" parentField="pid" textField="text">
</div>

            

數據結構

[
    { id: "user", text: "用戶管理"},
    { id: "addUser", pid: "user", text: "增加用戶", iconCls: "icon-add", url: "../navbartree/navbartree.html" },
    { id: "editUser", pid: "user", text: "修改用戶", iconCls: "icon-edit", url: "../buttonedit/openwindow.html" },
    { id: "removeUser", pid: "user", text: "刪除用戶", iconCls: "icon-remove", url: "../datagrid/datagrid.html" },
        
    { id: "right", text: "權限管理"},
    { id: "addRight", pid: "right", text: "查詢權限", iconCls: "Note", url: "../navbartree/navbartree.html", iconPosition: "top" },
    { id: "editRight", pid: "right", text: "操作權限", iconCls: "Reports", url: "../buttonedit/openwindow.html", iconPosition: "top" }        
]

參考示例：OutlookBar：折疊面板組

創建OutlookBar   

<div id="outlookbar1" class="mini-outlookbar " activeIndex="0" style="width:180px;height:250px;" autoCollapse="true">
    <div title="權限管理">            
        1
    </div>
    <div title="用戶管理">
        2
    </div>
</div>

參考示例：Tabs：懶加載頁面

創建Tabs

<ul id="tree1" class="mini-tree" url="../data/tree.txt" style="width:300px;padding:5px;" 
    showTreeIcon="true" textField="text" idField="id" >        
</ul>

                    

數據結構      

通過url返回的數據結構如下：

[
    {title: "Tab1", url: "../tabs/pages/page1.html", refreshOnClick: true},
    {title: "Tab2", url: "../tabs/pages/page2.html", showCloseButton: true},
    {title: "Tab3", url: "../tabs/pages/page3.html"},
    {title: "Tab4", url: "../tabs/pages/page4.html"},
    {title: "Tab5", url: "../tabs/pages/page5.html"}
]

參考示例：ContextMenu：右鍵菜單

創建ContextMenu

<ul id="contextMenu" class="mini-contextmenu" >
    <li>
        <span >操作</span>
        <ul>
            <li iconCls="icon-new" onclick="onItemClick">新建</li>
            <li class="separator"></li>
            <li iconCls="icon-add" onclick="onItemClick">增加</li>    
            <li iconCls="icon-edit" onclick="onItemClick">修改</li>
            <li iconCls="icon-remove" onclick="onItemClick">刪除</li>                      
        </ul>
    </li>
    <li class="separator"></li>
    <li iconCls="icon-open" >打開</li>
    <li iconCls="icon-remove" >關閉</li>
</ul>

Javascript處理

function onItemClick(e) {
    var item = e.sender;
    alert(item.getText());     
}

window.onload = function () {
    $("#region1").bind("contextmenu", function (e) {
        var menu = mini.get("contextMenu");
        menu.showAtPos(e.pageX, e.pageY);
        return false;
    });
}

創建菜單       

<ul id="menu2" class="mini-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>