下载EasyUI需要用到的js文件
下载地址: 官网下载
把下载好的zip文件解压, 把下面的内容复制到工程中
EasyUI
EasyUI
在html文件中引用EasyUI的文件
引用
把页面划分成 东南西北中 五个区域
<body class="easyui-layout">
<div data-options="region:'north'" title="信息管理系统" style="height: 100px;">北部</div>
<div data-options="region:'west'" style="width: 100px;">西部</div>
<div data-options="region:'center'">中部</div>
<div data-options="region:'east'" style="width: 100px;">东部</div>
<div data-options="region:'south'" style="height: 100px;">南部</div>
</body>
示例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--引入EasyUI文件-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="js/easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css" />
<!--引入zTree文件-->
<script type="text/javascript" src="js/ztree/jquery.ztree.all.min.js"></script>
<link rel="stylesheet" href="js/ztree/zTreeStyle.css" />
<!--js逻辑-->
<script type="text/javascript">
$(function() {
var setting = {
data: {
simpleData: {
enable: true
}
},
callback: {
onClick: function(event, treeId, treeNode, clickFlag) {
var page = treeNode.page
var nodeName = treeNode.name
if(page != undefined && page != "") {
var content = '<div style="width:100%;height:100%;overflow:hidden;"><iframe src="' +
page + '" scrolling="auto" style="width:100%;height:100%;border:0;"></iframe></div>';
if($("#info_tabs").tabs('exists', nodeName)) {
$("#info_tabs").tabs('select', nodeName);
} else {
$("#info_tabs").tabs('add', {
title: nodeName,
content: content,
closable: true,
tools:[{
iconCls:'icon-reload',//刷新按钮
handler:function(){
//取到当前的窗口
var tab = $("#info_tabs").tabs("getTab",nodeName);
//刷新窗口
$("iframe[src='"+page"']").get(0).contentWindow.location.reload(true);
}
}]
});
}
}
}
}
};
//获取到json数据,然后生成菜单
$.post('./data/menu.json', function(data) {
//生成树形菜单
$.fn.zTree.init($("#base_menu"), setting, data);
}, 'json')
$.post("./data/admin.json", function(data) {
//生成树形菜单
$.fn.zTree.init($("#admin_menu"), setting, data);
}, "json")
var currentTitle;
//在选项卡上注册右键菜单
$("#info_tabs").tabs({
onContextMenu: function(e, title, index) {
currentTitle = title
//阻止浏览器默认的右键事件
e.preventDefault();
//显示自定义的右键菜单
$("#right_menu").menu('show', {
left: e.pageX,
top: e.pageY
})
}
});
//右键菜单点击事件
$("#right_menu").menu({
onClick: function(item) {
var name = item.name
if(name === 'current') { //关闭当前窗口
$("#info_tabs").tabs('close', currentTitle)
} else if(name === 'other') { //关闭其他窗口
//获取到所有的窗口
var tabs = $("#info_tabs").tabs("tabs")
//遍历所有窗口
$(tabs).each(function() {
var title = $(this).panel('options').title
if(title != '消息中心' && title != currentTitle) {
$("#info_tabs").tabs('close', title)
}
})
} else if(name === 'all') { //关闭全部窗口
//获取到所有的窗口
var tabs = $("#info_tabs").tabs("tabs")
//遍历所有窗口
$(tabs).each(function() {
var title = $(this).panel('options').title
if(title != '消息中心') {
$("#info_tabs").tabs('close', title)
}
})
}
}
})
//窗口提示
//1.警告窗口
//$.messager.alert("标题","警告内容","warning");
//2.确认窗口
/*$.messager.confirm("删除提示","是否删除?",function(confirm){
if(confirm){
alert("删除成功")
}else{
alert("取消删除")
}
})*/
//3.输入窗口
/*$.messager.prompt("输入窗口","请输入内容:",function(value){
alert(value);
})*/
//4.右下角信息窗口
/*$.messager.show({
title: "降价促销!",
msg: "降价促销! <a href='#'>请猛戳这里!</a>",
timeout: 3000 //3秒后自动消失
})*/
//5.进度条窗口
/*$.messager.progress({
interval:500
})
//定时关闭进度条
window.setTimeout('$.messager.progress("close");',3000)*/
// 页面加载后 右下角 弹出窗口
/* window.setTimeout(function(){
$.messager.show({
title:"消息提示",
msg:'欢迎登录，超级管理员！ <a href="javascript:void" onclick="show();">联系管理员</a>',
timeout:5000
});
},1000);*/
window.onload = function() {
$.messager.show({
title: "消息提示",
msg: '欢迎登录，超级管理员！ <a href="javascript:void" onclick="show();">联系管理员</a>',
timeout: 5000
});
};
});
</script>
<title>信息管理系统</title>
</head>
<body class="easyui-layout">
<div data-options="region:'north'" title="信息管理系统" style="height: 100px;">北部</div>
<div data-options="region:'west'" title="菜单导航" style="width: 180px;">
<div class="easyui-accordion" data-options="fit:true">
<div title="基础菜单">
<!--使用zTree生成菜单-->
<ul id="base_menu" class="ztree">
</ul>
</div>
<div title="高级菜单">
<!--使用zTree生成菜单-->
<ul id="admin_menu" class="ztree">
</ul>
</div>
</div>
</div>
<div data-options="region:'center'">
<div id="info_tabs" class="easyui-tabs" data-options="fit:true">
</div>
</div>
<div data-options="region:'east'" style="width: 80px;">东部</div>
<div data-options="region:'south'" style="height: 80px;">南部</div>
<!--右键菜单, 默认是隐藏的-->
<div id="right_menu" class="easyui-menu" style="width:120px">
<div data-options="name:'current'">
关闭当前窗口
</div>
<div data-options="name:'other'">
关闭其他窗口
</div>
<div class="menu-sep">
</div>
<div data-options="iconCls:'icon-cancel', name:'all'">
关闭全部窗口
</div>
</div>
</body>
</html>
