版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。
easyui基础模板
必须引入5个外部文件，两个css文件，三个js文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="../easyUi/jquery-easyui-1.8.5/themes/default/easyui.css" />
<!-- easy ui 图标文件 -->
<link rel="stylesheet" type="text/css" href="../easyUi/jquery-easyui-1.8.5/themes/icon.css" />
</head>
<body>
<!-- jquery 2.0 js文件 -->
<script type="text/javascript" src="../easyUi/jquery-easyui-1.8.5/jquery.min.js"></script>
<!-- jquery easy ui 核心js 文件 -->
<script type="text/javascript" src="../easyUi/jquery-easyui-1.8.5/jquery.easyui.min.js"></script>
<!-- 信息本地化js文件 -->
<script type="text/javascript" src="../easyUi/jquery-easyui-1.8.5/locale/easyui-lang-zh_CN.js"></script>
</body>
</html>
难点：tabs标签页的存在判定
原因：方法的不熟悉
解决方法：if判断和exists方法
function addTab(title,url){//外部传入标签页标题和url地址
//下面开始判断
if(!$('#tt').tabs('exists',title)){//利用exists判断当前title是否存在在tabs中，结果返回一个Boolean值
//不存在则add
$('#tt').tabs('add',{
title:title,
content:'<iframe style="width:100%;height:100%" src='+url+'></iframe>',
closable:true,
});
//存在则改为选中状态
}else{
$('#tt').tabs('select',title)；
}
}
dialog 对话框
<body>
<!-- dialog 对话框（dialog）是一个特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。默认情况下，对话框（dialog）只有一个显示在头部右侧的关闭工具。用户可以配置对话框行为来显示其他工具（比如：可折叠 collapsible、可最小化 minimizable、可最大化 maximizable，等等）-->
<!-- 第一个弹出框，class名easyui-dialog相当于js控制时的dialog方法；data-options的内容相当于 js函数内{}内对内容 -->
<div id="dialog02" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;"
data-options="iconCls:'icon-save',resizable:true,modal:true">
how are you?
</div>
<!-- 第二个弹出框，用js进行控制 ，但首先弹出-->
<div id="dialog" style="width: 200px;height: 200px;">what is you problem? are you ok?</div>
<!-- jquery 2.0 js文件 -->
<script type="text/javascript" src="../easyUi/jquery-easyui-1.8.5/jquery.min.js"></script>
<!-- jquery easy ui 核心js 文件 -->
<script type="text/javascript" src="../easyUi/jquery-easyui-1.8.5/jquery.easyui.min.js"></script>
<!-- 信息本地化js文件 -->
<script type="text/javascript" src="../easyUi/jquery-easyui-1.8.5/locale/easyui-lang-zh_CN.js"></script>
<script>
$(function(){
$("#dialog").dialog({
title: "My Dialog",
width: 400,
height: 200,//可重新设定宽和高
closed: false, //是否结束属性，当为true时，相当于点击关闭，默认为false
collapsible: true, //是否可折叠，为true时，代表可折叠
minimizable: true, //是否可缩小，为true时，代表可缩小
maximizable: true,//是否可扩大，为true时，代表可扩大
cache: false,
modal: true
});
});
</script>
</body>
dialog-toolbar
</head>
<body>
<div id="dialog" style="width: 600px;height: 300px"></div>
<!-- jquery 2.0 js文件 -->
<script type="text/javascript" src="../easyUi/jquery-easyui-1.8.5/jquery.min.js"></script>
<!-- jquery easy ui 核心js 文件 -->
<script type="text/javascript" src="../easyUi/jquery-easyui-1.8.5/jquery.easyui.min.js"></script>
<!-- 信息本地化js文件 -->
<script type="text/javascript" src="../easyUi/jquery-easyui-1.8.5/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function(){
$("#dialog").dialog({
title: "我是对话框",
model: true,
maximizable: true,
toolbar:[//顶部按钮
{
text:'edit',//按钮类型，edit编辑
iconCls:'icon-edit',//按钮图标
handler:function(){
alert("edit");//点击按钮时触发函数
}
},
{
text:'help',//按钮类型，help帮助
iconCls:'icon-help',//按钮图标
handler:function(){
alert("help");//点击时触发函数
}
}
],
buttons:[//底部按钮
{
text:'Save',//按钮类型，save保存
handler:function(){
alert('save');//点击时触发函数
}
},
{
text:'Close',//按钮类型
handler:function(){
alert("close");//点击时触发函数
}
}
]
});
});
</script>
</body>
Draggable可拖动
<body>
<div id="dd" style="width: 120px;height: 300px;border: 1px solid skyblue">
<div id="title" style="background:#678">
title
</div>
</div>
<!-- jquery 2.0 js文件 -->
<script type="text/javascript" src="../easyUi/jquery-easyui-1.8.5/jquery.min.js"></script>
<!-- jquery easy ui 核心js 文件 -->
<script type="text/javascript" src="../easyUi/jquery-easyui-1.8.5/jquery.easyui.min.js"></script>
<!-- 信息本地化js文件 -->
<script type="text/javascript" src="../easyUi/jquery-easyui-1.8.5/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function(){
$("#dd").draggable({
handle:"#title",//移动句柄
revert:true,//是否回弹，true为回弹
// disabled:true,//是否禁用，true为禁用
// procy:'clone'
// procy:function(source){
// var p= $("<div style='border:1px solid #ccc; width :80px'></div>");
// p.html($(source).html().appendTo('body'));
// return p;
// },
onBeforeDrag:function(e){
console.log(e);
},//t拖动前触发，返回false就取消拖动
onDrag:function(e){
console.log("正在拖动中");
return false;
}//拖动期间触发的事件，返回false就取消拖动
});
console.log($("#dd").draggable("options"));//获取该对象的所有options内容
});
</script>
</body>
droppable拖拽可放置区
<body>
<!-- 拖拽放置区 -->
<div id="dv" style="width: 500px; height: 300px; background: orange"></div>
<!-- 开拖拽元素 -->
<div id="d1" class="easyui-draggable" data-options='revert:true' style="width: 50px; height: 50px; background: crimson">
d1
</div>
<div id="d2" class="easyui-draggable" data-options='revert:true' style="width: 50px; height: 50px; background: crimson">
d2
</div>
<div id="d3" class="easyui-draggable" data-options='revert:true' style="width: 50px; height: 50px; background: crimson">
d3
</div>
<!-- jquery 2.0 js文件 -->
<script type="text/javascript" src="../easyUi/jquery-easyui-1.8.5/jquery.min.js"></script>
<!-- jquery easy ui 核心js 文件 -->
<script type="text/javascript" src="../easyUi/jquery-easyui-1.8.5/jquery.easyui.min.js"></script>
<!-- 信息本地化js文件 -->
<script type="text/javascript" src="../easyUi/jquery-easyui-1.8.5/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function(){
$('#dv').droppable({
accept:'#d1,#d3',//确定将接受的可拖拽元素
onDrop:function(e,source){
$(this).append($(source));
}//事件，当被拖动的元素放下时触发，source参数值被拖动的元素
});
})
</script>
</body>
resizable可拖动尺寸
<body>
<div id="rr2" style="width: 100px; height: 120px; background: crimson">
这里是可调整区域
</div>
<!-- jquery 2.0 js文件 -->
<script type="text/javascript" src="../easyUi/jquery-easyui-1.8.5/jquery.min.js"></script>
<!-- jquery easy ui 核心js 文件 -->
<script type="text/javascript" src="../easyUi/jquery-easyui-1.8.5/jquery.easyui.min.js"></script>
<!-- 信息本地化js文件 -->
<script type="text/javascript" src="../easyUi/jquery-easyui-1.8.5/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$('#rr2').resizable({
maxWidth:300,//可拖动的最大宽度
maxHeight:400,//可拖动的最大高度
minWidth:50,//可拖动的最小宽度
minHeight:50//可拖动的最小高度
});
</script>
</body>
tooltip提示框
<body>
<a href="https://www.baidu.com" title="这是一个提示信息！" class="easyui-tooltip">hover me</a>
<a href="#">提示</a>
<a href="#" id="btn" title="保存" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>
<a href="#" id="btn2" title="保存">easyui</a>
<!-- jquery 2.0 js文件 -->
<script type="text/javascript" src="../easyUi/jquery-easyui-1.8.5/jquery.min.js"></script>
<!-- jquery easy ui 核心js 文件 -->
<script type="text/javascript" src="../easyUi/jquery-easyui-1.8.5/jquery.easyui.min.js"></script>
<!-- 信息本地化js文件 -->
<script type="text/javascript" src="../easyUi/jquery-easyui-1.8.5/locale/easyui-lang-zh_CN.js"></script>
<script>
$(function(){
$('#btn2').linkbutton({
iconCls:'icon-help',//图标类型
iconAlign:'right'，//图标在右
// selected:true//选中状态
});
$("#btn").linkbutton('select');//选中状态
});
</script>
</body>
layout布局和exists
<body class="easyui-layout">
<div data-options="region:'north',title:'North Title',split:true" style="height:100px;">哈哈哈</div>
<!-- <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> -->
<!-- <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div> -->
<div data-options="region:'west',title:'West',split:true" style="width:200px;">
<div id="aa" class="easyui-accordion" style="width:100%;height:100%;">
<div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:0px;">
<a href="javascript:addTab('首页','test13.html');" class="easyui-linkbutton" data-options="iconCls:'icon-tip',width:'100%',plain:true">首页</a>
<a href="javascript:addTab('表单验证','test03.html');" class="easyui-linkbutton" data-options="iconCls:'icon-tip',width:'100%',plain:true">表单验证</a>
<a href="javascript:addTab('dialog','test05.html');" class="easyui-linkbutton" data-options="iconCls:'icon-tip',width:'100%',plain:true">dialog</a>
<a href="javascript:addTab('toolbar','test06.html');" class="easyui-linkbutton" data-options="iconCls:'icon-tip',width:'100%',plain:true">toolbar</a>
<a href="javascript:addTab('draggable','test07.html');" class="easyui-linkbutton" data-options="iconCls:'icon-tip',width:'100%',plain:true">drappable</a>
<a href="javascript:addTab('droppable','test08.html');" class="easyui-linkbutton" data-options="iconCls:'icon-tip',width:'100%',plain:true">droppable</a>
<a href="javascript:addTab('resizable','test09.html');" class="easyui-linkbutton" data-options="iconCls:'icon-tip',width:'100%',plain:true">resizable</a>
<a href="javascript:addTab('tooltip','test10.html');" class="easyui-linkbutton" data-options="iconCls:'icon-tip',width:'100%',plain:true">tooltip</a>
</div>
<div title="Title2" data-options="iconCls:'icon-reload'" style="padding:0px;">
content2
</div>
<div title="Title3">
content3
</div>
</div>
</div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
<div id="tt" style="width:100%;height:100%;">
<!-- <div title="Tab1" data-options="closable:true" style="padding:20px;display:none;">
tab1
</div> -->
</div>
</div>
<!-- jquery 2.0 js文件 -->
<script type="text/javascript" src="../easyUi/jquery-easyui-1.8.5/jquery.min.js"></script>
<!-- jquery easy ui 核心js 文件 -->
<script type="text/javascript" src="../easyUi/jquery-easyui-1.8.5/jquery.easyui.min.js"></script>
<!-- 信息本地化js文件 -->
<script type="text/javascript" src="../easyUi/jquery-easyui-1.8.5/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
// $('#tt').tabs({
// border:false,
// onSelect:function(title){
// // alert(title+' is selected');
// }
// });
// 添加一个新的标签页面板（tab panel）
// function addTab(title,url){
// $('#tt').tabs('add',{
// title: title,
// content:'<iframe style="width:100%;height:100%" src='+url+'></iframe>',
// closable:true,
// });
// };
function addTab(title,url){
//下面开始判断
if(!$('#tt').tabs('exists',title)){
//不存在则add
$('#tt').tabs('add',{
title:title,
content:'<iframe style="width:100%;height:100%" src='+url+'></iframe>',
closable:true,
});
//存在则改为选中状态
}else{
$('#tt').tabs('select',title);
}
//tabClose();
}
$('#tt').tabs({
tools:[{
iconCls:'icon-add',
handler:function(){
$('#tt').tabs('add',{
title:'New Tab',
content:'Tab Body',
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});
}
},{
iconCls:'icon-save',
handler:function(){
alert('save')
}
}]
});
</script>
</body>