• Coolite Toolkit学习笔记一：效果图

    前台代码实现如下：

    前台代码 
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx.cs" Inherits="Admin_Index" %>
    <%@ Register assembly="Coolite.Ext.Web" namespace="Coolite.Ext.Web" tagprefix="ext" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
            <title>创意连环管理系统</title>
            <link href="../resources/css/main.css" rel="stylesheet" type="text/css" />
            <script src="../resources/ExampleTab.js" type="text/javascript"></script>
            <link href="../App_Themes/ThemeAdmin/Style.css" rel="stylesheet" type="text/css" />
            <script type="text/javascript">
            var loadExample     = function (href, id) {
                var tab     = ExampleTabs.getComponent(id);

                    if (tab) {
                    ExampleTabs.setActiveTab(tab);
                }     else {
                    createExampleTab(id, href);
                }
            }

            function addTab(tabPanel, id, url, title) {
                var tab     = tabPanel.getComponent(id);
                    if (!tab) {
                    tab     = tabPanel.add({
                        id: id,
                        title: title,
                        closable:     true,
                        autoLoad: {
                            showMask:     true,
                            url: url,
                            mode:     'iframe',
                            maskMsg:     '正在加载模块【 ' + title + '】，请稍候'
                        }
                    });
                }
                tabPanel.setActiveTab(tab);
            }
            </script>
    </head>
    <body>
            <form id="form1" runat="server">
            <ext:ScriptManager ID="ScriptManager1" runat="server" />
            <ext:ViewPort ID="ViewPort2" runat="server">
                <Body>
                    <ext:BorderLayout ID="BorderLayout1" runat="server">
                        <North Margins-Bottom="5" >
                            <ext:Panel ID="Panel1" IDMode="Ignore" runat="server" Header="false" Border="false">
                                <Body>
                                    <div id='header'><h1>欢迎使用超级漂亮界面的后台管理系统之无敌存在</h1><br />
                                        <div class="topToolBar">
                                            <img src="../App_Themes/ThemeAdmin/Images/user.gif"alt="" />当前登录用户【 <a href="#"><asp:Label ID="labUserName" runat="server" Text="admin"></asp:Label></a> 】&nbsp;|&nbsp;
                                            <img src="../App_Themes/ThemeAdmin/Images/logout.gif" alt="换一个用户登录" /><asp:LinkButton ID="btnZhuXiao" runat="server">注销系统</asp:LinkButton>&nbsp;|&nbsp;
                                            <img src="../App_Themes/ThemeAdmin/Images/exit.png" alt="关闭系统" /><asp:LinkButton ID="LinkButton1" runat="server">退出系统</asp:LinkButton>
                                        </div>
                                    </div>
                                </Body>
                            </ext:Panel>
                        </North>
                    
                        <South Collapsible="true" Split="true">
                            <ext:Panel runat="server" Height="60" Title="关于系统" Icon="Cmy" Collapsed="true">
                                <Body>
                                    <div style="text-align:center;height:60px; padding-top:10px; font-size:12px;"> 版权归@连环创意所有&nbsp;&nbsp;
                                    开发单位：北京华软英创工作室    &nbsp;&nbsp;网址：<a href="Http://www.dzbsoft.com" target="_blank">Http://www.dzbsoft.com</a>&nbsp;&nbsp;联系手机：13911778384&nbsp;&nbsp;Email：dengzebo@163.com&nbsp;&nbsp;MSN：dengzebo@hotmail.com
                                </div>
                                </Body>
                            </ext:Panel>
                        </South>
                    
                        <West Collapsible="true" Split="true">
                            <ext:Panel ID="Panel3" runat="server" Width="240" Header="false" Border="false">
                                <Body>
                                    <ext:FitLayout ID="FitLayout1" runat="server">
                                        <ext:TreePanel 
                                        ID    ="exampleTree" 
                                        runat    ="server"
                                        Title    ="功能菜单"
                                        AutoScroll    ="true"
                                        Lines    ="false"
                                        CollapseFirst    ="false"
                                        ContainerScroll    ="true"
                                        Icon    ="TagGreen"
                                        RootVisible    ="false">
                                            <TopBar>
                                                <ext:Toolbar ID="Toolbar1" runat="server">
                                                    <Items>
                                                        <ext:ToolbarTextItem ID="ToolbarTextItem1" runat="server" Text="Theme: " />
                                                        <ext:ComboBox 
                                                        ID    ="cbTheme" 
                                                        runat    ="server" 
                                                        EmptyText    ="系统换肤" 
                                                        Width    ="100"
                                                        Editable    ="false"
                                                        TypeAhead    ="true">
                                                            <Items>
                                                                <ext:ListItem Text="默认" Value="Default" />
                                                                <ext:ListItem Text="灰色" Value="Gray" />
                                                                <ext:ListItem Text="暗蓝灰色" Value="Slate" />
                                                            </Items>
                                                            <Listeners>
                                                                <Select Handler="Coolite.AjaxMethods.GetThemeUrl(cbTheme.getValue(),{
                                                                    success: function (result) {
                                                                        Coolite.Ext.setTheme(result);
                                                                        ExampleTabs.items.each(function (el) {
                                                                                if (!Ext.isEmpty(el.iframe)) {
                                                                                el.iframe.dom.contentWindow.Coolite.Ext.setTheme(result);
                                                                            }
                                                                        });
                                                                    }
                                                                });    " />
                                                        </Listeners>
                                                        </ext:ComboBox>
                                                    
                                                        <ext:ToolbarFill ID="ToolbarFill1" runat="server" />
                                                    
                                                        <ext:ToolbarButton ID="ToolbarButton1" runat="server" IconCls="icon-expand-all">
                                                            <Listeners>
                                                                <Click Handler="#{exampleTree}.root.expand(true);" />
                                                            </Listeners>
                                                            <ToolTips>
                                                                <ext:ToolTip ID="ToolTip1" IDMode="Ignore" runat="server" Html="Expand All" />
                                                            </ToolTips>
                                                        </ext:ToolbarButton>
                                                    
                                                        <ext:ToolbarButton ID="ToolbarButton2" runat="server" IconCls="icon-collapse-all">
                                                            <Listeners>
                                                                <Click Handler="#{exampleTree}.root.collapse(true);" />
                                                            </Listeners>
                                                            <ToolTips>
                                                                <ext:ToolTip ID="ToolTip2" IDMode="Ignore" runat="server" Html="Collapse All" />
                                                            </ToolTips>
                                                        </ext:ToolbarButton>
                                                    </Items>
                                                </ext:Toolbar>
                                            </TopBar>
                                            <Root>
                                                <ext:AsyncTreeNode Cls="treeCss" NodeID="0" Text="Root" />
                                            </Root>
                                            <Loader>
                                                <ext:PageTreeLoader OnNodeLoad="GetExamplesNodes">
                                                    <EventMask ShowMask="true" Msg="Loading..." />
                                                </ext:PageTreeLoader>
                                            </Loader>
                                            <Listeners>
                                                <Click Handler="if(node.isLeaf()){e.stopEvent();addTab(ExampleTabs,node.id,node.attributes.href,node.text);}" />
                                            </Listeners> 
                                        </ext:TreePanel>
                                    </ext:FitLayout>
                                </Body>
                            </ext:Panel>
                        </West>
                    
                        <Center>
                            <ext:TabPanel ID="ExampleTabs" runat="server" ActiveTabIndex="0" EnableTabScroll="true">
                                <Tabs>
                                    <ext:Tab runat="server" ID="tabHome" Icon="BulletHome" IconCls="icon-application" Closable="false" Title="系统首页" AutoScroll="true">
                                        <Body>
                                        

                                        </Body>
                                    </ext:Tab>
                                </Tabs>
                                <Plugins>
                                    <ext:TabCloseMenu ID="TabCloseMenu1" runat="server" />
                                </Plugins>
                            </ext:TabPanel>     
                        </Center>
                    </ext:BorderLayout>
                </Body>
            </ext:ViewPort>
            </form>
    </body>
    </html>

    后台代码实现功能：

    　　1）、提供AjaxMethod方法实现系统换肤；

    　　2）、加载XML配置文件实现主页左侧功能菜单的添加；

    后台代码：

    代码 
    using System;
    using System.Collections.Generic;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Coolite.Ext.Web;

    public partial class Admin_Index : System.Web.UI.Page
    {
            protected void Page_Load(object sender, EventArgs e)
        {

        }

        [AjaxMethod]
            public string GetThemeUrl(string theme)
        {
            Theme temp     = (Theme)Enum.Parse(typeof(Theme), theme);

                this.Session["Coolite.Theme"] = temp;
            
                return (temp == Coolite.Ext.Web.Theme.Default) ? "Default" : this.ScriptManager1.GetThemeUrl(temp);
        }


            protected void GetExamplesNodes(object sender, NodeLoadEventArgs e)
        {
            Coolite.Ext.Web.TreeNodeCollection treeNodes     = new Coolite.Ext.Web.TreeNodeCollection();

            System.Xml.XmlDocument doc     = new System.Xml.XmlDocument();
                string strFileName = HttpContext.Current.Server.MapPath("XMLFile.xml");
            doc.Load(strFileName);
            System.Xml.XmlNodeList nodes     = doc.GetElementsByTagName("siteMapNode");
                for (int i = 0; i < nodes.Count; i++)
            {
                    string firstNodeText = nodes[i].Attributes["title"].Value;
                Coolite.Ext.Web.TreeNode tn     = new Coolite.Ext.Web.TreeNode(firstNodeText);
                tn.Icon     = Icon.Add;
                tn.Href     = "#";
                tn.Cls     = "treeCss";
                System.Xml.XmlNode xmlPNode     = (System.Xml.XmlNode)nodes[i];
                    foreach (System.Xml.XmlNode tnc in xmlPNode.ChildNodes)
                {
                    Coolite.Ext.Web.TreeNode tnn     = new Coolite.Ext.Web.TreeNode(tnc.Attributes["title"].Value);
                    tnn.Href     = tnc.Attributes["url"].Value;
                    tnn.HrefTarget     = "ExampleTabs";
                    tnn.Leaf     = true;
                    tnn.NodeID     = "";
                    tnn.Cls     = "treeCss";
                    tnn.Text     = tnc.Attributes["title"].Value;
                    tnn.Icon     = Icon.UserBrown;//
                    tnn.Qtip = tnc.Attributes["description"].Value;
                    tn.Nodes.Add(tnn);
                }
                treeNodes.Add(tn);
            }

            e.Nodes     = treeNodes;
        }
    }

    XML文件配置如下：

    代码 
    <?xml version="1.0" encoding="utf-8" ?>

    <DocumentElement>
      
          <siteMapNode title="用户管理" url="#">
            <siteParent title="用户管理" description="用户管理" url="../Admin/User/UserManage.aspx" />
            <siteParent title="用户添加" description="用户添加" url="../Admin/User/UserAdd.aspx" />
            <siteParent title="密码修改" description="密码修改" url="../Admin/User/PwdEdit.aspx" />
           </siteMapNode>
          <siteMapNode title="订单表管理" url="#">
            <siteParent title="订单管理" description="订单管理" url="../Admin/Order/OrderManage.aspx" />
          </siteMapNode>
          <siteMapNode title="商品表管理" url="#">
            <siteParent title="商品管理" description="商品管理" url="../Admin/Product/ProductManage.aspx" />
            <siteParent title="商品添加" description="商品添加" url="../Admin/Product/ProductAdd.aspx" />
          </siteMapNode>
           <siteMapNode title="正式作品表管理" url="#">
            <siteParent title="正式作品表管理" description="正式作品表管理" url="../Admin/Works/ZSWorksManage.aspx" />
             <siteParent title="正式作品表添加" description="正式作品表添加" url="../Admin/Works/ZSWorksAdd.aspx" />
          </siteMapNode>
           <siteMapNode title="临时作品表管理" url="#">
            <siteParent title="临时作品表管理" description="临时作品表管理" url="../Admin/Works/LSWorksManage.aspx" />
            <siteParent title="临时作品表添加" description="临时作品表添加" url="../Admin/Works/LSWorksAdd.aspx" />
          </siteMapNode>
           <siteMapNode title="DTG码表管理" url="#">
            <siteParent title="DTG码表管理" description="临时作品表管理" url="../Admin/DTG/DTGManage.aspx" />
            <siteParent title="DTG码表添加" description="DTG码表添加" url="../Admin/DTG/DTGAdd.aspx" />
          </siteMapNode>
         </DocumentElement>

     本文属学习笔记文章，愿与有志者共同学习交流。欢迎转载，但请在明显地位标记本文的原文连接。 

    作      者：郑某人

    文章出处：http://www.cnblogs.com/jsonzheng

    另附广告：女朋友的淘宝网店，为她做宣传，希望大家别介意，http://iyseek.taobao.com  欢迎大家逛逛，嘿嘿！

    如有需要帮助，请联系MSN：zheng331773812@hotmail.com（上班时在线）   QQ：331773812

    欢迎大家共同交流！
  • 相关阅读:
    二进制包安装MySQL数据库
    前端0：js，css基础
    前端2：工作涉及的问题及总结
    前端1：易混肴的前端知识，常用的方法或questions，及一点想法。
    微信小程序-上传多张图片加进度，持续修正中……
    JS 函数式编程
    敏捷开发总结
    数据绑定
    收藏
    transform，translate，transition 的区别
  • 原文地址：https://www.cnblogs.com/jsonzheng/p/1811107.html
Copyright © 2020-2023  润新知