Jquery EasyUi实战教程布局篇

送给大家一个非常好的后台布局模板,本人后来就选择了这个模板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">

<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 {

            

            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>

本文已完到此结束。

下载源码

时间: 2024-10-06 11:55:14

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

jQuery EasyUI使用教程之创建展开行详细编辑表单的CRUD应用

当切换datagrid视图到"detailview"时,用户可以展开一行来显示该行下面的任何详细信息.此功能允许用户为放置在行详细信息面板中的编辑表单提供恰当的布局.在本教程中,我们使用DataGrid组件来减少编辑表单所占用的空间. 查看演示 Step 1:在HTML标记中创建DataGrid <table id="dg" title="My Users" style="width:550px;height:250px"

第二百零二节,jQuery EasyUI,Layout(布局)组件

jQuery EasyUI,Layout(布局)组件 学习要点: 1.加载方式 2.布局属性 3.区域面板属性 4.方法列表 本节课重点了解 EasyUI 中 Layout(布局)组件的使用方法,这个组件依赖于 Panel(面 板)组件和 resizable(调整大小)组件. 一.加载方式 class 加载方式,这个属性一般使用class方法使用 <body id="box" class="easyui-layout"> <div data-opt

jQuery EasyUI使用教程之创建Web页面的边框布局

<jQuery EasyUI最新版下载> 本教程主要为大家演示如何使用jQuery EasyUI创建Web页面的边框布局.该边框布局提供五个区域:east.west.north.south.center,以下是一些常见的用法: north区域可以用于显示一个网站的标语 south区域可用于显示版权及其他注意事项 west区域可用于显示导航菜单 east区域可用于显示促销项目 center区域可用于显示主要内容 查看演示 想要应用一个布局,首先你应该确认一个布局容器,然后定义一些区域.布局中必须

jQuery EasyUI使用教程之创建标签页

<jQuery EasyUI最新版下载> 本教程将展示如何使用easyui创建一个标签组件.标签可以动态地添加或删除多个面板,你可以使用标签在同一个页面上显示不同的实体. 标签一次只能显示一个面板,每个面板都有标题.图表和关闭按钮.当标签被选中之后,会显示相应面板的内容. 查看演示 使用HTML标记创建标签,其中包括一个DIV容器和一些DIV面板. < div class="easyui-tabs" style="width:400px;height:100

jQuery EasyUI使用教程之创建可折叠面板

<jQuery EasyUI最新版下载> 在本教程中,你将学习到有关于easyui折叠面板的知识.折叠面板包含了一系列的面板,其中所有的面板标题都是可见的,但只有一个面板的主体内容在某个时间是可见的.当用户点击面板标题时,该面板的主体内容可见,其他面板的内容将会被隐藏. 查看演示 我们将创建三个面板,其中第三个面板包含了一个树形菜单. < div class = "easyui-accordion" style = "width:300px;height:2

jQuery EasyUI使用教程之创建一个课程表

<jQuery EasyUI最新版下载> 本教程将为你展示如何使用jQuery EasyUI创建一个学校的课程表.我们将创建两个表:学校的科目在左边,时间表在右边,你可以拖动学校科目并将其放在时间表的单元格中.学校的科目是一个"div class='item'"元素,然而时间表单元格是一个"td class='drop'"元素. 查看演示 显示学校科目 < div class = "left" > < table &

jQuery EasyUI使用教程之创建一个拖放的购物车

<jQuery EasyUI最新版下载> 如果你能利用你的web应用程序很容易地实现简单的拖放,那么你一定知道一些特别的东西,使用jQuery EasyUI,我们能在web应用程序中简单地实现拖放功能. 在本教程中,我们将为你展示如何创建一个用户可以拖放他们想要购买的商品到购物车的页面.购物车中的物品和价格将会更新. 查看演示 在页面上显示商品: < ul class = "products" > < li > < a href = "

jQuery EasyUI使用教程之创建一个链接按钮

<jQuery EasyUI最新版下载> 本教程主要为大家展示如何使用jQuery EasyUI创建一个链接按钮.通常情况下,使用"button/"元素来创建一个按钮:使用"a/"元素来创建链接按钮.所以事实上一个链接按钮是一个显示为按钮样式"a/"元素. 查看演示 为了创建一个链接按钮,你所需要做的就是添加一个名为'easyui-linkbutton'的类属性到"a/"元素中: < div style =

jQuery EasyUI使用教程之创建一个简单的菜单

<jQuery EasyUI最新版下载> 本教程将为你展示如何使用jQuery EasyUI创建一个简单的菜单. 查看演示 菜单被定义在一些DIV标记中,如下所示: < div id = "mm" class = "easyui-menu" style = "width:120px;" > < div onclick = "javascript:alert('new')" >New</