私人做程序开发一直有个头疼的问题就是后台管理界面，以前一般都是自己用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 {
            background-color: #d8e4fe;
            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>

本文已完到此结束。

原文连接：http://www.kwstu.com/ArticleView/kwstu_20139413501290

juqery easyui的更多相关文章

  1. 解决juqery easyui combobox只能选择问题

    1.首先设定框为 combobox样式,该字段值为了进行值的显示 <tr class="odd_row"> <td class="TableLabel_ ...

  2. jquery easyui中的dialog拖动超出浏览器问题解决办法

    juqery easyui当鼠标点着拖动超出浏览器后,就回不来了,拉不下的问题: //控制dialog超出浏览器回到原来的地方 var default_left; var default_top;// ...

  3. 扩展jquery easyui datagrid编辑单元格

    扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...

  4. easyui combobox 不能选中值的问题

    easyui comboxbox 下拉框加载到数据,但是不能选中.一般情况是重复渲染,页面有同名元素,valueField重复. 这次遇到的具体问题是,第一次刷新页面,可以选中,第二次不能选中.考虑到 ...

  5. 前端框架 EasyUI （2）页面布局 Layout

    在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...

  6. 前端框架 EasyUI （1）熟悉一下EasyUI

    jQuery EasyUI 官方网站 http://www.jeasyui.com/ .去年新开了个中文网 http://www.jeasyui.net/,不知道是不是官方的,不过看着挺像样.但是,广 ...

  7. 前端框架 EasyUI （0） 重新温习（序言）

    几年前,参与过一个项目.那算是一个小型的信息管理系统,BS 结构的,前端用的是基于 jQuery 的 EasyUI 框架. 我进 Team 的时候,项目已经进入开发阶段半个多月了.听说整个项目的框架是 ...

  8. ASP.NET MVC5+EF6+EasyUI 后台管理系统（1）-前言与目录（持续更新中...）

    开发工具:VS2015(2012以上)+SQL2008R2以上数据库  您可以有偿获取一份最新源码联系QQ:729994997 价格 666RMB  升级后界面效果如下: 任务调度系统界面 http: ...

  9. ASP.NET MVC5+EF6+EasyUI 后台管理系统（81）-数据筛选（万能查询）

    系列目录 前言 听标题的名字似乎是一个非常牛X复杂的功能,但是实际上它确实是非常复杂的,我们本节将演示如何实现对数据,进行组合查询(数据筛选) 我们都知道Excel中是如何筛选数据的.就像下面一样 他 ...

随机推荐

  1. bzoj1741 [Usaco2005 nov]Asteroids 穿越小行星群

    网络流,对于每一个行星,将行星所在行到行星连一条流量为1的边,将行星到其所在列连一条流量为1的边,从源点到所有行连一条流量为1的边,将所有列到汇点都连一条流量为1的边,最大流即为答案. 代码 #inc ...

  2. 将Cocos2dX渲染到MFC窗口上

    引用:http://www.cnblogs.com/windeer/archive/2012/11/18/2767750.html 引言 现在智能手机已经慢慢进入大众化,移动类应用开始火爆起来,游戏类 ...

  3. 原生js快速渲染dom节点

    function renderDom(str){ var _div = document.createElement('div'); _div.innerHTML = str; var dom_tem ...

  4. bug检测报告---礼物挑选小工具--飞天小女警

    飞天小女警----礼物挑选小工具 测试产品链接:http://123.207.159.79:8088/giving_gifts/ 发布在作者的博客里面:http://www.cnblogs.com/s ...

  5. 《zw版·Halcon-delphi系列原创教程》 Halcon分类函数009,Measure，测量函数

    <zw版·Halcon-delphi系列原创教程> Halcon分类函数009,Measure,测量函数 为方便阅读,在不影响说明的前提下,笔者对函数进行了简化: :: 用符号“**”,替 ...

  6. Fragment与FragmentAcitvity间的传值

    Fragment与FragmentAcitvity间的传值 FragmentActivity中传值 Bundle bundle=new Bundle(); bundle.putSerializable ...

  7. php将抓取的图片链接下载到本地

    备注: fclose这一步操作完成之后如果返回值是空表示下载成功,否则会返回1或者其他错误提示 这个步骤测试的时候实在yii2框架的基础上执行的,下载到的图片实在frontend目录下的web目录下( ...

  8. android常见问题

    1.广播接收器中启动Activity,需要在intent中添加FLAG_ACTIVITY_NEW_TASK /** * Demo描述: * 在BroadcastReceiver中启动Activity的 ...

  9. iOS开发之生成二维码

    一.二维码的生成 从iOS7开始集成了二维码的生成和读取功能 此前被广泛使用的zbarsdk目前不支持64位处理器   1.二维码的内容(传统的条形码只能放数字) 纯文本 名片 URL   2.生成二 ...

  10. linux定时执行任务

    (1)Linux下如何定时执行php脚本?(2)Linux下如何设置定时任务?(3)Crontab定时执行程序 核心提示:键入 crontab -e 编辑crontab服务文件 分为两种情况:(还有一 ...