Jquery EasyUi实战教程布局篇.docx

1、Jquery EasyUi实战教程布局篇私人做程序开发一直有个头疼的问题就是后台管理界面，以前一般都是自己用jquery+ps自己设计的，效果很一般，很不理想。今天初次使用Jquery EasyUi，简单的做了个布局页面感觉还不错，给大家分享一下，就是不知道Jquery EasyUi浏览器兼容性怎么样。最后效果图如下：使用Jquery EasyUi开发之前首先要引用Jquery EasyUi的Js和Css文件，引用如下：?1234567OK，下面就开始我们的布局。一、使用布局面板进行整体布局，直接贴代码：?12345678910111213141516171819202122232425262

2、72829303132333435363738394041LayOut$(document).ready(function () );.footer width: 100%;text-align: center;line-height: 35px;.top-bg background-color: #d8e4fe;height: 80px;版权所有：酷网工作室以上代码效果如下（完成局部第一步）：二、添加左侧菜单左侧菜单使用的是jquery easyui的可伸缩面板控件和树形控件的结合，直接将可伸缩面板控件和树形控件放到west域中即可，并且编写点击事件，代码如下：页面代码：?123456789

3、1011121314151617181920212223242526272829303132333435363738394041424344FolderSub Folder 1审核博客File 12File 13File 2File 3File21content2 content3 Js点击事件代码：?1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787

4、98081828384858687888990919293949596979899100101102103104105106107108109110111112113114$(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).p

5、arent().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).widt

6、h() - 10,height: $(#mainPanle).height() - 26); else$(#tabs).tabs(select, subtitle);tabClose();function createFrame(url) var s = ;returns;function tabClose() /*双击关闭TAB选项卡*/$(.tabs-inner).dblclick(function () var subtitle = $(this).children(span).text();$(#tabs).tabs(close, subtitle);)$(.tabs-inner).b

7、ind(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,

8、 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()

9、;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(clo

10、se, 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););以上代码效果图：三、最后点击菜单时需要在center域显示点击后的内容页面,代码如下： Welcome to jQuery UI! 本文已完到此结束。