JqueryUI简单布局

现在的位置: 首页 > 综合 > 正文

JqueryUI简单布局

2017年12月03日 ⁄ 综合 ⁄ 共 7702字 ⁄ 字号小中大 ⁄ 评论关闭

初次使用Jquery EasyUi，简单的做了个布局页面感觉还不错，给大家分享一下，就是不知道Jquery EasyUi浏览器兼容性怎么样。

使用Jquery EasyUi开发之前首先要引用Jquery EasyUi的Js和Css文件，引用如下：

<script src="../jquery.min.js"type="text/javascript"></script>
 
<script src="../jquery.easyui.min.js"type="text/javascript"></script>
 
<link href="../themes/default/easyui.css"rel="stylesheet"type="text/css"

/>
 
<link href="../themes/icon.css"rel="stylesheet"type="text/css"

/>

一、使用布局面板进行整体布局，直接贴代码：

<!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>
    <title>LayOut</title>
    <script src="../jquery.min.js"type="text/javascript"></script>
    <script src="../jquery.easyui.min.js"type="text/javascript"></script>
    <link href="../themes/default/easyui.css"rel="stylesheet"type="text/css"

/>
    <link href="../themes/icon.css"rel="stylesheet"type="text/css"

/>
    <script language="JavaScript">
        $(document).ready(function () {
 
        });
    </script>
    <style>
        .footer {
            width:100%;
            text-align: center;
            line-height: 35px;
        }
 
        .top-bg {
            background-color: #d8e4fe;
            height: 80px;
        }
 
    </style>
</head>
 
<body class="easyui-layout">
    <div region="north"border="true"

split="true" 

style="overflow: hidden; height: 80px;">
        <divclass="top-bg"></div>
    </div>
    <div region="south"border="true"

split="true" 

style="overflow: hidden; height: 40px;">
        <divclass="footer">版权所有：<a

 href="">XXXXX</a></div>
    </div>
    <div region="west"split="true"

title="导航菜单" 

style="width: 200px;">
    </div>
    <div id="mainPanle"region="center"

style="overflow: hidden;">
    </div>
</body>
</html>
 
二、添加左侧菜单
左侧菜单使用的是jquery easyui的可伸缩面板控件和树形控件的结合，直接将可伸缩面板控件和树形控件放到west域中即可，并且编写点击事件，代码如下：
页面代码：

<div region="west"split="true"

title="导航菜单" 

style="width: 200px;">
 
        <div id="aa"class="easyui-accordion"style="position:

 absolute; top: 27px; left: 0px; right: 0px; bottom: 0px;">
 
            <div title="博文管理"iconcls="icon-save"style="overflow:

 auto; padding: 10px;">
                <ulclass="easyui-tree">
                    <li>
                        <span>Folder</span>
                        <ul>
                            <li>
                                <span>Sub Folder1</span>
                               <ul>
                                    <li>
                                        <span><a target="mainFrame"href="">审核博客</a></span>
                                   </li>
                                    <li>
                                        <span><a href="#">File12</a></span>
                                    </li>
                                    <li>
                                        <span>File13</span>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <span>File2</span>
                            </li>
                            <li>
                                <span>File3</span>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <span><a href="#">File21</a></span>
                    </li>
                </ul>
            </div>
            <div title="新闻管理"iconcls="icon-reload"selected="true"

style="padding: 10px;">
                content2
            </div>
            <div title="资源管理">
                content3
            </div>
        </div>
    </div>

Js点击事件代码：

<script language="JavaScript">
 
       $(document).ready(function () {
           $('.easyui-accordion li a').click(function () {
               var tabTitle = $(this).text();
               var url = $(this).attr("href");
               addTab(tabTitle, url);
               $('.easyui-accordion li div').removeClass("selected");
               $(this).parent().addClass("selected");
           }).hover(function () {
               $(this).parent().addClass("hover");
           }, function () {
               $(this).parent().removeClass("hover");
           });
 
           function addTab(subtitle, url) {
               if(!$('#tabs').tabs('exists',

 subtitle)) {
                   $('#tabs').tabs('add',

 {
                       title: subtitle,
                       content: createFrame(url),
                       closable:true,
                       width: $('#mainPanle').width() -10,
                       height: $('#mainPanle').height() -26
                   });
               }else

{
                   $('#tabs').tabs('select',

 subtitle);
              }
               tabClose();
           }
 
 
           function createFrame(url) {
               var s ='<iframe name="mainFrame" scrolling="auto" frameborder="0"  src="'+ url

 + '" style="width:100%;height:100%;"></iframe>';
               returns;
           }
 
 
           function tabClose() {
               /*双击关闭TAB选项卡*/
               $(".tabs-inner").dblclick(function () {
                   var subtitle = $(this).children("span").text();
                   $('#tabs').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);
                   returnfalse;
               });
           }
 
           //绑定右键菜单事件
      function tabCloseEven() {
               //关闭当前
        $('#mm-tabclose').click(function () {
                   var currtab_title = $('#mm').data("currtab");
                   $('#tabs').tabs('close',

 currtab_title);
               })
               //全部关闭
        $('#mm-tabcloseall').click(function () {
                   $('.tabs-inner span').each(function (i, n) {
                       var t = $(n).text();
                      $('#tabs').tabs('close',

 t);
                   });
               });
 
               //关闭除当前之外的TAB
               $('#mm-tabcloseother').click(function () {
                   var currtab_title = $('#mm').data("currtab");
                   $('.tabs-inner span').each(function (i, n) {
                       var t = $(n).text();
                       if(t != currtab_title)
                           $('#tabs').tabs('close',

 t);
                   });
               });
               //关闭当前右侧的TAB
               $('#mm-tabcloseright').click(function () {
                   var nextall = $('.tabs-selected').nextAll();
                   if(nextall.length ==

0) {
                      //msgShow('系统提示','后边没有啦~~','error');
                       alert('后边没有啦~~');
                       returnfalse;
                   }
                   nextall.each(function (i, n) {
                       var t = $('a:eq(0) span', $(n)).text();
                       $('#tabs').tabs('close',

 t);
                   });
                   returnfalse;
              });
               //关闭当前左侧的TAB
               $('#mm-tabcloseleft').click(function () {
                   var prevall = $('.tabs-selected').prevAll();
                   if(prevall.length ==

0) {
                       alert('到头了，前边没有啦~~');
                       returnfalse;
                   }
                   prevall.each(function (i, n) {
                       var t = $('a:eq(0) span', $(n)).text();
                       $('#tabs').tabs('close',

 t);
                   });
                   returnfalse;
               });
 
               //退出
               $("#mm-exit").click(function () {
                   $('#mm').menu('hide');
 
               })
           }
       });