1. 程式人生 > >EasyUI Demo(主頁面)

EasyUI Demo(主頁面)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="copyright" content="All Rights Reserved, Copyright (C) 2013, Wuyeguo, Ltd." />
<title>EasyUI Web Admin Power by Wuyeguo</title>
<link rel="stylesheet" type="text/css" href="easyui/1.3.4/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="css/wu.css" />
<link rel="stylesheet" type="text/css" href="css/icon.css" />
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="easyui/1.3.4/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/1.3.4/locale/easyui-lang-zh_CN.js"></script>
</head>
<body class="easyui-layout">
    <!-- begin of header -->
    <div class="wu-header" data-options="region:'north',border:false,split:true">
        <div class="wu-header-left">
            <h1>EasyUI Web Admin</h1>
        </div>
        <div class="wu-header-right">
            <p><strong class="easyui-tooltip" title="2條未讀訊息">admin</strong>,歡迎您!</p>
            <p><a href="#">網站首頁</a>|<a href="#">支援論壇</a>|<a href="#">幫助中心</a>|<a href="#">安全退出</a></p>
        </div>
    </div>
    <!-- end of header -->
    <!-- begin of sidebar -->
    <div class="wu-sidebar" data-options="region:'west',split:true,border:true,title:'導航選單'"> 
        <div class="easyui-accordion" data-options="border:false,fit:true"> 
            <div title="快捷選單" data-options="iconCls:'icon-application-cascade'" style="padding:5px;">      
                <ul class="easyui-tree wu-side-tree">
                    <li iconCls="icon-chart-organisation"><a href="javascript:void(0)" data-icon="icon-chart-organisation" data-link="temp/layout-2.html" iframe="0">選單導航</a></li>
                    <li iconCls="icon-users"><a href="javascript:void(0)" data-icon="icon-users" data-link="temp/layout-3.html" iframe="0">使用者管理</a></li>
                    <li iconCls="icon-user-group"><a href="javascript:void(0)" data-icon="icon-user-group" data-link="temp/layout-3.html" iframe="0">角色管理</a></li>
                    <li iconCls="icon-book"><a href="javascript:void(0)" data-icon="icon-book" data-link="temp/layout-3.html" iframe="0">資料字典</a></li>
                    <li iconCls="icon-cog"><a href="javascript:void(0)" data-icon="icon-cog" data-link="temp/layout-3.html" iframe="0">系統引數</a></li>
                    <li iconCls="icon-application-osx-error"><a href="javascript:void(0)" data-icon="icon-application-osx-error" data-link="temp/layout-3.html" iframe="0">操作日誌</a></li>
                </ul>
            </div>
            <div title="內容管理" data-options="iconCls:'icon-application-form-edit'" style="padding:5px;">      
                <ul class="easyui-tree wu-side-tree">
                    <li iconCls="icon-chart-organisation"><a href="javascript:void(0)" data-icon="icon-chart-organisation" data-link="layout-3.html" iframe="0">導航標題</a></li>
                    <li iconCls="icon-users"><a href="javascript:void(0)" data-icon="icon-users" data-link="temp/layout-3.html" iframe="0">導航標題</a></li>
                    <li iconCls="icon-user-group"><a href="javascript:void(0)" data-icon="icon-user-group" data-link="temp/layout-3.html" iframe="0">導航標題</a></li>
                    <li iconCls="icon-book"><a href="javascript:void(0)" data-icon="icon-book" data-link="temp/layout-3.html" iframe="0">導航標題</a></li>
                    <li iconCls="icon-cog"><a href="javascript:void(0)" data-icon="icon-cog" data-link="temp/layout-3.html" iframe="0">導航標題</a></li>
                    <li iconCls="icon-application-osx-error"><a href="javascript:void(0)" data-icon="icon-application-osx-error" data-link="temp/layout-3.html" iframe="0">導航標題</a></li>
                </ul>
            </div>
            <div title="商品管理" data-options="iconCls:'icon-creditcards'" style="padding:5px;">      
                <ul class="easyui-tree wu-side-tree">
                    <li iconCls="icon-chart-organisation"><a href="javascript:void(0)" data-icon="icon-chart-organisation" data-link="layout-3.html" iframe="0">導航標題</a></li>
                    <li iconCls="icon-users"><a href="javascript:void(0)" data-icon="icon-users" data-link="temp/layout-3.html" iframe="0">導航標題</a></li>
                    <li iconCls="icon-user-group"><a href="javascript:void(0)" data-icon="icon-user-group" data-link="temp/layout-3.html" iframe="0">導航標題</a></li>
                    <li iconCls="icon-book"><a href="javascript:void(0)" data-icon="icon-book" data-link="temp/layout-3.html" iframe="0">導航標題</a></li>
                    <li iconCls="icon-cog"><a href="javascript:void(0)" data-icon="icon-cog" data-link="temp/layout-3.html" iframe="0">導航標題</a></li>
                    <li iconCls="icon-application-osx-error"><a href="javascript:void(0)" data-icon="icon-application-osx-error" data-link="temp/layout-3.html" iframe="0">導航標題</a></li>
                </ul>
            </div>
            <div title="訂單管理" data-options="iconCls:'icon-cart'" style="padding:5px;">      
                <ul class="easyui-tree wu-side-tree">
                    <li iconCls="icon-chart-organisation"><a href="javascript:void(0)" data-icon="icon-chart-organisation" data-link="layout-3.html" iframe="0">導航標題</a></li>
                    <li iconCls="icon-users"><a href="javascript:void(0)" data-icon="icon-users" data-link="temp/layout-3.html" iframe="0">導航標題</a></li>
                    <li iconCls="icon-user-group"><a href="javascript:void(0)" data-icon="icon-user-group" data-link="temp/layout-3.html" iframe="0">導航標題</a></li>
                    <li iconCls="icon-book"><a href="javascript:void(0)" data-icon="icon-book" data-link="temp/layout-3.html" iframe="0">導航標題</a></li>
                    <li iconCls="icon-cog"><a href="javascript:void(0)" data-icon="icon-cog" data-link="temp/layout-3.html" iframe="0">導航標題</a></li>
                    <li iconCls="icon-application-osx-error"><a href="javascript:void(0)" data-icon="icon-application-osx-error" data-link="temp/layout-3.html" iframe="0">導航標題</a></li>
                </ul>
            </div>
            <div title="廣告管理" data-options="iconCls:'icon-bricks'" style="padding:5px;">      
                <ul class="easyui-tree wu-side-tree">
                    <li iconCls="icon-chart-organisation"><a href="javascript:void(0)" data-icon="icon-chart-organisation" data-link="layout-3.html" iframe="0">導航標題</a></li>
                    <li iconCls="icon-users"><a href="javascript:void(0)" data-icon="icon-users" data-link="temp/layout-3.html" iframe="0">導航標題</a></li>
                    <li iconCls="icon-user-group"><a href="javascript:void(0)" data-icon="icon-user-group" data-link="temp/layout-3.html" iframe="0">導航標題</a></li>
                    <li iconCls="icon-book"><a href="javascript:void(0)" data-icon="icon-book" data-link="temp/layout-3.html" iframe="0">導航標題</a></li>
                    <li iconCls="icon-cog"><a href="javascript:void(0)" data-icon="icon-cog" data-link="temp/layout-3.html" iframe="0">導航標題</a></li>
                    <li iconCls="icon-application-osx-error"><a href="javascript:void(0)" data-icon="icon-application-osx-error" data-link="temp/layout-3.html" iframe="0">導航標題</a></li>
                </ul>
            </div>
            <div title="報表中心" data-options="iconCls:'icon-chart-curve'" style="padding:5px;">      
                <ul class="easyui-tree wu-side-tree">
                    <li iconCls="icon-chart-organisation"><a href="javascript:void(0)" data-icon="icon-chart-organisation" data-link="layout-3.html" iframe="0">導航標題</a></li>
                    <li iconCls="icon-users"><a href="javascript:void(0)" data-icon="icon-users" data-link="temp/layout-3.html" iframe="0">導航標題</a></li>
                    <li iconCls="icon-user-group"><a href="javascript:void(0)" data-icon="icon-user-group" data-link="temp/layout-3.html" iframe="0">導航標題</a></li>
                    <li iconCls="icon-book"><a href="javascript:void(0)" data-icon="icon-book" data-link="temp/layout-3.html" iframe="0">導航標題</a></li>
                    <li iconCls="icon-cog"><a href="javascript:void(0)" data-icon="icon-cog" data-link="temp/layout-3.html" iframe="0">導航標題</a></li>
                    <li iconCls="icon-application-osx-error"><a href="javascript:void(0)" data-icon="icon-application-osx-error" data-link="temp/layout-3.html" iframe="0">導航標題</a></li>
                </ul>
            </div>
            <div title="系統設定" data-options="iconCls:'icon-wrench'" style="padding:5px;">      
                <ul class="easyui-tree wu-side-tree">
                    <li iconCls="icon-chart-organisation"><a href="javascript:void(0)" data-icon="icon-chart-organisation" data-link="layout-3.html" iframe="0">導航標題</a></li>
                    <li iconCls="icon-users"><a href="javascript:void(0)" data-icon="icon-users" data-link="temp/layout-3.html" iframe="0">導航標題</a></li>
                    <li iconCls="icon-user-group"><a href="javascript:void(0)" data-icon="icon-user-group" data-link="temp/layout-3.html" iframe="0">導航標題</a></li>
                    <li iconCls="icon-book"><a href="javascript:void(0)" data-icon="icon-book" data-link="temp/layout-3.html" iframe="0">導航標題</a></li>
                    <li iconCls="icon-cog"><a href="javascript:void(0)" data-icon="icon-cog" data-link="temp/layout-3.html" iframe="0">導航標題</a></li>
                    <li iconCls="icon-application-osx-error"><a href="javascript:void(0)" data-icon="icon-application-osx-error" data-link="temp/layout-3.html" iframe="0">導航標題</a></li>
                </ul>
            </div>
        </div>
    </div>    
    <!-- end of sidebar -->    
    <!-- begin of main -->
    <div class="wu-main" data-options="region:'center'">
        <div id="wu-tabs" class="easyui-tabs" data-options="border:false,fit:true">  
            <div title="首頁" data-options="href:'temp/layout-1.html',closable:false,iconCls:'icon-tip',cls:'pd3'"></div>
        </div>
    </div>
    <!-- end of main --> 
    <!-- begin of footer -->
    <div class="wu-footer" data-options="region:'south',border:true,split:true">
        &copy; 2013 Wu All Rights Reserved
    </div>
    <!-- end of footer -->  
    <script type="text/javascript">
        $(function(){
            $('.wu-side-tree a').bind("click",function(){
                var title = $(this).text();
                var url = $(this).attr('data-link');
                var iconCls = $(this).attr('data-icon');
                var iframe = $(this).attr('iframe')==1?true:false;
                addTab(title,url,iconCls,iframe);
            });    
        })
        
        /**
        * Name 載入樹形選單 
        */
        $('#wu-side-tree').tree({
            url:'temp/menu.php',
            cache:false,
            onClick:function(node){
                var url = node.attributes['url'];
                if(url==null || url == ""){
                    return false;
                }
                else{
                    addTab(node.text, url, '', node.attributes['iframe']);
                }
            }
        });
        
        /**
        * Name 選項卡初始化
        */
        $('#wu-tabs').tabs({
            tools:[{
                iconCls:'icon-reload',
                border:false,
                handler:function(){
                    $('#wu-datagrid').datagrid('reload');
                }
            }]
        });
            
        /**
        * Name 新增選單選項
        * Param title 名稱
        * Param href 連結
        * Param iconCls 圖示樣式
        * Param iframe 連結跳轉方式(true為iframe,false為href)
        */    
        function addTab(title, href, iconCls, iframe){
            var tabPanel = $('#wu-tabs');
            if(!tabPanel.tabs('exists',title)){
                var content = '<iframe scrolling="auto" frameborder="0"  src="'+ href +'" style="width:100%;height:100%;"></iframe>';
                if(iframe){
                    tabPanel.tabs('add',{
                        title:title,
                        content:content,
                        iconCls:iconCls,
                        fit:true,
                        cls:'pd3',
                        closable:true
                    });
                }
                else{
                    tabPanel.tabs('add',{
                        title:title,
                        href:href,
                        iconCls:iconCls,
                        fit:true,
                        cls:'pd3',
                        closable:true
                    });
                }
            }
            else
            {
                tabPanel.tabs('select',title);
            }
        }
        /**
        * Name 移除選單選項
        */
        function removeTab(){
            var tabPanel = $('#wu-tabs');
            var tab = tabPanel.tabs('getSelected');
            if (tab){
                var index = tabPanel.tabs('getTabIndex', tab);
                tabPanel.tabs('close', index);
            }
        }
    </script>
</body>
</html>