转自：http://www.kwstu.com/ArticleView/kwstu_20139413501290

送给大家一个非常好的后台布局模板，本人后来就选择了这个模板http://www.kwstu.com/ArticleView/kwstu_2014413112321738

私人做程序开发一直有个头疼的问题就是后台管理界面，以前一般都是自己用jquery+ps自己设计的，效果很一般，很不理想。

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

最后效果图如下：

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

1
2
3
4
5
6
7
<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" />

OK，下面就开始我们的布局。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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 {
            
            height: 80px;
        }
 
    </style>
</head>
 
<body class="easyui-layout">
    <div region="north" border="true" split="true" style="overflow: hidden; height: 80px;">
        <div class="top-bg"></div>
    </div>
    <div region="south" border="true" split="true" style="overflow: hidden; height: 40px;">
        <div class="footer">版权所有：<a href="http://www.kwstu.com">酷网工作室</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域中即可，并且编写点击事件，代码如下：

页面代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<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;">
                <ul class="easyui-tree">
                    <li>
                        <span>Folder</span>
                        <ul>
                            <li>
                                <span>Sub Folder 1</span>
                               <ul>
                                    <li>
                                        <span><a target="mainFrame" href="http://www.baidu.com">审核博客</a></span>
                                   </li>
                                    <li>
                                        <span><a href="#">File 12</a></span>
                                    </li>
                                    <li>
                                        <span>File 13</span>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <span>File 2</span>
                            </li>
                            <li>
                                <span>File 3</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点击事件代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<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>';
               return s;
           }
 
 
           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);
                   return false;
               });
           }
 
           //绑定右键菜单事件
      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('后边没有啦~~');
                       return false;
                   }
                   nextall.each(function (i, n) {
                       var t = $('a:eq(0) span', $(n)).text();
                       $('#tabs').tabs('close', t);
                   });
                   return false;
              });
               //关闭当前左侧的TAB
               $('#mm-tabcloseleft').click(function () {
                   var prevall = $('.tabs-selected').prevAll();
                   if (prevall.length == 0) {
                       alert('到头了，前边没有啦~~');
                       return false;
                   }
                   prevall.each(function (i, n) {
                       var t = $('a:eq(0) span', $(n)).text();
                       $('#tabs').tabs('close', t);
                   });
                   return false;
               });
 
               //退出
               $("#mm-exit").click(function () {
                   $('#mm').menu('hide');
 
               })
           }
       });

以上代码效果图：

三、最后点击菜单时需要在center域显示点击后的内容页面,代码如下：

<div id="tabs" class="easyui-tabs" fit="true" border="false">

<div title="欢迎使用" style="padding: 20px; overflow: hidden;" id="home">

<h1>Welcome to jQuery UI!</h1>

</div>

</div>

本文已完到此结束。

下载源码

Jquery EasyUi实战教程布局篇的更多相关文章

  1. 转：jQuery LigerUI 使用教程表格篇(3) 复选框、多表头、分组、汇总和明细

    阅读目录 复选框 多表头 分组 汇总 明细 复选框 grid可以设置复选框模式进行多选,只需要简单的配置 checked:true 获取选中行 如果要获取选中的行,可以用getSelecteds方法: ...

  2. 第二百零二节，jQuery EasyUI，Layout(布局)组件

    jQuery EasyUI,Layout(布局)组件 学习要点: 1.加载方式 2.布局属性 3.区域面板属性 4.方法列表 本节课重点了解 EasyUI 中 Layout(布局)组件的使用方法,这个 ...

  3. jquery+easyui主界面布局一例

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="workbench.aspx ...

  4. jquery easyui 实战总结

    (2012-09-26 10:22:24) 转载▼ 标签: it 分类: Javascript 一.tree 1.根据node id查找对应的node,然后选择该节点:                 ...

  5. jQuery easyui layout布局自适应浏览器大小(转)

    首先解释一下标题的含义,当我们用jQuery easyui layout 进行布局的时候,可能会遇到这样一个问题,那就是当手工调整浏览器大小,或者最大化.还原窗口的时候,layout的某个区域不能填充 ...

  6. DoNet开源项目-基于jQuery EasyUI的后台管理系统

    博主在业余时间开发了一个简单的后台管理系统,其中用到了 jQuery EasyUI 框架,上次分享过系统布局,参考文章:jQuery EasyUI 后台管理系统布局分享,目前已完成系统的整体框架的搭建 ...

  7. EasyUI之Layout布局和Tabs页签的使用

    1.JQuery EasyUI之LayOut布局 EasyUI是一款基于JQuery开发的前端框架,它集成很多漂亮的样式和相应的功能,大大方便了我们对前端开发的难度.对于web项目而言,主页面的一定是 ...

  8. asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发4- 后台模板html页面创建

    上一篇教程<asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发3-登录模块开发>完成了本项目的登录模块,登录后就需要进入后台管理首页了,需要准备一个后台模 ...

  9. asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发2-Model层建立

    上篇(asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发1-准备工作)文章讲解了开发过程中的准备工作,主要创建了项目数据库及项目,本文主要讲解项目M层的实现,M层这里 ...

随机推荐

  1. LA 3357 (递推 找规律) Pinary

    n位不含前导零不含连续1的数共有fib(n)个,fib(n)为斐波那契数列. 所以可以预处理一下fib的前缀和,查找一下第n个数是k位数,然后再递归计算它是第k位数里的多少位. 举个例子,比如说要找第 ...

  2. 【C#学习笔记】Dictionary容器使用

    using System; using System.Collections.Generic; namespace ConsoleApplication { class Program { stati ...

  3. tomcat 调优

    1 总是遇到read time out ,socket什么的           <Executor name="tomcatThreadPool" namePrefix=& ...

  4. android中sqlite3常用命令

    1)打开数据库 在adb shell模式下执行命令sqlite3 + 数据库名称,例如打开email中的EmailProvider.db数据库: 2)sqlite3特殊命令 大多数候,sqlite3读 ...

  5. 【LeetCode 231】Power of Two

    Given an integer, write a function to determine if it is a power of two. 思路: 如果一个数是2的Power,那么该数的二进制串 ...

  6. SQL你必须知道的-增删改查与约束

    SQL你必须知道的-增删改查与约束   -- 插入数据    --Insert 语句可以省略表名后的列名,但是不推荐    insert into Class values ('' 高一一班 '', ...

  7. Web服务器（Apache）虚拟主机的配置

    一.定义    所谓虚拟主机是指在一台服务器里运行几个网站,提供WEB.FTP.Mail等服务.    二.虚拟主机的实现方法有三种:    基于IP的方法,基于主机名的方法和基于端口的法官法.    ...

  8. 你今天Python了吗？（上）

    你今天Python了吗?为了提高你的生产效率,赶快去关注一下小蟒蛇的成长吧!别再把Python当作你的业余爱好了,她能为你做手头上几乎所有的工作,而且能做得更好,也让你把写代码看成是一种真正的乐趣.为 ...

  9. BootStrap入门教程 (一) ：手脚架Scaffolding（全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts)）

    2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...

  10. Genesis-3D开源游戏引擎简介！

    Genesis-3D由搜狐畅游公司超百人引擎研发团队历时数年耗费巨资自主研发,是国内外首款商业开源的3D游戏引擎平台.它包括跨平台渲染引擎.2D引擎.物理引擎.音效系统.粒子系统.动画系统.服务器引擎 ...