jquery easyui实战教程布局篇

私人做程序开发一直有个头疼的问题就是后台管理界面，以前一般都是自己用 jquery+ps 自己设计的，效果很一般，很不理想。 今天初次使用 Jquery EasyUi，简单的做了个布局页面感觉还不错，给大家分享一下，就是不知道 Jquery EasyUi 浏览器兼容性怎么样。 最后效果图如下： 使用 Jquery EasyUi 开发之前首先要引用 Jquery EasyUi 的 Js 和 Css 文件，引用如下： ? 1 2 3 4 5 6 7 OK，下面就开始我们的布局。 一、使用布局面板进行整体布局，直接贴代码： ? 1 2 3 4 5 6 7 8 LayOut 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 $(document).ready(function () ); .footer width: 100%; text-align: center; line-height: 35px; .top-bg background-color: #d8e4fe; height: 80px; 35 36 37 38 39 40 41 版权所有：酷网工作室 以上代码效果如下（完成局部第一步）： 二、添加左侧菜单 左侧菜单使用的是 jquery easyui 的可伸缩面板控件和树形控件的结合，直接将可伸缩面板控件和树形控件放到 west 域中即可，并且编写点击事件， 代码如下： 页面代码： ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Folder Sub Folder 1 审核博客 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 File 12 File 13 File 2 File 3 File21 content2 content3 Js 点击事件代码： ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 $(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) 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 $(#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 = ; return s; function tabClose() /*双击关闭 TAB 选项卡*/ 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 $(“.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 () 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 $(.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; 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 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).tab