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 相关文章推荐
同时使用n个window onload加载实例介绍
Apr 25 Javascript
node.js中的fs.rmdirSync方法使用说明
Dec 16 Javascript
jQuery中hasClass()方法用法实例
Jan 06 Javascript
jquery validate demo 基础
Oct 29 Javascript
Javascript数组Array基础介绍
Mar 13 Javascript
js剪切板应用clipboardData实例解析
May 29 Javascript
详解JS构造函数中this和return
Sep 16 Javascript
基于es6三点运算符的使用方法(实例讲解)
Oct 12 Javascript
vue-cli项目中使用Mockjs详解
May 14 Javascript
JS实现页面数据懒加载
Feb 13 Javascript
JS如何把字符串转换成json
Feb 21 Javascript
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 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
php简单静态页生成过程
2008/03/27 PHP
php仿discuz分页效果代码
2008/10/02 PHP
学习ExtJS Column布局
2009/10/08 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
2013/10/21 Javascript
jQuery的deferred对象详解
2014/11/12 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
教你用十行node.js代码读取docx的文本
2017/03/08 Javascript
vue 页面加载进度条组件实例
2018/02/05 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
2018/09/27 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
详解vue高级特性
2020/06/09 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
[51:34]Ti4主赛事胜者组 DK vs EG 2
2014/07/19 DOTA
python文件操作整理汇总
2014/10/21 Python
举例讲解Python中metaclass元类的创建与使用
2016/06/30 Python
python算法与数据结构之单链表的实现代码
2019/06/27 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
如何在VSCode下使用Jupyter的教程详解
2020/07/13 Python
快速实现一个简单的canvas迷宫游戏的示例
2018/07/04 HTML / CSS
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
类、抽象类、接口的差异
2016/06/13 面试题
Ruby如何实现动态方法调用
2012/11/18 面试题
经典英文广告词
2014/03/18 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
低碳生活倡议书
2014/04/14 职场文书
敬老院院长事迹材料
2014/05/21 职场文书
模特大赛策划方案
2014/05/28 职场文书
初中思品教学反思
2016/02/20 职场文书