jQuery UI 之 EasyUI 快速入門

時間 2019-11-17

標籤 jquery easyui 快速入門欄目 JQuery 简体版

原文原文鏈接

jQuery EasyUI 基礎

轉載自(http://www.shouce.ren/api/view/a/3350)javascript

jQuery EasyUI 是一個基於 jQuery 的框架，集成了各類用戶界面插件。php

什麼是 jQuery EasyUI

jQuery EasyUI 框架提供了建立網頁所需的一切，幫助您輕鬆創建站點。css

easyui 是一個基於 jQuery 的框架，集成了各類用戶界面插件。
easyui 提供創建現代化的具備交互性的 javascript 應用的必要的功能。
使用 easyui，您不須要寫太多 javascript 代碼，通常狀況下您只須要使用一些 html 標記來定義用戶界面。
HTML 網頁的完整框架。
easyui 節省了開發產品的時間和規模。
easyui 很是簡單，可是功能很是強大。

jQuery EasyUI 下載

您能夠從 http://www.jeasyui.com/download/index.php 上下載您須要的 jQuery EasyUI 版本。html

輕鬆使用 jQuery 和 HTML5

jQuery EasyUI 提供易於使用的組件，它使 Web 開發人員快速地在流行的 jQuery 核心和 HTML5 上創建程序頁面。這些功能使您的應用適合今天的網絡。有兩個方法聲明的 UI 組件:java

1. 直接在 HTML 聲明組件。node

<div class="easyui-dialog" style="width:400px;height:200px"
data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}">
dialog content.
</div>

複製

2. 編寫 JavaScript 代碼來建立組件。mysql

<input id="cc" style="width:200px" />

複製

$('#cc').combobox({
url: ...,
required: true,
valueField: 'id',
textField: 'text'
});

jQuery EasyUI 應用

數據收集並妥善管理數據是網絡應用共同的必要。CRUD 容許咱們生成頁面列表，並編輯數據庫記錄。本教程將向你演示如何使用 jQuery EasyUI 框架實現一個 CRUD DataGrid。jquery

咱們將使用下面的插件：web

datagrid：向用戶展現列表數據。
dialog：建立或編輯一條單一的用戶信息。
form：用於提交表單數據。
messager：顯示一些操做信息。

步驟 1：準備數據庫

咱們將使用 MySql 數據庫來存儲用戶信息。建立數據庫和 'users' 表。ajax

步驟 2：建立 DataGrid 來顯示用戶信息

建立沒有 javascript 代碼的 DataGrid。

<table id="dg" title="My Users" class="easyui-datagrid" style="width:550px;height:250px"
url="get_users.php"
toolbar="#toolbar"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="firstname" width="50">First Name</th>
<th field="lastname" width="50">Last Name</th>
<th field="phone" width="50">Phone</th>
<th field="email" width="50">Email</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>
</div>

複製

咱們不須要寫任何的 javascript 代碼，就能向用戶顯示列表，以下圖所示：

DataGrid 使用 'url' 屬性，並賦值爲 'get_users.php'，用來從服務器檢索數據。

get_users.php 文件的代碼

$rs = mysql_query('select * from users');
$result = array();
while($row = mysql_fetch_object($rs)){
array_push($result, $row);
}
echo json_encode($result);

複製

步驟 3：建立表單對話框

咱們使用相同的對話框來建立或編輯用戶。

<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
closed="true" buttons="#dlg-buttons">
<div class="ftitle">User Information</div>
<form id="fm" method="post">
<div class="fitem">
<label>First Name:</label>
<input name="firstname" class="easyui-validatebox" required="true">
</div>
<div class="fitem">
<label>Last Name:</label>
<input name="lastname" class="easyui-validatebox" required="true">
</div>
<div class="fitem">
<label>Phone:</label>
<input name="phone">
</div>
<div class="fitem">
<label>Email:</label>
<input name="email" class="easyui-validatebox" validType="email">
</div>
</form>
</div>
<div id="dlg-buttons">
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
</div>

複製

這個對話框已經建立，也沒有任何的 javascript 代碼:。

步驟 4：實現建立和編輯用戶

當建立用戶時，打開一個對話框並清空表單數據。

function newUser(){
$('#dlg').dialog('open').dialog('setTitle','New User');
$('#fm').form('clear');
url = 'save_user.php';
}

複製

當編輯用戶時，打開一個對話框並從 datagrid 選擇的行中加載表單數據。

var row = $('#dg').datagrid('getSelected');
if (row){
$('#dlg').dialog('open').dialog('setTitle','Edit User');
$('#fm').form('load',row);
url = 'update_user.php?id='+row.id;
}

複製

'url' 存儲着當保存用戶數據時表單回傳的 URL 地址。

步驟 5：保存用戶數據

咱們使用下面的代碼保存用戶數據：

function saveUser(){
$('#fm').form('submit',{
url: url,
onSubmit: function(){
return $(this).form('validate');
},
success: function(result){
var result = eval('('+result+')');
if (result.errorMsg){
$.messager.show({
title: 'Error',
msg: result.errorMsg
});
} else {
$('#dlg').dialog('close'); // close the dialog
$('#dg').datagrid('reload'); // reload the user data
}
}
});
}

複製

提交表單以前，'onSubmit' 函數將被調用，該函數用來驗證表單字段值。當表單字段值提交成功，關閉對話框並從新加載 datagrid 數據。

步驟 6：刪除一個用戶

咱們使用下面的代碼來移除一個用戶：

function destroyUser(){
var row = $('#dg').datagrid('getSelected');
if (row){
$.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
if (r){
$.post('destroy_user.php',{id:row.id},function(result){
if (result.success){
$('#dg').datagrid('reload'); // reload the user data
} else {
$.messager.show({ // show error message
title: 'Error',
msg: result.errorMsg
});
}
},'json');
}
});
}
}

複製

移除一行以前,咱們將顯示一個確認對話框讓用戶決定是否真的移除該行數據。當移除數據成功以後，調用 'reload' 方法來刷新 datagrid 數據。

步驟 7：運行代碼

開啓 MySQL，在瀏覽器運行代碼。

在上一章節中，咱們使用對話框（dialog）組件建立了 CRUD 應用來建立和編輯用戶信息。本教程咱們將告訴您如何建立一個 CRUD 數據網格（DataGrid）。咱們將使用可編輯的數據網格（DataGrid）插件來完成這些 CRUD 操做動做。

步驟 1：在 HTML 標籤中定義數據網格（DataGrid）

<table id="dg" title="My Users" style="width:550px;height:250px"
toolbar="#toolbar" idField="id"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="firstname" width="50" editor="{type:'validatebox',options:{required:true}}">First Name</th>
<th field="lastname" width="50" editor="{type:'validatebox',options:{required:true}}">Last Name</th>
<th field="phone" width="50" editor="text">Phone</th>
<th field="email" width="50" editor="{type:'validatebox',options:{validType:'email'}}">Email</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('addRow')">New</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">Destroy</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">Save</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a>
</div>

複製

步驟 2：使用可編輯的數據網格（DataGrid）

$('#dg').edatagrid({
url: 'get_users.php',
saveUrl: 'save_user.php',
updateUrl: 'update_user.php',
destroyUrl: 'destroy_user.php'
});

複製

咱們應該提供 'url'、'saveUrl'、'updateUrl' 和 'destroyUrl' 屬性來編輯數據網格（DataGrid）：

url：從服務器端檢索用戶數據。
saveUrl：保存一個新的用戶數據。
updateUrl：更新一個已存在的用戶數據。
destroyUrl：刪除一個已存在的用戶數據。

步驟 3：寫服務器處理代碼

保存一個新的用戶（save_user.php）：

$firstname = $_REQUEST['firstname'];
$lastname = $_REQUEST['lastname'];
$phone = $_REQUEST['phone'];
$email = $_REQUEST['email'];
include 'conn.php';
$sql = "insert into users(firstname,lastname,phone,email) values('$firstname','$lastname','$phone','$email')";
@mysql_query($sql);
echo json_encode(array(
'id' => mysql_insert_id(),
'firstname' => $firstname,
'lastname' => $lastname,
'phone' => $phone,
'email' => $email
));

複製

更新一個已存在用戶（update_user.php）：

$id = intval($_REQUEST['id']);
$firstname = $_REQUEST['firstname'];
$lastname = $_REQUEST['lastname'];
$phone = $_REQUEST['phone'];
$email = $_REQUEST['email'];
include 'conn.php';
$sql="update users set firstname='$firstname',lastname='$lastname',phone='$phone',email='$email' where id=$id";
@mysql_query($sql);
echo json_encode(array(
'id' => $id,
'firstname' => $firstname,
'lastname' => $lastname,
'phone' => $phone,
'email' => $email
));

複製

刪除一個已存在用戶（destroy_user.php）：

$id = intval($_REQUEST['id']);
include 'conn.php';
$sql = "delete from users where id=$id";
@mysql_query($sql);
echo json_encode(array('success'=>true));

jQuery EasyUI 應用 - 建立展開行明細編輯表單的 CRUD 應用

當切換數據網格視圖（datagrid view）到 'detailview'，用戶能夠展開一行來顯示一些行的明細在行下面。這個功能容許您爲防止在明細行面板（panel）中的編輯表單（form）提供一些合適的佈局（layout）。在本教程中，咱們使用數據網格（datagrid）組件來減少編輯表單（form）所佔據空間。

步驟 1：在 HTML 標籤中定義數據網格（DataGrid）

<table id="dg" title="My Users" style="width:550px;height:250px"
url="get_users.php"
toolbar="#toolbar"
fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="firstname" width="50">First Name</th>
<th field="lastname" width="50">Last Name</th>
<th field="phone" width="50">Phone</th>
<th field="email" width="50">Email</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newItem()">New</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyItem()">Destroy</a>
</div>

複製

步驟 2：爲數據網格（DataGrid）應用明細視圖

$('#dg').datagrid({
view: detailview,
detailFormatter:function(index,row){
return '<div class="ddv"></div>';
},
onExpandRow: function(index,row){
var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv');
ddv.panel({
border:false,
cache:true,
href:'show_form.php?index='+index,
onLoad:function(){
$('#dg').datagrid('fixDetailRowHeight',index);
$('#dg').datagrid('selectRow',index);
$('#dg').datagrid('getRowDetail',index).find('form').form('load',row);
}
});
$('#dg').datagrid('fixDetailRowHeight',index);
}
});

複製

爲了爲數據網格（DataGrid）應用明細視圖，在 html 頁面頭部引入 'datagrid-detailview.js' 文件。

咱們使用 'detailFormatter' 函數來生成行明細內容。在這種狀況下，咱們返回一個用於放置編輯表單（form）的空的 <div>。當用戶點擊行展開按鈕（'+'）時，'onExpandRow' 事件將被觸發，咱們將經過 ajax 加載編輯表單（form）。調用 'getRowDetail' 方法來獲得行明細容器，因此咱們能查找到行明細面板（panel）。在行明細中建立面板（panel），加載從 'show_form.php' 返回的編輯表單（form）。

步驟 3：建立編輯表單（Form）

編輯表單（form）是從服務器加載的。

show_form.php

<form method="post">
<table class="dv-table" style="width:100%;background:#fafafa;padding:5px;margin-top:5px;">
<tr>
<td>First Name</td>
<td><input name="firstname" class="easyui-validatebox" required="true"></input></td>
<td>Last Name</td>
<td><input name="lastname" class="easyui-validatebox" required="true"></input></td>
</tr>
<tr>
<td>Phone</td>
<td><input name="phone"></input></td>
<td>Email</td>
<td><input name="email" class="easyui-validatebox" validType="email"></input></td>
</tr>
</table>
<div style="padding:5px 0;text-align:right;padding-right:30px">
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="saveItem(<?php echo $_REQUEST['index'];?>)">Save</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" plain="true" onclick="cancelItem(<?php echo $_REQUEST['index'];?>)">Cancel</a>
</div>
</form>

複製

步驟 4：保存或取消編輯

調用 'saveItem' 函數來保存一個用戶或者調用 'cancelItem' 函數來取消編輯。

function saveItem(index){
var row = $('#dg').datagrid('getRows')[index];
var url = row.isNewRecord ? 'save_user.php' : 'update_user.php?id='+row.id;
$('#dg').datagrid('getRowDetail',index).find('form').form('submit',{
url: url,
onSubmit: function(){
return $(this).form('validate');
},
success: function(data){
data = eval('('+data+')');
data.isNewRecord = false;
$('#dg').datagrid('collapseRow',index);
$('#dg').datagrid('updateRow',{
index: index,
row: data
});
}
});
}

複製

決定要回傳哪個 URL，而後查找表單（form）對象，並調用 'submit' 方法來提交表單（form）數據。當保存數據成功時，摺疊並更新行數據。

function cancelItem(index){
var row = $('#dg').datagrid('getRows')[index];
if (row.isNewRecord){
$('#dg').datagrid('deleteRow',index);
} else {
$('#dg').datagrid('collapseRow',index);
}
}

複製

當取消編輯動做時，若是該行是新行並且尚未保存，直接刪除該行，不然摺疊該行。

在本教程中，咱們將經過 jQuery EasyUI 框架建立一個 RSS 閱讀器。

咱們將使用如下插件:

layout：建立應用的用戶界面。
datagrid：顯示 RSS Feed 列表。
tree：顯示 feed 頻道。

步驟 1：建立佈局（Layout）

<body class="easyui-layout">
<div region="north" border="false" class="rtitle">
jQuery EasyUI RSS Reader Demo
</div>
<div region="west" title="Channels Tree" split="true" border="false" style="width:200px;background:#EAFDFF;">
<ul id="t-channels" url="data/channels.json"></ul>
</div>
<div region="center" border="false">
<div class="easyui-layout" fit="true">
<div region="north" split="true" border="false" style="height:200px">
<table id="dg"
url="get_feed.php" border="false" rownumbers="true"
fit="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="title" width="100">Title</th>
<th field="description" width="200">Description</th>
<th field="pubdate" width="80">Publish Date</th>
</tr>
</thead>
</table>
</div>
<div region="center" border="false" style="overflow:hidden">
<iframe id="cc" scrolling="auto" frameborder="0" style="width:100%;height:100%"></iframe>
</div>
</div>
</div>
</body>

複製

步驟 2：數據網格（DataGrid）處理事件

在這裏咱們要處理一些由用戶觸發的事件。

$('#dg').datagrid({
onSelect: function(index,row){
$('#cc').attr('src', row.link);
},
onLoadSuccess:function(){
var rows = $(this).datagrid('getRows');
if (rows.length){
$(this).datagrid('selectRow',0);
}
}
});

複製

本實例使用 'onSelect' 事件來顯示 feed 的內容，使用 'onLoadSuccess' 事件來選擇第一行。

步驟 3：樹形菜單（Tree）處理事件

當樹形菜單（Tree）數據已經加載，咱們須要選擇第一個葉子節點，調用 'select' 方法來選擇該節點。使用 'onSelect' 事件來獲得已選擇的節點，這樣咱們就能獲得對應的 'url' 值。最後咱們調用數據網格（DataGrid）的 'load' 方法來刷新 feed 列表數據。

$('#t-channels').tree({
onSelect: function(node){
var url = node.attributes.url;
$('#dg').datagrid('load',{
url: url
});
},
onLoadSuccess:function(node,data){
if (data.length){
var id = data[0].children[0].children[0].id;
var n = $(this).tree('find', id);
$(this).tree('select', n.target);
}
}
});

jQuery EasyUI 拖放

本教程向您展現如何使 HTML 元素可拖動，在本例中，咱們將建立三個 DIV 元素而後啓用他們的拖動和放置。

首先，咱們建立三個 <div> 元素：

<div id="dd1" class="dd-demo"></div>
<div id="dd2" class="dd-demo"></div>
<div id="dd3" class="dd-demo"></div>

複製

對於第一個 <div> 元素，咱們經過默認值讓其能夠拖動。

$('#dd1').draggable();

複製

對於第二個 <div> 元素，咱們經過建立一個克隆（clone）了原來元素的代理（proxy）讓其能夠拖動。

$('#dd2').draggable({
proxy:'clone'
});

複製

對於第三個 <div> 元素，咱們經過建立自定義代理（proxy）讓其能夠拖動。

$('#dd3').draggable({
proxy:function(source){
var p = $('<div class="proxy">proxy</div>');
p.appendTo('body');
return p;
}
});

若是您可以經過您的 Web 應用簡單地實現拖動和放置，您就會知道一些特別的東西。經過 jQuery EasyUI，咱們在 Web 應用中能夠簡單地實現拖放功能。

在本教程中，咱們將向您展現如何建立一個啓用用戶拖動和放置用戶想買的商品的購物車頁面。購物籃中的物品和價格將更新。

顯示頁面上的商品

<ul class="products">
<li>
<a href="#" class="item">
<img src="images/shirt1.gif"/>
<div>
<p>Balloon</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="images/shirt2.gif"/>
<div>
<p>Feeling</p>
<p>Price:$25</p>
</div>
</a>
</li>
</ul>

複製

正如您所看到的上面的代碼，咱們添加一個包含一些 <li> 元素的 <ul> 元素來顯示商品。全部商品都有名字和價格屬性，它們包含在 <p> 元素中。

建立購物車

<div class="cart">
<h1>Shopping Cart</h1>
<table id="cartcontent" style="width:300px;height:auto;">
<thead>
<tr>
<th field="name" width=140>Name</th>
<th field="quantity" width=60 align="right">Quantity</th>
<th field="price" width=60 align="right">Price</th>
</tr>
</thead>
</table>
<p class="total">Total: $0</p>
<h2>Drop here to add to cart</h2>
</div>

複製

咱們使用數據網格（datagrid）來顯示購物籃中的物品。

拖動克隆的商品

$('.item').draggable({
revert:true,
proxy:'clone',
onStartDrag:function(){
$(this).draggable('options').cursor = 'not-allowed';
$(this).draggable('proxy').css('z-index',10);
},
onStopDrag:function(){
$(this).draggable('options').cursor='move';
}
});

複製

請注意，咱們把 draggable 屬性的值從 'proxy' 設置爲 'clone'，因此拖動元素將由克隆產生。

放置選擇商品到購物車中

$('.cart').droppable({
onDragEnter:function(e,source){
$(source).draggable('options').cursor='auto';
},
onDragLeave:function(e,source){
$(source).draggable('options').cursor='not-allowed';
},
onDrop:function(e,source){
var name = $(source).find('p:eq(0)').html();
var price = $(source).find('p:eq(1)').html();
addProduct(name, parseFloat(price.split('$')[1]));
}
});
var data = {"total":0,"rows":[]};
var totalCost = 0;
function addProduct(name,price){
function add(){
for(var i=0; i<data.total; i++){
var row = data.rows[i];
if (row.name == name){
row.quantity += 1;
return;
}
}
data.total += 1;
data.rows.push({
name:name,
quantity:1,
price:price
});
}
add();
totalCost += price;
$('#cartcontent').datagrid('loadData', data);
$('div.cart .total').html('Total: $'+totalCost);
}

複製

每當放置商品的時候，咱們首先獲得商品名稱和價格，而後調用 'addProduct' 函數來更新購物籃。

本教程將向您展現如何使用 jQuery EasyUI 建立一個學校課程表。咱們將建立兩個表格：在左側顯示學校科目，在右側顯示時間表。您能夠拖動學校科目並放置到時間表單元格上。學校科目是一個 <div class="item"> 元素，時間表單元格是一個 <td class="drop"> 元素。

顯示學校科目

<div class="left">
<table>
<tr>
<td><div class="item">English</div></td>
</tr>
<tr>
<td><div class="item">Science</div></td>
</tr>
</table>
</div>

複製

顯示時間表

<div class="right">
<table>
<tr>
<td class="blank"></td>
<td class="title">Monday</td>
<td class="title">Tuesday</td>
<td class="title">Wednesday</td>
<td class="title">Thursday</td>
<td class="title">Friday</td>
</tr>
<tr>
<td class="time">08:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
</table>
</div>

複製

拖動在左側的學校科目

$('.left .item').draggable({
revert:true,
proxy:'clone'
});

複製

放置學校科目在時間表單元格上

$('.right td.drop').droppable({
onDragEnter:function(){
$(this).addClass('over');
},
onDragLeave:function(){
$(this).removeClass('over');
},
onDrop:function(e,source){
$(this).removeClass('over');
if ($(source).hasClass('assigned')){
$(this).append(source);
} else {
var c = $(source).clone().addClass('assigned');
$(this).empty().append(c);
c.draggable({
revert:true
});
}
}
});

複製

正如您所看到的上面的代碼，當用戶拖動在左側的學校科目並放置到時間表單元格中時，onDrop 回調函數將被調用。咱們克隆從左側拖動的源元素並把它附加到時間表單元格上。當把學校科目從時間表的某個單元格拖動到其餘單元格，只需簡單地移動它便可。

jQuery EasyUI 菜單與按鈕

菜單（Menu）定義在一些 DIV 標記中，以下所示：

<div id="mm" class="easyui-menu" style="width:120px;">
<div onclick="javascript:alert('new')">New</div>
<div>
<span>Open</span>
<div style="width:150px;">
<div><b>Word</b></div>
<div>Excel</div>
<div>PowerPoint</div>
</div>
</div>
<div icon="icon-save">Save</div>
<div class="menu-sep"></div>
<div>Exit</div>
</div>

複製

當菜單建立以後是不顯示的，調用 'show' 方法顯示它或者調用 'hide' 方法隱藏它：

$('#mm').menu('show', {
left: 200,
top: 100
});

一般狀況下，使用 <button> 元素來建立按鈕，而連接按鈕（Link Button）則是使用 <a> 元素來建立的。因此實際上一個連接按鈕（Link Button）就是一個顯示爲按鈕樣式的 <a> 元素。

爲了建立連接按鈕（Link Button），全部您須要作的就是添加一個名爲 'easyui-linkbutton' 的 class 屬性到 <a> 元素：

<div style="padding:5px;background:#fafafa;width:500px;border:1px solid #ccc">
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel">Cancel</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-reload">Refresh</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-search">Query</a>
<a href="#" class="easyui-linkbutton">text button</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-print">Print</a>
</div>
<div style="padding:5px;background:#fafafa;width:500px;border:1px solid #ccc">
<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-cancel">Cancel</a>
<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-reload">Refresh</a>
<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-search">Query</a>
<a href="#" class="easyui-linkbutton" plain="true">text button</a>
<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-print">Print</a>
<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-help"></a>
<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a>
<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-back"></a>
</div>

複製

正如您所看到的，iconCls 屬性是一個 icon 的 CSS class 樣式，它在按鈕上顯示一個 icon 圖片。

有時候您須要禁用連接按鈕（Link Button）或者啓用它，下面的代碼演示瞭如何禁用一個連接按鈕（Link Button）：

$(selector).linkbutton('disable'); // call the 'disable' method

菜單按鈕（Menu Button）包含一個按鈕（button）和一個菜單（menu）組件，當點擊或移動鼠標到按鈕上，將顯示一個對應的菜單。

爲了定義一個菜單按鈕（Menu Button），您應該定義一個連接按鈕（Link Button）和一個菜單（menu），下面是一個實例：

<div style="background:#fafafa;padding:5px;width:200px;border:1px solid #ccc">
<a href="#" class="easyui-menubutton" menu="#mm1" iconCls="icon-edit">Edit</a>
<a href="#" class="easyui-menubutton" menu="#mm2" iconCls="icon-help">Help</a>
</div>
<div id="mm1" style="width:150px;">
<div iconCls="icon-undo">Undo</div>
<div iconCls="icon-redo">Redo</div>
<div class="menu-sep"></div>
<div>Cut</div>
<div>Copy</div>
<div>Paste</div>
<div class="menu-sep"></div>
<div iconCls="icon-remove">Delete</div>
<div>Select All</div>
</div>
<div id="mm2" style="width:100px;">
<div>Help</div>
<div>Update</div>
<div>About</div>
</div>

複製

如今已經定義好了一個菜單按鈕（Menu Button），您不須要寫任何的 javascript 代碼。

分割按鈕（Split Button）包含一個連接按鈕（Link Button）和一個菜單（Menu）。當用戶點擊或者鼠標懸停在向下箭頭區域，將會顯示一個對應的菜單。本實例演示瞭如何建立和使用分割按鈕（Split Button）。

咱們建立一個分割按鈕（Split Button）和一個連接按鈕（Link Button）：

<div style="border:1px solid #ccc;background:#fafafa;padding:5px;width:120px;">
<a href="#" class="easyui-splitbutton" menu="#mm" iconCls="icon-edit">Edit</a>
<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-help"></a>
</div>
<div id="mm" style="width:150px;">
<div iconCls="icon-undo">Undo</div>
<div iconCls="icon-redo">Redo</div>
<div class="menu-sep"></div>
<div>Cut</div>
<div>Copy</div>
<div>Paste</div>
<div class="menu-sep"></div>
<div>
<span>Open</span>
<div style="width:150px;">
<div>Firefox</div>
<div>Internet Explorer</div>
<div class="menu-sep"></div>
<div>Select Program...</div>
</div>
</div>
<div iconCls="icon-remove">Delete</div>
<div>Select All</div>
</div>

複製

如今已經定義好了一個分割按鈕（Split Button），您不須要寫任何的 javascript 代碼。

jQuery EasyUI 佈局

邊框佈局（border layout）提供五個區域：east、west、north、south、center。如下是一些一般用法：

north 區域能夠用來顯示網站的標語。
south 區域能夠用來顯示版權以及一些說明。
west 區域能夠用來顯示導航菜單。
east 區域能夠用來顯示一些推廣的項目。
center 區域能夠用來顯示主要的內容。

爲了應用佈局（layout），您應該肯定一個佈局（layout）容器，而後定義一些區域。佈局（layout）必須至少須要一個 center 區域，如下是一個佈局（layout）實例：

<div class="easyui-layout" style="width:400px;height:200px;">
<div region="west" split="true" title="Navigator" style="width:150px;">
<p style="padding:5px;margin:0;">Select language:</p>
<ul>
<li><a href="javascript:void(0)" onclick="showcontent('java')">Java</a></li>
<li><a href="javascript:void(0)" onclick="showcontent('cshape')">C#</a></li>
<li><a href="javascript:void(0)" onclick="showcontent('vb')">VB</a></li>
<li><a href="javascript:void(0)" onclick="showcontent('erlang')">Erlang</a></li>
</ul>
</div>
<div id="content" region="center" title="Language" style="padding:5px;">
</div>
</div>

複製

咱們在一個 <div> 容器中建立了一個邊框佈局（border layout），佈局（layout）把容器切割爲兩個部分，左邊是導航菜單，右邊是主要內容。

最後咱們寫一個 onclick 事件處理函數來檢索數據，'showcontent' 函數很是簡單：

function showcontent(language){
$('#content').html('Introduction to ' + language + ' language');
}

面板（Panel）容許您建立用於多種用途的自定義佈局。在本實例中，咱們使用面板（panel）和佈局（layout）插件來建立一個 msn 消息框。

咱們在區域面板中使用多個佈局（layout）。在消息框的頂部咱們放置一個查詢輸入框，同時在右邊放置一我的物圖片。在中間的區域咱們經過設置 split 屬性爲 true，把這部分切割爲兩部分，容許用戶改變區域面板的尺寸大小。

如下就是全部代碼：

<div class="easyui-panel" title="Complex Panel Layout" iconCls="icon-search" collapsible="true" style="padding:5px;width:500px;height:250px;">
<div class="easyui-layout" fit="true">
<div region="north" border="false" class="p-search">
<label>Search:</label><input></input>
</div>
<div region="center" border="false">
<div class="easyui-layout" fit="true">
<div region="east" border="false" class="p-right">
<img src="images/msn.gif"/>
</div>
<div region="center" border="false" style="border:1px solid #ccc;">
<div class="easyui-layout" fit="true">
<div region="south" split="true" border="false" style="height:60px;">
<textarea style="border:0;width:100%;height:100%;resize:none">Hi,I am easyui.</textarea>
</div>
<div region="center" border="false">
</div>
</div>
</div>
</div>
</div>
</div>
</div>

複製

咱們不須要寫任何的 javascript 代碼，它本身有很是強大的設計用戶界面的功能。

在本教程中，您將會學習到關於 easyui 摺疊面板（Accordion）的知識。摺疊面板（Accordion）包含一系列的面板（panel）。全部面板（panel）的頭部（header）都是可見的，可是一次僅僅顯示一個面板（panel）的 body 內容。當用戶點擊面板（panel）的頭部（header）時，該面板（panel）的 body 內容將可見，同時其餘面板（panel）的 body 內容將隱藏不可見。

咱們將建立三個面板（panel），第三個面板（panel）包含一個樹形菜單。

<div class="easyui-accordion" style="width:300px;height:200px;">
<div title="About Accordion" iconCls="icon-ok" style="overflow:auto;padding:10px;">
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
</div>
<div title="About easyui" iconCls="icon-reload" selected="true" style="padding:10px;">
easyui help you build your web page easily
</div>
<div title="Tree Menu">
<ul id="tt1" class="easyui-tree">
<li>
<span>Folder1</span>
<ul>
<li>
<span>Sub Folder 1</span>
<ul>
<li><span>File 11</span></li>
<li><span>File 12</span></li>
<li><span>File 13</span></li>
</ul>
</li>
<li><span>File 2</span></li>
<li><span>File 3</span></li>
</ul>
</li>
<li><span>File2</span></li>
</ul>
</div>
</div>

本教程將向您延時如何使用 easyui 建立一個 Tabs 組件。 Tabs 有多個能夠動態地添加或移除的面板（panel）。您可使用 Tabs 來在相同的頁面上顯示不一樣的實體。

Tabs 一次僅僅顯示一個面板（panel），每一個面板（panel）都有標題、圖標和關閉按鈕。當 Tabs 被選中時，將顯示對應的面板（panel）的內容。

從 HTML 標記建立 Tabs，包含一個 DIV 容器和一些 DIV 面板（panel）。

<div class="easyui-tabs" style="width:400px;height:100px;">
<div title="First Tab" style="padding:10px;">
First Tab
</div>
<div title="Second Tab" closable="true" style="padding:10px;">
Second Tab
</div>
<div title="Third Tab" iconCls="icon-reload" closable="true" style="padding:10px;">
Third Tab
</div>
</div>

複製

咱們建立一個帶有三個面板（panel）的 Tabs 組件，第二個和第三個面板（panel）能夠經過點擊關閉按鈕進行關閉。

經過使用 jQuery EasyUI 能夠很容易地添加 Tabs。您只須要調用 'add' 方法便可。

在本教程中，咱們將使用 iframe 動態地添加顯示在一個頁面上的 Tabs。當點擊添加按鈕，一個新的 tab 將被添加。若是 tab 已經存在，它將被激活。

步驟 1：建立 Tabs

<div style="margin-bottom:10px">
<a href="#" class="easyui-linkbutton" onclick="addTab('google','http://www.google.com')">google</a>
<a href="#" class="easyui-linkbutton" onclick="addTab('jquery','http://jquery.com/')">jquery</a>
<a href="#" class="easyui-linkbutton" onclick="addTab('easyui','http://jeasyui.com/')">easyui</a>
</div>
<div id="tt" class="easyui-tabs" style="width:400px;height:250px;">
<div title="Home">
</div>
</div>

複製

這個 html 代碼很是簡單,咱們建立了帶有一個名爲 'Home' 的 tab 面板的 Tabs。請注意，咱們不須要寫任何的 js 代碼。

步驟 2：實現 'addTab' 函數

function addTab(title, url){
if ($('#tt').tabs('exists', title)){
$('#tt').tabs('select', title);
} else {
var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
$('#tt').tabs('add',{
title:title,
content:content,
closable:true
});
}
}

複製

咱們使用 'exists' 方法來判斷 tab 是否已經存在，若是已存在則激活 tab。若是不存在則調用 'add' 方法來添加一個新的 tab 面板。

本教程將向您展現如何建立一個自動播放的 Tabs。 Tabs 組件顯示第一個 tab 面板，而後顯示第二個、第三個... 咱們將寫一些代碼來自動地切換 tab 面板，而後讓它循環。

步驟 1：建立 Tabs

<div id="tt" class="easyui-tabs" style="width:330px;height:270px;">
<div title="Shirt1" style="padding:20px;">
<img src="images/shirt1.gif">
</div>
<div title="Shirt2" style="padding:20px;">
<img src="images/shirt2.gif">
</div>
<div title="Shirt3" style="padding:20px;">
<img src="images/shirt3.gif">
</div>
<div title="Shirt4" style="padding:20px;">
<img src="images/shirt4.gif">
</div>
<div title="Shirt5" style="padding:20px;">
<img src="images/shirt5.gif">
</div>
</div>

複製

步驟 2：寫自動播放代碼

var index = 0;
var t = $('#tt');
var tabs = t.tabs('tabs');
setInterval(function(){
t.tabs('select', tabs[index].panel('options').title);
index++;
if (index >= tabs.length){
index = 0;
}
}, 3000);

複製

正如您所看到的，咱們調用 'tabs' 方法來獲得全部 tab 面板，並使用 'setInterval' 函數來切換他們。

一般狀況下，在 Windows XP 的資源管理器文件夾中，左側的面板（panel）包含一些常見任務。本教程向您展現如何經過 easyui 的面板（panel）插件來建立 XP 左側面板。

定義一些面板（panel）

咱們定義一些面板（panel），這些面板（panel）用來顯示一些任務。每一個面板（panel）應該至少有摺疊/展開工具按鈕。

代碼以下所示：

<div style="width:200px;height:auto;background:#7190E0;padding:5px;">
<div class="easyui-panel" title="Picture Tasks" collapsible="true" style="width:200px;height:auto;padding:10px;">
View as a slide show<br/>
Order prints online<br/>
Print pictures
</div>
<br/>
<div class="easyui-panel" title="File and Folder Tasks" collapsible="true" style="width:200px;height:auto;padding:10px;">
Make a new folder<br/>
Publish this folder to the Web<br/>
Share this folder
</div>
<br/>
<div class="easyui-panel" title="Other Places" collapsible="true" collapsed="true" style="width:200px;height:auto;padding:10px;">
New York<br/>
My Pictures<br/>
My Computer<br/>
My Network Places
</div>
<br/>
<div class="easyui-panel" title="Details" collapsible="true" style="width:200px;height:auto;padding:10px;">
My documents<br/>
File folder<br/><br/>
Date modified: Oct.3rd 2010
</div>
</div>