一个基于 EasyUI 的前台架构（4）主体页面框架收工

忘是亡心i 2023-08-17 16:38 113阅读 0赞

在上一篇博客已经完成一个大概的框架效果，还有一个最为重要的功能还没有完善——菜单。

我现在使用的这个项目使用的是 jQuery EasyUI 中的 Tree 来 Building 的一个树形菜单，其实需求非常简单：将功能节点折叠，使用鼠标单击随意展开相应的节点，单击叶节点执行相应的操作（打开相应的页面）。但是 EasyUI 中的 Tree 似乎有点功能强大：修改节点名称，拖移菜单等等。在使用的时候整体遇到几个小问题：展开或闭合父节点的时候，需要单击节点前面的项目符号（小三角）才能完成；而且项目中使用的 1.2 版本还必须运行在 IE 兼容模式下（经测试，新版本的 EasyUI 不存在这个问题）。因此，我自己抽空写了一个基于 jQuery 的简单树形菜单 SimpleTree（请参见[http://www.cnblogs.com/zhhh/archive/2011/11/25/2263781.html][http_www.cnblogs.com_zhhh_archive_2011_11_25_2263781.html]）。

SimpleTree 本着简单实用的特点，实现了一个具有最基本功能的 Tree ：它可以以树形展示菜单，并在单击菜单节点的时候执行用户设置的回调方法，并将该节点下的 <a> 标签对象做为参数传送给该回调方法。修改其附带的 CSS 文件，还可以对其样式进行自定义。

这里打开 untitled.html 页面，引用 SimpleTree 以及其相关的样式文件，编写代码完成主体页面整体框架的实现。代码如下：

![复制代码][copycode.gif]

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="js/themes/icon.css"/>
    <link rel="stylesheet" type="text/css" href="js/tree_themes/SimpleTree.css"/>
    <script type="text/javascript" src="js/jquery-1.6.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/tabs.js"></script>
    <script type="text/javascript" src="js/SimpleTree.js"></script>
    
    <script type="text/javascript">
    $(function(){
        $(".st_tree").SimpleTree({
            click:function(a){
                  if(!$(a).attr("hasChild")) 
                  {
                      var title=$(a).text();
                      var url=$(a).attr("rel");
                      var icon=$(a).attr("icon");
                      OpenTab(title,url,icon);
                  }
            }
        });
    });
    </script>
    <style></style>
    </head>
    
    <body class="easyui-layout" >
    <div region="north" style="height:80px;">
        
        <h1>***管理系统</h1>
    </div>
    
    <div region="west" split="true" style="width:220px;" title="导航菜单">
    <div class="st_tree">
        <ul>
            <li>搜索引擎</li>
            <ul>
                <li><a href="#" rel="http://www.baidu.com">百度搜索</a></li>
                <li><a href="#" rel="http://www.google.com">Google搜索</a></li>
            </ul>
            <li>博客</li>
            <ul>
                <li><a href="#" rel="http://www.cnblogs.com">cnblogs</a></li>
                <li><a href="#" rel="http://blog.csdn.net">CSDN</a></li>
            </ul>
        </ul>
    </div>
    </div>
    
    <div region="center">
        <div id="tabs" class="easyui-tabs" fit="true" border="false">
            
            <div title="欢迎使用">
                <h1 style="font-size: 24px;">asdfasd</h1>
                <h1 style="font-size: 24px;"></h1>
            </div>
            
        </div>
    </div>
    
    </body>
    </html>

![复制代码][copycode.gif]

OK，执行一下，瞅瞅效果：

展开菜单节点，单击“百度搜索”和“cnblogs”节点，打开两个新的标签，如图：

![2011122214371584.jpg][]

[http_www.cnblogs.com_zhhh_archive_2011_11_25_2263781.html]: http://www.cnblogs.com/zhhh/archive/2011/11/25/2263781.html
[copycode.gif]: /images/20230810/883ba3faf6ca43a59308495915ae3359.png
[2011122214371584.jpg]: /images/20230810/55a08cf0276640659a27672f1d72d02a.png