EasyUI簡介
1> 網(wǎng)址：www.jeasyui.com，下載并參考學習<<jQuery EasyUI v1.3.5官方API中文版.exe>>手冊
2> 什么是jQuery-EasyUI
- 是一種第三方組織開發(fā)的一款基于jQuery的，簡單易用的，功能強大的
WEB[后臺前端]JavaScript現(xiàn)成的組件庫 - 注意：今天的EasyUI組件庫的版本較高，需要高版本瀏覽器支持，
中低版本瀏覽器會有不能正常執(zhí)行的情況
3> JavaScript，AJAX，JSON，jQuery，EasyUI分別能解決什么問題
- JS：基于瀏覽器對web頁面中的節(jié)點進行操作，比較麻煩
- jQuery：基于瀏覽器簡化對web頁面中的節(jié)點進行操作，做到了write less do more
- AJAX：基于瀏覽器與服務端進行局部刷新的異步通訊編程模式
- JSON：簡化自定義對象的創(chuàng)建與AJAX數(shù)據(jù)交換輕量級文本
- EasyUI：快速基于現(xiàn)成的組件創(chuàng)建自已的web頁面
- 組件：是指已經(jīng)由第三方開源組織寫好的，直接可以使用的功能界面，例如：form，layout，tree...
- 注意：我們學的都是零散的組件，項目中需要將其裝配起來，方可構建完整的web頁面，
EasyUI只是眾多前端WEB組件之一(EasyUI / EXT / GoogleUI)
4> jQuery-EasyUI快速入門----可折疊功能的面板
- 第一步：創(chuàng)建一個js-day05這么一個web工程
- 第二步：在WebRoot目錄下創(chuàng)建00-base.html
- 第三步：在WebRoot目錄下創(chuàng)建js和themes目錄，導入官方文件( 參見<< jquery-easyui-1.3.6文件夾>> )
- 第四步：在00-base.html 文件的<head>標簽中引入如下文件
<!-- 引入外部CSS文件 -->
<link rel="stylesheet" href="../themes/icon.css" type="text/css"></link>
<link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link>
<!-- 引入外部JS文件 -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
- 第五步：在00-base.html 文件的<body>標簽中創(chuàng)建如下<div>標簽
<div
id="p"
class="easyui-panel"
style="width:500px;height:200px;padding:10px;"
title="我的面板"
iconCls="icon-save"
collapsible="true">
內(nèi)容<br/>
內(nèi)容<br/>
內(nèi)容<br/>
內(nèi)容<br/>
</div>
EasyUI組件:
一)Layout布局
- 代碼:
- 基本布局:
<!-- 布局面板 -->
<div data-options="fit:true" id="cc" class="easyui-layout" style="width:600px;height:400px;">
<!-- 區(qū)域面板 -->
<div data-options="region:'north',title:'北',split:false,collapsible:true" style="height:100px;"></div>
<div data-options="region:'south',title:'南',split:false,collapsible:true" style="height:100px;"></div>
<div data-options="region:'east',title:'東',split:false,collapsible:false,minWidth:150,maxWidth:150" style="width:100px;"></div>
<div data-options="region:'west',title:'西',split:false,collapsible:false,minWidth:150,maxWidth:150" style="width:100px;"></div>
<div data-options="region:'center',title:'中',iconCls:'icon-reload',href:'/js-day05/06_image.html',collapsible:false" style="padding:5px;background:#eee;"></div>
</div>
- 拆分嵌套:
<body class="easyui-layout">
<!-- 北 -->
<div data-options="region:'north'" style="height:150px"></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>
</div>
</div>
</body>
- js調(diào)用:
<script type="text/javascript">
//瀏覽器加載web頁面時觸發(fā)
$(function(){
//將北邊面板折疊，字符串雙引單引均可
$('#cc').layout('collapse','north');
//休息3秒
window.setTimeout(function(){
//將南邊面板折疊，字符串雙引單引均可
$('#cc').layout('collapse','south');
},"3000");
});
</script>
二)Accordion分類
- 代碼:
<!-- 容器 -->
<div data-options="border:true,animate:true,multiple:false,selected:-1" id="aa" class="easyui-accordion" style="width:300px;height:500px;">
<!-- 面板 -->
<div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
內(nèi)容1
</div>
<div title="Title2" data-options="iconCls:'icon-reload'" style="padding:10px;">
內(nèi)容2
</div>
<div title="Title3" data-options="iconCls:'icon-reload',collapsible:true">
內(nèi)容3
</div>
</div>
- js調(diào)用:
<script type="text/javascript">
$(function(){
//增加一個面板
$("#aa").accordion("add",{
"title":"Title4",
"content":"內(nèi)容4",
"selected":false,
"iconCls":"icon-search"
});
//休息3秒
window.setTimeout(function(){
//刪除4號面板
$("#aa").accordion("remove",3);
//取消選擇1號面板
$("#aa").accordion("unselect",0);
},"3000");
});
</script>
三)LinkButton鏈接按鈕
- 代碼:
<a id="btn-add" class="easyui-linkbutton" data-options="iconCls:'icon-add'">
增加
</a>
<a id="btn-find" class="easyui-linkbutton" data-options="iconCls:'icon-search'">
查詢
</a>
<a id="btn-update" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">
修改
</a>
<a id="btn-delete" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">
刪除
</a>
- js調(diào)用:
<script type="text/javascript">
/*
$("#btn-add").click(function(){
//將該按失效
$("#btn-add").linkbutton("disable");
});
$("#btn-add").dblclick(function(){
//將該按失效
$("#btn-add").linkbutton("disable");
});
*/
//參數(shù)一：字符串類型的事件，多個事件之間通過空格分隔，事件名稱符合jquery事件名寫法
//參數(shù)二：處理函數(shù)
$("#btn-add").bind("click dblclick",function(){
//將該按失效
$("#btn-add").linkbutton("disable");
});
</script>
四)Tabs選項卡
- 代碼:
<!-- 容器面板 -->
<div
id="tt"
class="easyui-tabs"
style="width:500px;height:250px;"
data-options="plain:false,border:true,tools:[{
iconCls:'icon-add',
handler:function(){
alert('添加')
}
},{
iconCls:'icon-remove',
handler:function(){
alert('刪除')
}
}],selected:-1">
<!-- 選項卡面板 -->
<div title="Tab1" data-options="closable:true" style="padding:20px">
tab1
</div>
<div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;">
tab2
</div>
<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;">
tab3
</div>
</div>
- js調(diào)用:
<script type="text/javascript">
$(document).ready(function(){
$("#tt").tabs("add",{
"title":"Tab4",
"content":"tab4",
"selected":false,
"closable":true
});
});
</script>
<script type="text/javascript">
//定位四個按鈕，同時添加單擊事件
$("a").click(function(){
//獲取按鈕的文本
var tip = $(this).text();
//去空格
tip = $.trim(tip);
//如果是"增加部門"
if("增加部門" == tip){
//是否已有相同的tabs選項卡打開
var flag = $("#tt").tabs("exists",tip);
//如果不存在相同的tabs選項卡打開
if(!flag){
//創(chuàng)建一個tabs選項卡
$("#tt").tabs("add",{
"title":tip,
"href":"${pageContext.request.contextPath}/addGroup.jsp",
"selected":true,
"closable":true
});
}
}
});
</script>
五)Pagination分頁框
- 代碼:
<!--
total：記錄總數(shù)100
pageSize：每頁顯示多少條記錄5
pageNumber：當前頁號1
pageList:[5,10,15]表示可供選擇中每頁顯示多少條記錄，
注意：pageSize的值必須是pageList數(shù)組值之一
-->
<div
id="pp"
class="easyui-pagination"
data-options="total:100,pageSize:5,pageNumber:1,pageList:[5,10,15],showPageList:true,showRefresh:false,afterPageText:'頁'"
style="background:#efefef;border:1px solid #ccc;width:400px">
</div>
- js調(diào)用:
<script type="text/javascript">
$("#pp").pagination({
//pageNumber當前頁號，例如1
//pageSize獲取多少條記錄，例如：5
//以上二個參數(shù)，需要誰，就接收誰，不一定二個都同時出現(xiàn)，參數(shù)名可以任意
"onSelectPage":function(pageNumber,pageSize){
alert(pageNumber + ":" + pageSize);
}
});
</script>
