jQuery EasyUi实战教程之布局篇


Posted in Javascript onJanuary 26, 2016

jQuery EasyUI Layout是一种基于jQuery的布局框架,今天初次使用Jquery EasyUi,简单的做了个布局页面感觉还不错,给大家分享一下,就是不知道Jquery EasyUi浏览器兼容性怎么样。

最后效果图如下:

jQuery EasyUi实战教程之布局篇

使用Jquery EasyUi开发之前首先要引用Jquery EasyUi的Js和Css文件,引用如下:

<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,下面就开始我们的布局。

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

<!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 {
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实战教程之布局篇

二、添加左侧菜单

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

页面代码:

<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点击事件代码:

<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');
})
}
});

以上代码效果图:

jQuery EasyUi实战教程之布局篇

三、最后点击菜单时需要在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>

本文已完到此结束。希望本文分享对大家有所帮助。

Javascript 相关文章推荐
JS控制表格隔行变色
Jun 26 Javascript
一些易混淆且不常用的属性,希望有用
Jan 29 Javascript
javascript的console.log()用法小结
May 31 Javascript
Jquery validation remote 验证的缓存问题解决方法
Mar 25 Javascript
防止登录页面出现在frame中js代码
Jul 22 Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 Javascript
基于javascript html5实现多文件上传
Mar 03 Javascript
JS匿名函数实例分析
Nov 26 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 Javascript
微信小程序实现topBar底部选择栏效果
Jul 20 Javascript
scrapyd schedule.json setting 传入多个值问题
Aug 07 Javascript
JavaScript实现通讯录功能
Dec 27 Javascript
jQuery Easyui实现左右布局
Jan 26 #Javascript
AngualrJS中的Directive制作一个菜单
Jan 26 #Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 #Javascript
详解javascript new的运行机制
Jan 26 #Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 #Javascript
基于JavaScript实现瀑布流布局(二)
Jan 26 #Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 #Javascript
You might like
xml+php动态载入与分页
2006/10/09 PHP
PHP Token(令牌)设计
2008/03/15 PHP
生成php程序的php代码
2008/04/07 PHP
PHP面向对象学习笔记之一 基础概念
2012/10/06 PHP
PHP中应该避免使用同名变量(拆分临时变量)
2015/04/03 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
PHP实现统计在线人数功能示例
2016/10/15 PHP
Nginx实现反向代理
2017/09/20 Servers
PHP变量的作用范围实例讲解
2020/12/22 PHP
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
AngularJS 的$timeout服务示例代码
2017/09/21 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
vue中改变滚动条样式的方法
2020/03/03 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
python变量不能以数字打头详解
2016/07/06 Python
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
Python 实现 贪吃蛇大作战 代码分享
2016/09/07 Python
pandas带有重复索引操作方法
2018/06/08 Python
Python字符串、整数、和浮点型数相互转换实例
2018/08/04 Python
python提取log文件内容并画出图表
2019/07/08 Python
python中下标和切片的使用方法解析
2019/08/27 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
Python的轻量级ORM框架peewee使用教程
2021/02/05 Python
广播体操比赛口号
2014/06/10 职场文书
服务口号大全
2014/06/11 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL