jquery-easyUI第一篇【介绍、入门、使用常用的组件】
什么是easyUI
我们可以看官方对easyUI的介绍：
easyUI就是一个在Jquery的基础上封装了一些组件….我们在编写页面的时候，就可以直接使用这些组件…非常方便…easyUI多用于在后台的页面上…
在学习easyUI之前，我已经学过了bootstrap这么一个前端的框架了…因此学习easyUI并不困难….大多情况下，我们只要查询文档就可以找到对应的答案了。
easyUI快速入门
首先我们得去下载easyUI的资料…
然后在我们把对应的文件导入进去项目中，如下图：
在html文件的body标签内，写上如下的代码：
<!--
第一：写一个普通div标签
第二：提倡为div标签取一个id属性，将来用jquery好定位
第三：为普通div标签添加easyui组件的样式
所有的easyui组件的样式均按如下格式设置：
easyui-组件名
第四：如果要用easyui组件自身的属性时，必须在普通标签上书写data-options属性名,
内容为，key:value,key:value,如果value是string类型加引号，外面双引号，
则里面单引号
注意：要在普通标签中书写data-options属性的前提是：在普通标签上加class="easyui-组件名"
属性值大小写均可
-->
<div
id="xx"
class="easyui-panel"
style="width:500px;height:300px;padding:15px"
title="我的面板"
data-options="iconCls:'icon-save',collapsible:true,minimizable:false,maximizable:true">
这是我的第一个EasyUI程序
</div>效果：
关于样式的属性我们都会在data-options这个属性上设置的。
除了指定 class="easyui-panel"这样的方式来使用easyUI的组件，我们还可以使用javascript的方式来动态生成…代码如下所示：
<div id="p2" style="padding:10px;">
<p>panel content.</p>
</div>
<script type="text/javascript">
$('#p2').panel({
width: 500,
height: 150,
title: 'My Panel',
border: true,
collapsible: true
});
</script>
在使用easyUI的组件的时候，默认的是英文格式的。如果我们想要变成是中文格式，可以到以下的目录找到对应的JS，在项目中导入进去就行了！
语法
layout布局
layout能够帮助我们布局..
<!-- 布局 -->
<div id="layoutID" style="width:700px;height:500px" class="easyui-layout" data-options="fit:true">
<!-- 区域面板--北边 -->
<div data-options="region:'north',title:'北边',split:true,border:true,iconCls:'icon-remove',collapsible:true" style="height:100px;"></div>
<!-- 区域面板--南边 -->
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
<!-- 区域面板--东边 -->
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
<!-- 区域面板--西边 -->
<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
<!-- 区域面板--中间 -->
<div data-options="region:'center',title:'中间',href:'/js-day05/images/mm.html'" style="padding:5px;background:#eee;"></div>
</div>
<script type="text/javascript">
//easyui调用方法的语法如下：$('selector').组件名('method',parameter);
//浏览器加载jsp页面时触发
$(function(){
//将北边折叠
$('#layoutID').layout('collapse','north');
//休息3秒
window.setTimeout(function(){
//将南边折叠
$("#layoutID").layout("collapse","south");
//将北边展开
$('#layoutID').layout('expand','north');
window.setTimeout(function(){
//将南边展开
$("#layoutID").layout("expand","south");
},3000);
},3000);
});
</script>嵌套
当然了，我们的页面不可能只有5个模块，可能还有很多子模块。我们是可以嵌套的。如以下的代码：
<div id="layoutID" class="easyui-layout" data-options="fit:true">
<!-- 北 -->
<div data-options="region:'north'" style="height:100px"></div>
<!-- 中 -->
<div data-options="region:'center'">
<div class="easyui-layout" data-options="fit:true">
<!-- 西 -->
<div data-options="region:'west'" style="width:200px"></div>
<!-- 中 -->
<div data-options="region:'center'">
<div class="easyui-layout" data-options="fit:true">
<!-- 北 -->
<div data-options="region:'north'" style="height:100px"></div>
<!-- 中 -->
<div data-options="region:'center'"></div>
</div>
</div>
</div>
</div>
</div> accordion分类
<!-- 容器 -->
<div
id="accordionID"
class="easyui-accordion"
data-options="fit:false,border:true,animate:true,multiple:false,selected:-1"
style="width:300px;height:400px;">
<!-- 面板 -->
<div title="标题1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
北京
</div>
<div title="标题2" data-options="iconCls:'icon-reload'" style="padding:10px;">
上海
</div>
<div title="标题3">
广州
</div>
<div title="标题4" data-options="collapsible:true">
深圳
</div>
</div>
<script type="text/javascript">
//当浏览器加载web页面时触发
$(function(){
//增加一个面板
//$('selector').plugin('method', parameter);
$("#accordionID").accordion("add",{
"title" : "标题5",
"iconCls" : "icon-add",
"content" : "武汉",
"selected" : false
});
//休息3秒
window.setTimeout(function(){
//移除标题1面板
$("#accordionID").accordion("remove",0);
//取消面板2选中
$("#accordionID").accordion("unselect",0);
//面板3选中
$("#accordionID").accordion("select",1);
},3000);
});
</script>有格式的按钮linkbutton
<a
id="btn_add"
href="#"
class="easyui-linkbutton"
data-options="iconCls:'icon-add'">增加部门</a><p>
<a
id="btn_find"
href="#"
class="easyui-linkbutton"
data-options="iconCls:'icon-search'">查询部门</a><p>
<a
id="btn_update"
href="#"
class="easyui-linkbutton"
data-options="iconCls:'icon-edit'">修改部门</a><p>
<a
id="btn_delete"
href="#"
class="easyui-linkbutton"
data-options="iconCls:'icon-remove'">删除部门</a><p>
<script type="text/javascript">
//定位4个按钮
$("a").click(function(){
//获取你所单击的按钮的标题
var title = $(this).text();
//去空格
title = $.trim(title);
//显示
alert(title);
});
</script>
选项卡tabs
<!-- 容器 -->
<div
id="tabsID"
class="easyui-tabs"
style="width:500px;height:250px;"
data-options="plain:false,fit:false,border:true,tools:[
{
iconCls:'icon-add',
handler:function(){
alert('添加')
}
},
{
iconCls:'icon-save',
handler:function(){
alert('保存')
}
}
],selected:-1">
<!-- 选项卡 -->
<div title="标题1" style="padding:20px">
tab1<br/>
</div>
<div title="标题2" data-options="closable:true" style="overflow:auto;padding:20px;">
tab2
</div>
<div title="标题3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;">
tab3
</div>
</div>
分页pagination
<!-- 静态方式创建pagination
<div
id="paginationID"
class="easyui-pagination"
data-options="total:2000,pageSize:10"
style="background:#efefef;border:1px solid #ccc;"></div>
-->
<div
id="paginationID"
style="background:#efefef;border:1px solid #ccc;width:800px">
</div>
<script type="text/javascript">
//total表示总记录数
//pageSize表示每页显示多少条记录
//pageNumber表示当前页号
//pageList表示可供选择的每页显示多少条记录，pageSize变量的值必须属性pageList集合中的值之一
$("#paginationID").pagination({
"total" : 100,
"pageSize" : 10,
"pageNumber" : 1,
"pageList" : [10,20],
"layout" : ['list','sep','first','prev','manual','next','last','links']
});
</script>
<script type="text/javascript">
$("#paginationID").pagination({
"onSelectPage" : function(pageNumber,b){
alert("pageNumber=" + pageNumber);
alert("pageSize=" + b);
}
});
</script>
提示框validatebox
<div style="margin:200px"></div>
姓名：<input id="nameID"/><p/>
<script type="text/javascript">
$("#nameID").validatebox({
required : true,
validType : ['length[1,6]','zhongwen']
});
</script>
<script type="text/javascript">
//自定义规则:zhongwen
$.extend($.fn.validatebox.defaults.rules, {
//zhongwen规则名
zhongwen: {
//validator验证体
//value表示用户在文本框中输入的内容
validator: function(value){
//如果符合中文规则
if(/^[\u3220-\uFA29]*$/.test(value)){
return true;
}
},
//如果不符合中文规则，以下就是提示信息
message: '姓名必须为中文'
}
});
</script>
邮箱：<input id="emailID"/><p/>
<script type="text/javascript">
$("#emailID").validatebox({
required : true,
validType : ['length[1,30]','email']
});
</script>
密码：<input id="passwordID"/><p/>
<script type="text/javascript">
$("#passwordID").validatebox({
required : true,
validType : ['length[6,6]','english']
});
</script>
<script type="text/javascript">
$.extend($.fn.validatebox.defaults.rules, {
english: {
validator: function(value){
if(/^[a-zA-Z]*$/.test(value)){
return true;
}
},
message: '密码必须为英文'
}
});
</script>
ComboBox下拉列表框
<!--
城市：
<select id="cityID" class="easyui-combobox" name="city" style="width:200px;">
<option>aitem1</option>
<option>bitem2</option>
<option>bitem3</option>
<option>citem4</option>
<option>citem5</option>
<option>citem4</option>
<option>ditem5</option>
<option>ditem4</option>
<option>ditem5</option>
<option>ditem4</option>
<option>ditem5</option>
<option>eitem4</option>
<option>eitem5</option>
</select>
-->
城市：
<input id="cityID" name="city"/>
<script type="text/javascript">
//url表示请求的路径
//valueField表示传到服务器的值，看不见的
//textField表示页面中显示的值，看得见
$("#cityID").combobox({
url : "../json/city.json",
valueField :"id",
textField : "name"
});
</script>
<script type="text/javascript">
$(function(){
//为下拉组合框设置值
$("#cityID").combobox("setValue","长沙");
});
</script>
我们的json需要的格式也可以在文档中找到，我们只要对照着来写就行了。
[
{
"id":1,
"name":"北京"
},
{
"id":2,
"name":"上海"
},
{
"id":3,
"name":"广州"
},
{
"id":4,
"name":"深圳"
},
{
"id":5,
"name":"武汉"
}
] DateBox日期输入框
入职时间：
<input id="dd" type="text"/>
<script type="text/javascript">
$("#dd").datebox({
required : true
});
</script>
<script type="text/javascript">
$("#dd").datebox({
onSelect : function(mydate){
var year = mydate.getFullYear();
var month = mydate.getMonth() + 1;
var date = mydate.getDate();
alert(year+ "年" + month + "月" + date + "日");
}
});
</script>
NumberSpinner数字微调
商品数量:
<input id="ss" style="width:80px;">
<script type="text/javascript">
$("#ss").numberspinner({
min : 1,
max : 100,
value : 1
});
</script>
<p/>
你一共购买了<span id="num">1</span>个商品
<script type="text/javascript">
$("#ss").numberspinner({
onSpinUp : function(){
//获取数字微调的当前值
var value = $("#ss").numberspinner("getValue");
//将当前值设置到span标签中
$("#num").text(value).css("color","red");
},
onSpinDown : function(){
//获取数字微调的当前值
var value = $("#ss").numberspinner("getValue");
//将当前值设置到span标签中
$("#num").text(value).css("color","red");
}
});
</script>
<script type="text/javascript">
$("#ss").keyup(function(xxx){
//将浏览器产生的事件对象设置到myevent变量中
var myevent = xxx;
//获取按键的unicode编码
var code = myevent.keyCode;
//如果按钮是回车
if(code == 13){
//获取数字微调的当前值，因为$(this)此时表示的是文本框，直接获取value属性值即可
var value = $(this).val();
//将当前值设置到span标签中
$("#num").text(value).css("color","red");
}
});
</script>Slider滑动条
<div style="margin:100px">
身高：<span id="tip"></span>
<p/>
<div id="ss" style="height:400px;width:600px"></div>
</div>
<script type="text/javascript">
$("#ss").slider({
mode : "v",
min : 150,
max : 190,
rule : [ 150,'|',160,'|',170,'|',180,'|',190 ],
showTip : true,
value : 150
});
</script>
<script type="text/javascript">
$("#ss").slider({
onChange : function(newValue){
if(newValue == 160){
$("#tip").text("合格").css("color","blue");
}else if(newValue == 170){
$("#tip").text("良好").css("color","green");
}else if(newValue == 180){
$("#tip").text("优秀").css("color","pink");
}else if(newValue == 190){
$("#tip").text("卓越").css("color","red");
}
}
});
</script>ProgressBar进度条
<div id="p" style="width:400px;"></div>
<script type="text/javascript">
$("#p").progressbar({
width : 1300,
height : 100,
value : 0
});
</script>
<input id="startID" type="button" value="动起来" style="width:111px;height:111px;font-size:33px"/>
<script type="text/javascript">
//获取1到9之间的随机数，包含1和9
function getNum(){
return Math.floor(Math.random()*9)+1;
}
</script>
<script type="text/javascript">
var timeID = null;
//函数
function update(){
//获取随机值,例如：3
var num = getNum();
//获取进度条当前值，例如：99
var value = $("#p").progressbar("getValue");
//判断
if(value + num > 100){
//强行设置进度条的当前值为100
$("#p").progressbar("setValue",100);
//停止定时器
window.clearInterval(timeID);
//按钮正效
$("#startID").removeAttr("disabled");
}else{
//设置进度条的当前值为num+value的和
$("#p").progressbar("setValue",(value+num));
}
}
//定拉按钮，同时提供单击事件
$("#startID").click(function(){
//每隔300毫秒执行update方法
timeID = window.setInterval("update()",300);
//按钮失效
$(this).attr("disabled","disabled");
});
</script>Window窗口
<input type="button" value="打开窗口1" id="open1"/>
<input type="button" value="关闭窗口1" id="close1"/>
<div style="margin:600px"></div>
<div id="window1"></div>
<script type="text/javascript">
//定位打开窗口1按钮，同时添加单击事件
$("#open1").click(function(){
//打开窗口1
$("#window1").window({
title : "窗口1",
width : 840,
height : 150,
left : 200,
top : 100,
minimizable : false,
maximizable : false,
collapsible : false,
closable : false,
draggable : false,
resizable : true,
href : "/js-day06/empList.jsp"
});
});
</script>
<script type="text/javascript">
//定位关闭窗口1按钮，同时添加单击事件
$("#close1").click(function(){
//关闭窗口1
$("#window1").window("close");
});
</script>Dialog对话框窗口
<input type="button" value="打开对话框" id="open"/>
<div style="margin:600px"></div>
<div id="dd"></div>
<script type="text/javascript">
$("#open").click(function(){
$("#dd").dialog({
title : "对话框",
width : 300,
height : 400,
left : 200,
top : 100,
minimizable : false,
maximizable : false,
collapsible : false,
closable : false,
draggable : false,
resizable : true,
toolbar : [
{
text:'编辑',
iconCls:'icon-edit',
handler:function(){alert('edit')}
},
{
text:'帮助',
iconCls:'icon-help',
handler:function(){alert('help')}
}
],
buttons : [
{
text:'提交',
handler:function(){alert("提交");}
},
{
text:'关闭',
handler:function(){
//关闭对话框
$("#dd").dialog("close");
}
}
],
href : "/js-day06/easyui/10_form.html"
});
});
</script> Messager消息窗口
<input type="button" value="警告框"/><br/>
<input type="button" value="确认框"/><br/>
<input type="button" value="输入框"/><br/>
<input type="button" value="显示框"/><br/>
<div style="margin:100px"></div>
<script type="text/javascript">
//定位所有的button按钮，同时提供单击事件
$(":button").click(function(){
//获取value属性值
var tip = $(this).val();
//去空格
tip = $.trim(tip);
//如果警告框的话
if("警告框" == tip){
$.messager.alert("警告框","继续努力","warning",function(){
alert("关闭");
});
}else if("确认框" == tip){
$.messager.confirm("确认框","你确认要关闭该确认框吗?",function(value){
alert(value);
});
}else if("输入框" == tip){
$.messager.prompt("输入框","你期希的月薪是多少?",function(sal){
if(sal == undefined){
alert("请输入月薪");
}else{
if(sal<6000){
alert("你的谦虚了");
}else if(sal < 7000){
alert("你加点油了");
}else{
alert("你很不错了");
}
}
});
}else if("显示框" == tip){
$.messager.show({
showType : "slide",
showSpeed : 500,
width : 300,
height : 300,
title : "显示框",
msg : "这是内容",
timeout : 5000
});
}
});
</script>Tree树
<ul id="treeID"></ul>
<script type="text/javascript">
$("#treeID").tree({
url : "/js-day06/json/pro.json"
});
</script>
既然我们用到了JSON，那么我们可以在手册看它需要的格式是什么：
[
{
"id":1,
"text":"广东",
"state":"closed",
"children":[
{
"id":11,
"text":"广州" ,
"state":"closed",
"children":[
{
"id":111,
"text":"天河"
},
{
"id":112,
"text":"越秀"
}
]
},
{
"id":12,
"text":"深圳"
}
]
},
{
"id":2,
"text":"湖南"
}
]
如果您觉得这篇文章帮助到了您，可以给作者一点鼓励
