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 相关文章推荐
JAVASCRIPT style 中visibility和display之间的区别
Jan 22 Javascript
jquery 新浪网易的评论块制作
Jul 01 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
浅析JavaScript中的CSS属性及命名规范
Nov 28 Javascript
JavaScript函数内部属性和函数方法实例详解
Mar 17 Javascript
Angular中$cacheFactory的作用和用法实例详解
Aug 19 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 Javascript
简单理解vue中track-by属性
Oct 26 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
vue-router相关基础知识及工作原理
Mar 16 Javascript
vue+iview+less 实现换肤功能
Aug 17 Javascript
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
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
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
jquery实现居中弹出层代码
2010/08/25 Javascript
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
JQuery调用绑定click事件的3种写法
2015/03/28 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
JQuery节点元素属性操作方法
2015/06/11 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
NodeJS远程代码执行
2016/08/28 NodeJs
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
鼠标经过出现气泡框的简单实例
2017/03/17 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
vue实现表格合并功能
2020/12/01 Vue.js
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
Python控制台实现交互式环境执行
2020/06/09 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
军神教学反思
2014/02/04 职场文书
主要领导对照检查材料
2014/08/26 职场文书
2014年市场部工作总结
2014/11/25 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
2015年汽车销售员工作总结
2015/07/24 职场文书
一年级语文教学随笔
2015/08/14 职场文书