（札记）EasyUI Layout 布局管理

桃扇骨 2022-08-06 06:15 211阅读 0赞

界面使用html的标签及css样式配合easyui编写

组件的动作使用jquery来控制

折叠面板：

<pre class="javascript" name="code">$('#cc').layout('collapse','west');

代码的实现：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
      <title>jQuery EasyUI!</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <script type="text/javascript" src="./easyui1.4.1/jquery.min.js"></script>
      <script type="text/javascript" src="./easyui1.4.1/jquery.easyui.min.js"></script>
      <link rel="stylesheet" type="text/css" href="./easyui1.4.1/themes/default/easyui.css" />
      <link rel="stylesheet" type="text/css" href="./easyui1.4.1/themes/icon.css" />
      <script src="./easyui1.4.1/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
    
      <script type="text/javascript">
        $(document).ready(function () {
          $('.easyui-accordion li a').click(function () {
            var tabTitle = $(this).text();
            var url = $(this).attr("href");//设置或者返回属性
            addTab(tabTitle, url);//添加一个tab
            $('.easyui-accordion li div').removeClass("selected");//移除一个类名
            $(this).parent().addClass("selected");//addClass添加一个类名
          }).hover(function () {
            $(this).parent().addClass("hover");
          }, function () {
            $(this).parent().removeClass("hover");
          });
    
          function addTab(subtitle, url) {
            if (!$('#cnetertabs').tabs('exists', subtitle)) {
              $('#cnetertabs').tabs('add', {
                title: subtitle,
                content: createFrame(url),
                closable: true,
                width: $('#mainPanle').width(),
                height: $('#mainPanle').height()
              });
            } else {
              $('#cnetertabs').tabs('select', subtitle);
            }
            tabClose();
          }
    
          function createFrame(url) {
            var s = '<iframe name="mainFrame" scrolling="auto" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>';
            return s;
          }
    
          function tabClose() {
            /*双击关闭TAB选项卡*/
            $(".tabs-inner").dblclick(function () {
              var subtitle = $(this).children("span").text();
              $('#cnetertabs').tabs('close', subtitle);
            })
    
            $(".tabs-inner").bind('contextmenu', function (e) {
              $('#mm').menu('show', {
                left: e.pageX,
                top: e.pageY
              });
              var subtitle = $(this).children("span").text();
              $('#mm').data("currtab", subtitle);
              return false;
            });
          }
        });
      </script>
    
    </head>
    <body class="easyui-layout">
    
    
    <div data-options="region:'north',split:false" style="height:35px; border: 0px" >
      <div class="toolbar" style="background-image:url(data/07.png); height:35px;">
        <font size="5px" color= "#0092DC">管理系统</font>
        <font size="3px" color= "#696969">(14.12.12.0)</font>
      </div>
    </div>
    
    
    <div data-options="region:'south',split:false" style="overflow: hidden; height: 20px;">
      <div class="footer" style="text-align:center;background-color:#000000; ">
        <font size="2px" color= "#0092DC" >
          Copyright © 2014 All Rights Reserved 版权 TNT 所有
        </font>
        <a href="#">注销</a>
      </div>
    </div>
    
    
    <div data-options="region:'center'",style="background:#eee;">
      <div id="tabs1" class="easyui-tabs" fit="true" border="false">
        <div title="模块单元" style="overflow: hidden; " id="home">
          <div class="easyui-layout" data-options="fit:true">
    
            <div data-options="region:'west',title:'导航栏',split:true" style="width:220px;">
              <div id="aa" class="easyui-accordion" style="position: absolute; top: 27px; left: 0px; right: 0px; bottom: 0px;">
    
                <div title="搜索引擎" selected="true" style="overflow: auto; padding: 10px;">
                  <ul class="easyui-tree">
                    <li>
                      <span>国内搜索</span>
                      <ul>
                        <li>
                          <span><a target="mainFrame" href="http://www.baidu.com">百度</a></span>
                        </li>
                        <li>
                          <span><a target="mainFrame" href="http://www.sogou.com/">搜狗</a></span>
                        </li>
                        <li>
                          <span><a target="mainFrame" href="http://www.so.com/">360</a></span>
                        </li>
                        <li>
                          <span><a target="mainFrame" href="http://localhost:8080/mew/testCm.action?resultPage=crud">crud</a></span>
                        </li>
                        <li>
                          <span><a target="mainFrame" href="http://localhost:8080/mew/testCm.action?resultPage=crudNew">crudNew</a></span>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <span>国外搜索</span>
                      <ul class="easyui-tree">
                        <li>
                          <span><a target="mainFrame" href="http://cn.bing.com">Bing</a></span>
                        </li>
                        <li>
                          <span><a target="mainFrame" href="http://www.google.com.hk/">谷歌</a></span>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </div>
                <div title="各大门户网站" style="padding: 10px;">
                  待定
                </div>
                <div title="技术论坛">
                  待定
                </div>
              </div>
            </div>
    
    
            <div data-options="region:'center'",style="background:#eee;">
              <div id="cnetertabs" class="easyui-tabs" tabPosition="top" fit="true" border="false">
                <div title="欢迎使用" style="overflow: hidden;" id="centerhome">
                  111111111111111
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    </body>
    </html>

图:

![SouthEast][]

[SouthEast]: /images/20220806/6a2bfebd59d143518dcc163a48ca3b04.png