（札记）EasyUI Layout 布局管理

来源：互联网发布：校园二手街源码编辑：程序博客网时间：2024/04/29 22:47

界面使用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>

图:

0 0