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 动态添加表格行
Jun 22 Javascript
web基于浏览器的本地存储方法应用
Nov 27 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
Apr 14 Javascript
js实现商品抛物线加入购物车特效
Nov 18 Javascript
js简单实现调整网页字体大小的方法
Jul 23 Javascript
解决React Native端口号修改的方法
Jul 28 Javascript
使用react实现手机号的数据同步显示功能的示例代码
Apr 03 Javascript
JS实现键值对遍历json数组功能示例
May 30 Javascript
详解mpvue scroll-view自动回弹bug解决方案
Oct 01 Javascript
js实现按钮开关单机下拉菜单效果
Nov 22 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 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
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
javascript 数组排序函数sort和reverse使用介绍
2013/11/21 Javascript
Node.js实用代码段之获取Buffer对象字节长度
2016/03/17 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
使用JS动态显示文本
2017/09/09 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
jQuery实现基本隐藏与显示效果的方法详解
2018/09/05 jQuery
小程序日历控件使用方法详解
2018/12/29 Javascript
vue用BMap百度地图实现即时搜索功能
2019/09/26 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
2020/07/11 Javascript
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
python时间整形转标准格式的示例分享
2014/02/14 Python
python实现的生成随机迷宫算法核心代码分享(含游戏完整代码)
2014/07/11 Python
Python计算回文数的方法
2015/03/11 Python
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
人机交互程序 python实现人机对话
2017/11/14 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
python实现电子产品商店
2019/02/26 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
应届生面试求职信
2014/07/02 职场文书
商务经理岗位职责
2014/07/30 职场文书
爱护公物演讲稿
2014/09/09 职场文书
新闻人物通讯稿
2014/10/09 职场文书
个人年终总结结尾
2015/03/06 职场文书
2019年感恩励志演讲稿(收藏备用)
2019/09/11 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
redis实现共同好友的思路详解
2021/05/26 Redis