Jquery EasyUi实战教程布局篇.docx

上传人：b****7 文档编号：23463481 上传时间：2023-05-17 格式：DOCX 页数：12 大小：35.54KB

下载相关举报

第1页 / 共12页

第2页 / 共12页

第3页 / 共12页

第4页 / 共12页

第5页 / 共12页

点击查看更多>>

下载资源

资源描述

Jquery EasyUi实战教程布局篇.docx

《Jquery EasyUi实战教程布局篇.docx》由会员分享，可在线阅读，更多相关《Jquery EasyUi实战教程布局篇.docx（12页珍藏版）》请在冰豆网上搜索。

Jquery EasyUi实战教程布局篇.docx

JqueryEasyUi实战教程布局篇

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

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

最后效果图如下：

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

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

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

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

LayOut

$（document）.ready（function（）{

}）;

hidden;height:

80px;">

hidden;height:

40px;">

酷网工作室

200px;">

hidden;">

以上代码效果如下（完成局部第一步）：

二、添加左侧菜单

左侧菜单使用的是jqueryeasyui的可伸缩面板控件和树形控件的结合，直接将可伸缩面板控件和树形控件放到west域中即可，并且编写点击事件，代码如下：

页面代码：

200px;">

absolute;top:

27px;left:

0px;right:

0px;bottom:

0px;">

auto;padding:

10px;">

Folder

SubFolder1
- 审核博客
- File12
- File13

File2

File3

File21

10px;">

content2

content3

Js点击事件代码：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

$（document）.ready（function（）{

$（'.easyui-accordionlia'）.click（function（）{

vartabTitle=$（this）.text（）;

varurl=$（this）.attr（"href"）;

addTab（tabTitle,url）;

$（'.easyui-accordionlidiv'）.removeClass（"selected"）;

$（this）.parent（）.addClass（"selected"）;

}）.hover（function（）{

$（this）.parent（）.addClass（"hover"）;

},function（）{

$（this）.parent（）.removeClass（"hover"）;

}）;

functionaddTab（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（）;

}

functioncreateFrame（url）{

vars='

100%;height:

100%;">';

return s;

}

functiontabClose（）{

/*双击关闭TAB选项卡*/

$（".tabs-inner"）.dblclick（function（）{

varsubtitle=$（this）.children（"span"）.text（）;

$（'#tabs'）.tabs（'close',subtitle）;

}）

$（".tabs-inner"）.bind（'contextmenu',function（e）{

$（'#mm'）.menu（'show',{

left:

e.pageX,

top:

e.pageY,

}）;

varsubtitle=$（this）.children（"span"）.text（）;

$（'#mm'）.data（"currtab",subtitle）;

return false;

}）;

}

//绑定右键菜单事件

functiontabCloseEven（）{

//关闭当前

$（'#mm-tabclose'）.click（function（）{

varcurrtab_title=$（'#mm'）.data（"currtab"）;

$（'#tabs'）.tabs（'close',currtab_title）;

}）

//全部关闭

$（'#mm-tabcloseall'）.click（function（）{

$（'.tabs-innerspan'）.each（function（i,n）{

vart=$（n）.text（）;

$（'#tabs'）.tabs（'close',t）;

}）;

//关闭除当前之外的TAB

$（'#mm-tabcloseother'）.click（function（）{

varcurrtab_title=$（'#mm'）.data（"currtab"）;

$（'.tabs-innerspan'）.each（function（i,n）{

vart=$（n）.text（）;

if （t!

=currtab_title）

$（'#tabs'）.tabs（'close',t）;

}）;

//关闭当前右侧的TAB

$（'#mm-tabcloseright'）.click（function（）{

varnextall=$（'.tabs-selected'）.nextAll（）;

if （nextall.length==0）{

//msgShow（'系统提示','后边没有啦~~','error'）;

alert（'后边没有啦~~'）;

return false;

}

nextall.each（function（i,n）{

vart=$（'a:

eq（0）span',$（n））.text（）;

$（'#tabs'）.tabs（'close',t）;

}）;

return false;

}）;

//关闭当前左侧的TAB

$（'#mm-tabcloseleft'）.click（function（）{

varprevall=$（'.tabs-selected'）.prevAll（）;

if （prevall.length==0）{

alert（'到头了，前边没有啦~~'）;

return false;

}

prevall.each（function（i,n）{

vart=$（'a:

eq（0）span',$（n））.text（）;

$（'#tabs'）.tabs（'close',t）;

}）;

return false;

}）;

//退出

$（"#mm-exit"）.click（function（）{

$（'#mm'）.menu（'hide'）;

}）

}

}）;

以上代码效果图：

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

20px;overflow:

hidden;"id="home">

WelcometojQueryUI!

本文已完到此结束。

展开阅读全文