EasyUI官网
EasyUI概述
jQuery EasyUI是一组基于jQuery的UI插件集合，
而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界。
开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，
开发者只有需要了解一些简单的html标签。
jQuery EasyUI为我们提供了大多数UI控件的使用，
如：accordion，combobox，menu，dialog，tabs，tree，validatebox，window等等。
特点:
1.上手十分简单.
2.功能丰富
3.美观的UI界面.
EasyUI入门Demo
入门Demo
- 引入相关的JS和CSS文件:
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
- 在页面中添加html的标签;class属性里面全部小写,格式以"easyui-“开头,加上主键
（”-"后面更的英文单词被称为组件）
<div class="easyui-panel" data-options="title:'EasyUI面板'"
style="width:80px;hight:80px"></div>
<input type="text" class="easyui-databox" name="time"/>
- 每个组件都有对应的标签,例如linkbutton对应的标签为a标签
比如:
<a href="" class="easyui-linkbutton">EasyUI超链接按钮</a>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>EasyUI入门Demo</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">
<script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
<a href="#" class="easyui-linkbutton">EasyUI超链接按钮</a>
<div style="border: 1px solid red;width:180px;height: 180px">普通div</div>
<div class="easyui-panel" data-options="title:'EasyUI面板'" style="width:180px;height: 180px;">普通div</div>
</body>
</html>
EasyUI初始化方式
- 在标签中添加
class属性,将标签变成EasyUI的组件
<div class="easyui-panel" data-options="title:'EasyUI面板'"
style="width:180px;height: 180px;">普通div</div>
- 使用JS方式初始化组件
<div id="myPanel" data-options="title:'EasyUI面板'"
style="width:180px;height: 180px;">普通div</div>
<script>
$(function(){
$("#myPanel").panel();
});
</script>
EasyUI属性配置方式
- 在标签中是直接使用data-options=’“属性名”:“属性值”’
- 直接在标签中配置属性
<div class="easyui-panel" id="myPanel"
title="EasyUI面板"
style="width:180px;height:180px;">普通div</div>
- 在js中配置
<div id="myPanel">EasyUI面板</div>
<script>
$(function(){
$("#myPanel").panel(
{
width:180px,
height:180px,
title:"easyui面板"
}
);
});
</script>
这三种方式可以混合使用;js方式配置的属性会把页面的配置进行覆盖掉。
EasyUI初始化的原理
- 页面中扫描class=”easyui-”
- 实现准备好了一大堆的样式文本和样式类.
- 根据判断,到底是什么组件,根据不同的组件添加不同的样式文本和样式类
html() 和text()的区别: 都是获取元素内容;
html()可以给指定的标签设置内容可以加入标签;text()只能设置文本内容
$("p").text();/$("p").html();
$("p").text("Hello world!");
$("p").html("Hello <b>world</b>!");
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>EasyUI入门Demo</title>
<link rel="stylesheet" type="text/css" href="../jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">
<script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
<a class="easyui-linkbutton">EasyUI按钮</a>
</body>
</html>
href里面的路径写法".. 上一级" 或者直接写`href="jquery-easyui/themes/icon.css`
EasyUI核心
属性
所有的属性都定义在jQuery.fn.{plugin}.defaults里面。例如，对话框属性定义在jQuery.fn.dialog.defaults里面。
jQuery.fn.panel.defaults可以给组件添加默认的配置项
常用属性:
title string 在面板头部显示的标题文本。 null
iconCls string 设置一个16x16图标的CSS类ID显示在面板左上角。 null
width number 设置面板宽度。 auto
height number 设置面板高度。
headerCls string 添加一个CSS类ID到面板头部。 null
bodyCls string 添加一个CSS类ID到面板正文部分。
fit:填充父窗体
content string 面板主体内容。
collapsible boolean 定义是否显示可折叠按钮。 false
minimizable boolean 定义是否显示最小化按钮。 false
maximizable boolean 定义是否显示最大化按钮。 false
closable boolean 定义是否显示关闭按钮。
collapsed boolean 定义是否在初始化的时候折叠面板。
closed boolean 定义是否在初始化的时候关闭面板。
href:从远程加载内容
cache boolean 如果为true，在超链接载入时缓存面板内容。
loadingMessage string 在加载远程数据的时候在面板内显示一条消息。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>EasyUI入门Demo</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">
<script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
<style type="text/css">
.broder_top{
border-top:none;
border-right: none;
}
.broder_body{
border-right: none;
}
</style>
</head>
<body>
<!-- <a class="easyui-linkbutton">EasyUI按钮</a>
<br/> -->
<div style="border: solid 1px red;width: 200px;height: 200px;"></div>
<div id="myPanel"></div>
</body>
</html>
<script>
$(function(){
$("#myPanel").panel({
title:"我的面板",
iconCls:"icon-add",
width:200,
height:200 ,
headerCls:"broder_top",
bodyCls:"broder_body",
//content:"myPanel面板里面的内容",
collapsible:true,
minimizable:true,
maximizable:true,
closable:true,
collapsed:false,
fit:false,//是否填充
closed:false,
//href:"EasyUIDemo/a.html"
loadingMessage:"加载中..."
});
});
</script>
事件
所有的事件（回调函数）也都定义在jQuery.fn.{plugin}.defaults里面。
fn大多都是以on开头的,大部分复杂组件,都可以在初始化时,使用onxxx属性配置,值为事件响应
onCollapse 折叠是触发
onExpand 展开时触发
小部分简单组件,还是使用JQuery事件监听方式,使用on方法添加事件.例如linkbutton
linkButton没有事件，需要通过jquery的方式去处理.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>EasyUI入门Demo</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">
<script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
<style type="text/css">
.broder_top{
border-top:none;
border-right: none;
}
.broder_body{
border-right: none;
}
</style>
</head>
<body>
<!-- <a class="easyui-linkbutton">EasyUI按钮</a>
<br/> -->
<div style="border: solid 1px red;width: 200px;height: 200px;"></div>
<div id="myPanel"></div>
</body>
</html>
<script>
$(function(){
$("#myPanel").panel({
title:"我的面板",
iconCls:"icon-add",
width:200,
height:200 ,
headerCls:"broder_top",
bodyCls:"broder_body",
//content:"myPanel面板里面的内容",
collapsible:true,
minimizable:true,
maximizable:true,
closable:true,
collapsed:false,
fit:false,//是否填充
closed:false,
//href:"EasyUIDemo/a.html"
loadingMessage:"加载中...",
//组件的事件
onCollapse:function(){
alert("折叠面板的时候触发的事件")
}
});
});
</script>
方法
调用方法的语法：$('selector').plugin('method', parameter);
$(“组件ID”).panel(“open”);
$(“组件ID”).插件名(“方法名”)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>EasyUI入门Demo</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">
<script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
<style type="text/css">
.broder_top{
border-top:none;
border-right: none;
}
.broder_body{
border-right: none;
}
</style>
</head>
<body>
<a class="easyui-linkbutton" onclick="openPanel()">打开面板</a>
<a class="easyui-linkbutton" onclick="closePanel()">关闭面板</a>
<div id="myPanel"></div>
</body>
</html>
<script>
$(function(){
$("#myPanel").panel({
title:"我的面板",
iconCls:"icon-add",
width:200,
height:200 ,
headerCls:"broder_top",
bodyCls:"broder_body",
//content:"myPanel面板里面的内容",
collapsible:true,
minimizable:true,
maximizable:true,
closable:true,
collapsed:false,
fit:false,//是否填充
closed:false,
//href:"EasyUIDemo/a.html"
loadingMessage:"加载中..."
});
});
//-------使用组件方法------------------
function openPanel(){
// alert("open")
$("#myPanel").panel("open");
}
function closePanel(){
// alert("close")
$("#myPanel").panel("close");
}
</script>
常用组件
1.LinkButton按钮
使用$.fn.linkbutton.defaults重写默认值对象。
按钮组件使用超链接按钮创建。它使用一个普通的<a>标签进行展示。它可以同时显示一个图标和文本,或只有图标或文字。按钮的宽度可以动态和折叠/展开以适应它的文本标签。
常用的属性:
plain boolean 为true时显示简洁效果。
iconCls string 显示在按钮文字左侧的图标(16x16)的CSS类ID
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>EasyUI入门Demo</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">
<script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
<a id="mybtn"></a>
<a id="mybtn2" class="easyui-linkbutton" data-options="iconCls:'icon-search'" >mybtn点击事件</a>
</body>
</html>
<script>
$(function(){
$("#mybtn").linkbutton({
text:"easyui按钮",//按钮的文字
iconCls:"icon-add",//显示在按钮文字左侧的图标(16x16)的CSS类ID
disabled:false,//为true时禁用按钮。
iconAlign:"right",//按钮图标位置。可用值有：'left','right'。（该属性自1.3.2版开始可用）
plain:true//嵌入样式
});
//linkbutton方法:option 返回属性对象
var abtn = $("#mybtn").linkbutton("options")
console.log(abtn);
$("#mybtn2").bind('click',function(){
alert("mybtn2点击事件")
})
})
</script>
2.Window（窗口）
扩展自$.fn.panel.defaults。使用$.fn.window.defaults重写默认值对象。
窗口控件是一个浮动和可拖拽的面板可以用作应用程序窗口。默认情况下,窗口可以移动,调整大小和关闭。它的内容也可以被定义为静态html或要么通过ajax动态加载。
常用属性:
draggable boolean 定义是否能够拖拽窗口。 true
resizable boolean 定义是否能够改变窗口大小。
**modal boolean 定义是否将窗体显示为模式化窗口。 起遮蔽作用**
<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px"
data-options="iconCls:'icon-save',modal:true">
Window Content
</div>
通过ajax读取窗口内容。
$('#win').window('refresh', 'get_content.php');
3.Dialog（对话框窗口）
扩展自$.fn.window.defaults。使用$.fn.dialog.defaults重写默认值对象。
该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，
在底部有一个按钮栏。
对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具,
如collapsible,minimizable,maximizable工具等。
依赖window/linkbutton
<body>
<div id="mydialog">content 内容</div>
</body>
<script>
$(function(){
$("#mydialog").dialog({
title:"my dialog",
width:200,
height:200,
resizable:true //定义是否可以改变对话框窗口大小。
})
})
</script>
对话框上的按钮
dialog 以来window;window依赖panle,panle 有一个属性tools,该属性用于自定义工具菜单
定义的方式
- 使用array方式
数组，每个元素都包含’iconCls’和’handler’属性。
<body>
<div id="mydialog">content 内容</div>
</body>
<script>
$(function(){
$("#mydialog").dialog({
title:"my dialog",
width:200,
height:200,
resizable:true ,//定义是否可以改变对话框窗口大小。
tools:[
{
iconCls:"icon-add",
handler:function(){alert('add')}
},
{
iconCls:"icon-remove",
handler:function(){
alert("remove")
}
}
]
})
})
</script>
- 使用selector 选择器方式
<body>
<div id="mydialog">content 内容</div>
<div id="dd">
<a href="#" class="icon-add" onclick="javascript:alert('add')"></a>
<a href="#" class="icon-edit" onclick="javascript:alert('eidit')"></a>
</div>
</body>
<script>
$(function(){
$("#mydialog").dialog({
title:"my dialog",
width:200,
height:200,
resizable:true ,//定义是否可以改变对话框窗口大小。
tools: "#dd"
})
})
</script>
对话框窗口顶部工具栏
使用dialog属性toolbar
设置对话框窗口顶部工具栏，可用值有：
1) 一个数组，每一个工具栏中的工具属性都和linkbutton相同。
2) 一个选择器指定工具栏。
对话框窗口工具栏可以声明在<div>标签里面：
<div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'我的对话框',toolbar:'#tb',modal:true">
对话框窗口内容。
</div>
<div id="tb">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a>
</div>
对话框窗口工具栏也可以通过数组进行定义：
<div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'My Dialog',modal:true,
toolbar:[{
text:'编辑',
iconCls:'icon-edit',
handler:function(){alert('edit')}
},{
text:'帮助',
iconCls:'icon-help',
handler:function(){alert('help')}
}]">
对话框窗口内容。</div>
<body>
<div id="mydialog">content 内容</div>
<div id="dd">
<a href="#" class="icon-add" onclick="javascript:alert('add')"></a>
<a href="#" class="icon-edit" onclick="javascript:alert('eidit')"></a>
</div>
<div id="bb">
<a class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="javascript:alert('add')"></a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="javascript:alert('remove')"></a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onclick="javascript:alert('edit')"></a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="javascript:alert('search')"></a>
</div>
</body>
<script>
$(function(){
$("#mydialog").dialog({
title:"my dialog",
width:200,
height:200,
resizable:true ,//定义是否可以改变对话框窗口大小。
tools: "#dd", //自定义工具栏
toolbar:"#bb" //顶部工具栏
})
})
</script>
tools对应的位置是:
对话框窗口底部按钮 buttons
对话框窗口底部按钮，可用值有：
1) 一个数组，每一个按钮的属性都和linkbutton相同。
2) 一个选择器指定按钮栏。
按钮可以声明在<div>标签里面：
<div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'My Dialog',buttons:'#bb',modal:true">
对话框窗口内容。
</div>
<div id="bb">
<a href="#" class="easyui-linkbutton">保存</a>
<a href="#" class="easyui-linkbutton">关闭</a>
</div>
按钮也可以通过数组定义：
<div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'我的对话框',modal:true,
buttons:[{
text:'保存',
handler:function(){...}
},{
text:'关闭',
handler:function(){...}
}]">
对话框窗口内容。
</div>
<body>
<div id="mydialog">content 内容</div>
<div id="dd">
<a href="#" class="icon-add" onclick="javascript:alert('add')"></a>
<a href="#" class="icon-edit" onclick="javascript:alert('eidit')"></a>
</div>
<div id="bb">
<a class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="javascript:alert('add')"></a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="javascript:alert('remove')"></a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onclick="javascript:alert('edit')"></a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="javascript:alert('search')"></a>
</div>
<div id="bt">
<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-save'">保存</a>
<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-cancel'" >取消</a>
</div>
</body>
<script>
$(function(){
$("#mydialog").dialog({
title:"my dialog",
width:200,
height:200,
resizable:true ,//定义是否可以改变对话框窗口大小。
tools: "#dd", //自定义工具栏
toolbar:"#bb" ,//顶部工具栏
buttons:"#bt"//定义底部工具栏
})
})
</script>
4.Tables
Tabs（选项卡）
依赖panle 和linkbutton
使用$.fn.tabs.defaults重写默认值对象。
选项卡显示一批面板。但在同一个时间只会显示一个面板。
每个选项卡面板都有头标题和一些小的按钮工具菜单，
包括关闭按钮和其他自定义按钮。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>tabs选项卡</title>
<link rel="stylesheet" type="text/css" href="../jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../jquery-easyui/themes/icon.css">
<script type="text/javascript" src="../jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="../jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div id="mytabs">
<div title="tab1" data-options="closable:true">1111</div>
<div title="tab2" data-options="closable:true">2222</div>
<div title="tab3" data-options="closable:true" iconCls="icon-help">3333</div>
</div>
</body>
<script>
$(function(){
$("#mytabs").tabs({
width:300,
height:300
});
});
</script>
</html>
选项卡显示一批面板，但是在同一时间只能显示一个面板(panel)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>tabs选项卡</title>
<link rel="stylesheet" type="text/css" href="../jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../jquery-easyui/themes/icon.css">
<script type="text/javascript" src="../jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="../jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div id="mytabs">
<div title="tab1" data-options="closable:true">1111</div>
<div title="tab2" data-options="closable:true">2222</div>
<div title="tab3" data-options="closable:true" iconCls="icon-help">3333</div>
</div>
</body>
<script>
var mytab = $("#mytabs");
$(function(){
mytab.tabs({
width:300,
height:'auto'
});
//获取所有的选项卡面板
var mytabs = mytab.tabs("tabs");
//console.log(mytabs)
for(var i = 0;i<mytabs.length;i++){
console.log(mytabs[i].panel("options").tab.off().on("mouseover",{index:i},function(event){
mytab.tabs("select",event.data.index);
}) )
}
});
</script>
</html>
off() 去除绑定事件
动态添加选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>tabs选项卡</title>
<link rel="stylesheet" type="text/css" href="../jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../jquery-easyui/themes/icon.css">
<script type="text/javascript" src="../jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="../jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div id="mytabs">
</div>
<div id="t_tab">
<a class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="addTabs()"></a>
<a class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeTabs()"></a>
</div>
</body>
<script>
var mytab = $("#mytabs");
$(function(){
mytab.tabs({
width:300,
height:300,
tools:"#t_tab"
});
});
var index =0;
function addTabs(){
index++;
// 添加一个选中状态的选项卡面板
mytab.tabs('add',{
title: 'tab'+index,
selected: true,
closable:true,
content:"tab"+index
});
}
function removeTabs(){
//获取选中的选项卡 同时获取到索引
var tab = mytab.tabs('getSelected');
index = mytab.tabs('getTabIndex',tab);
mytab.tabs("close",index);//关闭一个选中的面板
}
</script>
</html>
967
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
