目录
官方文档地址
布局组件：layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 导入jquery核心类库 -->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<!-- 导入easyui类库 -->
<!-- 核心 -->
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
<!-- 主题样式 -->
<link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
<!-- 默认的样式 -->
<link rel="stylesheet" type="text/css" href="../css/default.css">
<!-- 一些图标 （不是必须额）-->
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
</head>
<body class="easyui-layout">
<!--北-->
<div data-options="region:'north',title:'北',split:true" style="height:100px;"></div>
<!--南-->
<div data-options="region:'south',title:'南',split:true" style="height:100px;"></div>
<!--东-->
<div data-options="region:'east',title:'东',split:true" style="width:100px;"></div>
<!--西-->
<div data-options="region:'west',title:'西',split:true" style="width:100px;"></div>
<!--中-->
<div data-options="region:'center',title:'中'" style="padding:5px;background:#eee;"></div>
</body>
</html>选项卡组件：tabs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 导入jquery核心类库 -->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<!-- 导入easyui类库 -->
<!-- 核心 -->
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
<!-- 主题样式 -->
<link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
<!-- 默认的样式 -->
<link rel="stylesheet" type="text/css" href="../css/default.css">
<!-- 一些图标 （不是必须额）-->
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
<!--easyui中文国际化-->
<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body class="easyui-layout">
<!--北-->
<div data-options="region:'north',title:'北',split:true" style="height:100px;">
</div>
<!--南-->
<div data-options="region:'south',title:'南',split:true" style="height:100px;"></div>
<!--东-->
<div data-options="region:'east',title:'东',split:true" style="width:100px;"></div>
<!--西-->
<div data-options="region:'west',title:'西',split:true" style="width:300px;" class="easyui-accordion">
<div title="Title1" style="overflow:auto;padding:10px;">
</div>
<div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
content2
</div>
<div title="Title3">
content3
</div>
</div>
<!--中-->
<div data-options="region:'center',title:'中'" style="padding:5px;background:#eee;" class="easyui-tabs">
<div title="Tab1" style="padding:20px;display:none;">
tab1
</div>
<div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
tab2
</div>
<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
tab3
</div>
</div>
</body>
</html>可折叠组件：Accordion
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 导入jquery核心类库 -->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<!-- 导入easyui类库 -->
<!-- 核心 -->
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
<!-- 主题样式 -->
<link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
<!-- 默认的样式 -->
<link rel="stylesheet" type="text/css" href="../css/default.css">
<!-- 一些图标 （不是必须额）-->
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
<!--easyui中文国际化-->
<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body class="easyui-layout">
<!--北-->
<div data-options="region:'north',title:'北',split:true" style="height:100px;">
</div>
<!--南-->
<div data-options="region:'south',title:'南',split:true" style="height:100px;"></div>
<!--东-->
<div data-options="region:'east',title:'东',split:true" style="width:100px;"></div>
<!--西-->
<div data-options="region:'west',title:'西',split:true" style="width:300px;" class="easyui-accordion">
<div title="Title1" style="overflow:auto;padding:10px;">
</div>
<div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
content2
</div>
<div title="Title3">
content3
</div>
</div>
<!--中-->
<div data-options="region:'center',title:'中'" style="padding:5px;background:#eee;" >
</div>
</body>
</html>树组件：ztree（不是EasyUI的组件，独立使用）
下载地址
链接：https://pan.baidu.com/s/179tKganBirBxgARgHHK2zQ
提取码：43u6
引入js
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/ztree/jquery.ztree.all.js"></script>
引入css
<link rel="stylesheet" href="../js/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">步骤使用:
在需要的地方添加zTree标签
<!--树节点-->
<ul id="treeDemo" class="ztree"></ul>demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 导入jquery核心类库 -->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<!-- 导入easyui类库 -->
<!-- 核心 -->
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
<!-- 主题样式 -->
<link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
<!-- 默认的样式 -->
<link rel="stylesheet" type="text/css" href="../css/default.css">
<!-- 一些图标 （不是必须额）-->
<!--easyui中文国际化-->
<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
<!--zTree-->
<link rel="stylesheet" href="../js/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../js/ztree/jquery.ztree.all.js"></script>
</head>
<body class="easyui-layout">
<script type="text/javascript">
$(function () {
//设置
var setting = {
data: {
//开启简单数据格式
simpleData: {
enable: true
},
},
//事件回调
callback: {
//点击事件
onClick: onClick
}
};
//数据 根据PId来体现父子关系,如果没有pId是普通的节点,注意I大写
var zNodes = [
{id: 1, pId: 0, name: "搜索引擎"},
// 父节点搜索引擎id为1 百度为子节点pId=1.是搜索引擎的id page: 可以给节点添加其他自定义属性
{id:101,pId:1,name:"百度",page:"https://www.baidu.com"},
// 父节点百度id为101 百度百科为子节点pId=101.是百度的id
{id:1001,pId:101,name:"百度百科"},
// 父节点百度百科id为1001 谷歌为子节点pId=1001.是百度百科的id
{id:102,pId:1001,name:"谷歌",page:"https://www.baidu.com"},
]
//初始化
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
//菜单点击事件
function onClick(event, treeId, treeNode, clickFlag) {
// 判断树菜单节点是否含有 page属性
if (treeNode.page!=undefined && treeNode.page!= "") {
alert(treeNode.page)
if ($("#tabs").tabs('exists', treeNode.name)) {// 判断tab是否存在
$('#tabs').tabs('select', treeNode.name); // 切换tab
} else {
// 开启一个新的tab页面
var content = '<div style="width:100%;height:100%;overflow:hidden;">'
+ '<iframe src="'
+ treeNode.page
+ '" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>';
$('#tabs').tabs('add', {
title : treeNode.name,
content : content,
closable : true,
tools:[{
iconCls:'icon-reload', // 刷新按钮
handler : function(){
var tab = $('#tabs').tabs('getTab',treeNode.name);
$("iframe[src='"+treeNode.page+"']").get(0).contentWindow.location.reload(true);
}
}]
});
}
}
}
})
</script>
<!--北-->
<div data-options="region:'north',title:'北',split:true" style="height:100px;">
</div>
<!--南-->
<div data-options="region:'south',title:'南',split:true" style="height:100px;"></div>
<!--东-->
<div data-options="region:'east',title:'东',split:true" style="width:100px;"></div>
<!--西-->
<div data-options="region:'west',title:'西',split:true" style="width:300px;" class="easyui-accordion">
<div title="Title1" style="overflow:auto;padding:10px;">
<!--树节点-->
<ul id="treeDemo" class="ztree"></ul>
</div>
<div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
content2
</div>
<div title="Title3">
content3
</div>
</div>
<!--中-->
<div data-options="region:'center',title:'中'" style="padding:5px;background:#eee;" class="easyui-tabs">
<div title="Tab1" style="padding:20px;display:none;">
tab1
</div>
<div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
tab2
</div>
<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
tab3
</div>
</div>
</body>
</html>
扫一扫
990
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
