1. Resizable 屬性
- 原理: 頁面加載完畢后,EasyUI主文件會掃描頁面上的每個標簽,判斷這些標簽的class值是否以"easyui-"開頭,
如果是,則拿到之后的部分"resizable",EasyUI主文件會將當前的標簽處理(渲染)為"resizable"這種效果; - EasyUI 組件包括: 屬性,事件和方法;
// 以標簽的形式,實現resizable
// 其中,data-options 表示的是屬性值
<body>
<div class="easyui-resizable" data-options="maxWidth:800,maxHeight:600"
style="width:300px;height:300px;border:1px solid red">
</div>
</body>
// js 代碼實現resizable
<div id="rr" stype="width:100px;height:100px;border:1px solid red"></div>
$('#rr').resizable({
<!-- 屬性 --
maxWidth:800,
maxHeight:600
});
// 調用 EasyUI 組件的方法
$("#rr").resizable("方法名"); // 調用無參數的方法
$("#rr").resizable("方法名",參數1,參數2,...); // 調用有參數的方法
2. linkbutton 屬性
// 需要引入 easyui/themes/icon.css 樣式文件
<body>
<a class="easyui-linkbutton" data-options="iconCls:'icon-add'">點擊這里</a>
</body>
3. Messager 組件
<head>
<script type="text/javascript">
$(function(){
$("#btn2").click(function(){
$.messager.alert("嚴重錯誤","系統崩潰","error");
});
$("#btn3").click(function(){
$.messager.prompt("標題","輸入姓名");
});
$("#btn4").click(function(){
$.messager.confirm("標題","你確定刪除嗎?",function(data){
alert(data);
});
});
});
</script>
</head>
<body>
<button id="btn2">點擊這里</button>
<button id="btn3">點擊這里</button>
<button id="btn4">點擊這里</button>
</body>
4. Dialog 組件
<head>
<script type="text/javascript">
$(function(){
$("#rr").dialog({
title:'標題',
width:300,
height:150,
collapsible:true, // 是否顯示折疊按鈕
minimizable:true, // 是否顯示最小化按鈕
maximizable:true, // 是否顯示最大化按鈕
closed:true, // 是否在初始化的時候,關閉面板
// content:"顯示內容"
href:"test.jsp", // 加載遠程的內容
loadigMessage:"正在努力加載...",
modal:true, // 模態窗口,即必須處理完當前的工作,才能做頁面上的其他工作
// 頂部工具欄 toolbar
toolbar:[
{
text:'增加信息',
iconCls:'icon-add',
handler:function(){alert("add...")}
},{
text:'刪除信息',
iconCls:'icon-remove',
handler:function(){alert("delete...")}
}],
// 底部工具欄 buttons
buttons:[
{
text:'保存',
iconCls:'icon-save',
handler:function(){alert("save...")}
},{
text:'取消',
iconCls:'icon-cancel',
handler:function(){alert("cancel...")}
}]
});
});
</script>
</head>
<body>
<div id="rr"></div>
<input type="text" name="username" value="這是輸入框"/>
</body>
// 第二種方式: 使用頂部工具欄和底部工具欄
<head>
<script type="text/javascript">
$(function(){
$("#rr").dialog({
title:'標題',
width:300,
height:150,
collapsible:true, // 是否顯示折疊按鈕
minimizable:true, // 是否顯示最小化按鈕
maximizable:true, // 是否顯示最大化按鈕
closed:true, // 是否在初始化的時候,關閉面板
// content:"顯示內容"
href:"test.jsp", // 加載遠程的內容
loadigMessage:"正在努力加載...",
modal:true, // 模態窗口,即必須處理完當前的工作,才能做頁面上的其他工作
// 頂部工具欄 toolbar
toolbar:"#top",
// 底部工具欄 buttons
buttons:"#btn"
});
});
</script>
</head>
<body>
<div id="rr"></div>
<div id="top">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">增加</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">刪除</a>
</div>
<div id="btn">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">取消</a>
</div>
</body>
4.1 Panel 組件
- Dialog 組件擴展(繼承)自 Window 組件,window組件擴展自 Panel 組件
// 自適應 fit:true
<div style="height:500px;width:500px;backaground:red">
<div class="easyui-panel" style="height:100px;width:100px;background:#abcdef"
data-options="fit:true"></div>
</div>
5. ProgressBar 組件
<head>
<script type="text/javascript">
$(function(){
$("#rr").progressbar({
width:400,
height:30,
value:30,
text:"正在上傳中..."
});
});
function fn2(){
// 調用getValue方法,獲取進度條的值
var v =$("#rr").progressbar("getValue");
alert(v);
}
function fn3(){
$("#rr").progressbar("setValue",80);
}
</script>
</head>
<body>
<div id="rr"></div>
<button onclick="fn2()">點擊這里</button>
<button onclick="fn3()">點擊這里</button>
</body>
6. Tabs 組件
<head>
<script type="text/javascript">
$(function(){
$("#rr").tabs({
width:300,
height:150
});
});
</script>
function fn2(){
// 切換到"首頁"選項卡, 使用索引
$("#rr").tabs("select",0);
// 修改"首頁"的屬性
$("#rr").tabs("getTab",0).panel({href:'test.jsp'});
}
function fn3(){
// 判斷選項卡"標題2"是否存在
var f = $("#rr").tabs("exists","標題2");
if(f){
// 如果存在,則切換到"標題2"
$("#rr").tabs("select","標題2");
}else{
// 如果不存在,則創建
$("#rr").tabs("add",{
title:"標題2",
content:"內容",
closable:true
})
}
}
</head>
<body>
<div id="rr">
<div title="首頁"></div>
</div>
</body>
<button onclick="fn2()">加載遠程選項數據</button>
<button onclick="fn3()">增加選項卡2</button>
7. Form 組件
<head>
function fn2(){
var obj = {"username":"張三","userpass":"1234"};
$("#fm").form("load",obj);
}
function fn3(){
$("#fm").form("clear");
}
function fn4(){
$("#fm").form("submit",{
url:"test.jsp",
// 表單校驗
onSubmit:function(){
},
// 處理返回數據
success:function(data){
alert(data);
}
})
}
</head>
<body>
<button onclick="fn2()">加載數據</button>
<button onclick="fn3()">清除數據</button>
<button onclick="fn4()">發送數據</button>
<form id="fm" method="post">
username:<input type="text" name="username"/><br/>
password:<input type="password" name="userpass"/><br/>
</form>
</body>
8. Datagrid 組件
// datagrid_data2.json
// total 和 rows 兩個必須屬性
{
"total":10000,
"rows":
[
{"code":"101","name":"tom","price":"111"},
{"code":"102","name":"mary","price":"112"},
{"code":"103","name":"lucy","price":"113"},
{"code":"104","name":"jack","price":"114"},
{"code":"105","name":"piter","price":"115"},
{"code":"106","name":"smith","price":"116"},
{"code":"106","name":"smith","price":"116"},
{"code":"106","name":"smith","price":"116"},
{"code":"106","name":"smith","price":"116"},
{"code":"106","name":"smith","price":"116"},
{"code":"107","name":"saro","price":"117"}
]
}
// datagrid.html
<body>
// pagination 設置為true,表示在數據表格底部顯示分頁工具欄
<table class="easyui-datagrid" style="width:700px;height:350px"
data-options="url:'datagrid_data2.json',fitColumns:true,
singleSelect:true,pagination:true">
<thead>
<tr>
<th data-options="field:'code',width:100">Code</th>
<th data-options="field:'name',width:100">Name</th>
<th data-options="field:'price',width:100,align:'right'">Price</th>
</tr>
</thead>
</table>
</body>
參考資料