（札记）EasyUI Layout 布局管理

最新推荐文章于 2021-07-30 13:33:02 发布

_叔

最新推荐文章于 2021-07-30 13:33:02 发布

阅读量3.6k

点赞数

分类专栏： jQuery & EasyUI 文章标签： easyui layout

本文链接：https://blog.csdn.net/wzs298/article/details/42236365

版权

jQuery & EasyUI 专栏收录该内容

7 篇文章 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>

图: