碼上歡樂
相關內容    簡體    繁體

jQuery UI 之 EasyUI 快速入門

本文轉載自   查看原文   2016-06-15 10:42   27248 

 

jQuery EasyUI 基礎

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

什么是 jQuery EasyUI

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

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

jQuery EasyUI 下載

您可以從 http://www.jeasyui.com/download/index.php 上下載您需要的 jQuery EasyUI 版本。

輕松使用 jQuery 和 HTML5

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

1. 直接在 HTML 聲明組件。

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

 

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

  1. <input id="cc" style="width:200px" />
復制

 

  1. $('#cc').combobox({
  2. url: ...,
  3. required: true,
  4. valueField: 'id',
  5. textField: 'text'
  6. });

 

jQuery EasyUI 應用

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

我們將使用下面的插件：

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

步驟 1：准備數據庫

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

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

創建沒有 javascript 代碼的 DataGrid。

  1. <table id="dg" title="My Users" class="easyui-datagrid" style="width:550px;height:250px"
  2. url="get_users.php"
  3. toolbar="#toolbar"
  4. rownumbers="true" fitColumns="true" singleSelect="true">
  5. <thead>
  6. <tr>
  7. <th field="firstname" width="50">First Name</th>
  8. <th field="lastname" width="50">Last Name</th>
  9. <th field="phone" width="50">Phone</th>
  10. <th field="email" width="50">Email</th>
  11. </tr>
  12. </thead>
  13. </table>
  14. <div id="toolbar">
  15. <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
  16. <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
  17. <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>
  18. </div>
復制

 

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

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

get_users.php 文件的代碼

  1. $rs = mysql_query('select * from users');
  2. $result = array();
  3. while($row = mysql_fetch_object($rs)){
  4. array_push($result, $row);
  5. }
  6.  
  7. echo json_encode($result);
復制

 

步驟 3：創建表單對話框

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

  1. <div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
  2. closed="true" buttons="#dlg-buttons">
  3. <div class="ftitle">User Information</div>
  4. <form id="fm" method="post">
  5. <div class="fitem">
  6. <label>First Name:</label>
  7. <input name="firstname" class="easyui-validatebox" required="true">
  8. </div>
  9. <div class="fitem">
  10. <label>Last Name:</label>
  11. <input name="lastname" class="easyui-validatebox" required="true">
  12. </div>
  13. <div class="fitem">
  14. <label>Phone:</label>
  15. <input name="phone">
  16. </div>
  17. <div class="fitem">
  18. <label>Email:</label>
  19. <input name="email" class="easyui-validatebox" validType="email">
  20. </div>
  21. </form>
  22. </div>
  23. <div id="dlg-buttons">
  24. <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
  25. <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
  26. </div>
復制

 

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

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

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

  1. function newUser(){
  2. $('#dlg').dialog('open').dialog('setTitle','New User');
  3. $('#fm').form('clear');
  4. url = 'save_user.php';
  5. }
復制

 

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

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

 

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

步驟 5：保存用戶數據

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

  1. function saveUser(){
  2. $('#fm').form('submit',{
  3. url: url,
  4. onSubmit: function(){
  5. return $(this).form('validate');
  6. },
  7. success: function(result){
  8. var result = eval('('+result+')');
  9. if (result.errorMsg){
  10. $.messager.show({
  11. title: 'Error',
  12. msg: result.errorMsg
  13. });
  14. } else {
  15. $('#dlg').dialog('close'); // close the dialog
  16. $('#dg').datagrid('reload'); // reload the user data
  17. }
  18. }
  19. });
  20. }
復制

 

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

步驟 6：刪除一個用戶

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

  1. function destroyUser(){
  2. var row = $('#dg').datagrid('getSelected');
  3. if (row){
  4. $.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
  5. if (r){
  6. $.post('destroy_user.php',{id:row.id},function(result){
  7. if (result.success){
  8. $('#dg').datagrid('reload'); // reload the user data
  9. } else {
  10. $.messager.show({ // show error message
  11. title: 'Error',
  12. msg: result.errorMsg
  13. });
  14. }
  15. },'json');
  16. }
  17. });
  18. }
  19. }
復制

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

步驟 7：運行代碼

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

 

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

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

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

 

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

  1. $('#dg').edatagrid({
  2. url: 'get_users.php',
  3. saveUrl: 'save_user.php',
  4. updateUrl: 'update_user.php',
  5. destroyUrl: 'destroy_user.php'
  6. });
復制

 

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

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

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

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

  1. $firstname = $_REQUEST['firstname'];
  2. $lastname = $_REQUEST['lastname'];
  3. $phone = $_REQUEST['phone'];
  4. $email = $_REQUEST['email'];
  5.  
  6. include 'conn.php';
  7.  
  8. $sql = "insert into users(firstname,lastname,phone,email) values('$firstname','$lastname','$phone','$email')";
  9. @mysql_query($sql);
  10. echo json_encode(array(
  11. 'id' => mysql_insert_id(),
  12. 'firstname' => $firstname,
  13. 'lastname' => $lastname,
  14. 'phone' => $phone,
  15. 'email' => $email
  16. ));
復制

 

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

  1. $id = intval($_REQUEST['id']);
  2. $firstname = $_REQUEST['firstname'];
  3. $lastname = $_REQUEST['lastname'];
  4. $phone = $_REQUEST['phone'];
  5. $email = $_REQUEST['email'];
  6.  
  7. include 'conn.php';
  8.  
  9. $sql="update users set firstname='$firstname',lastname='$lastname',phone='$phone',email='$email' where id=$id";
  10. @mysql_query($sql);
  11. echo json_encode(array(
  12. 'id' => $id,
  13. 'firstname' => $firstname,
  14. 'lastname' => $lastname,
  15. 'phone' => $phone,
  16. 'email' => $email
  17. ));
復制

 

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

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

 

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

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

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

  1. <table id="dg" title="My Users" style="width:550px;height:250px"
  2. url="get_users.php"
  3. toolbar="#toolbar"
  4. fitColumns="true" singleSelect="true">
  5. <thead>
  6. <tr>
  7. <th field="firstname" width="50">First Name</th>
  8. <th field="lastname" width="50">Last Name</th>
  9. <th field="phone" width="50">Phone</th>
  10. <th field="email" width="50">Email</th>
  11. </tr>
  12. </thead>
  13. </table>
  14. <div id="toolbar">
  15. <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newItem()">New</a>
  16. <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyItem()">Destroy</a>
  17. </div>
復制

 

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

  1. $('#dg').datagrid({
  2. view: detailview,
  3. detailFormatter:function(index,row){
  4. return '<div class="ddv"></div>';
  5. },
  6. onExpandRow: function(index,row){
  7. var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv');
  8. ddv.panel({
  9. border:false,
  10. cache:true,
  11. href:'show_form.php?index='+index,
  12. onLoad:function(){
  13. $('#dg').datagrid('fixDetailRowHeight',index);
  14. $('#dg').datagrid('selectRow',index);
  15. $('#dg').datagrid('getRowDetail',index).find('form').form('load',row);
  16. }
  17. });
  18. $('#dg').datagrid('fixDetailRowHeight',index);
  19. }
  20. });
復制

 

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

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

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

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

show_form.php
  1. <form method="post">
  2. <table class="dv-table" style="width:100%;background:#fafafa;padding:5px;margin-top:5px;">
  3. <tr>
  4. <td>First Name</td>
  5. <td><input name="firstname" class="easyui-validatebox" required="true"></input></td>
  6. <td>Last Name</td>
  7. <td><input name="lastname" class="easyui-validatebox" required="true"></input></td>
  8. </tr>
  9. <tr>
  10. <td>Phone</td>
  11. <td><input name="phone"></input></td>
  12. <td>Email</td>
  13. <td><input name="email" class="easyui-validatebox" validType="email"></input></td>
  14. </tr>
  15. </table>
  16. <div style="padding:5px 0;text-align:right;padding-right:30px">
  17. <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="saveItem(&lt;?php echo $_REQUEST['index'];?&gt;)">Save</a>
  18. <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" plain="true" onclick="cancelItem(&lt;?php echo $_REQUEST['index'];?&gt;)">Cancel</a>
  19. </div>
  20. </form>
復制

 

步驟 4：保存或取消編輯

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

  1. function saveItem(index){
  2. var row = $('#dg').datagrid('getRows')[index];
  3. var url = row.isNewRecord ? 'save_user.php' : 'update_user.php?id='+row.id;
  4. $('#dg').datagrid('getRowDetail',index).find('form').form('submit',{
  5. url: url,
  6. onSubmit: function(){
  7. return $(this).form('validate');
  8. },
  9. success: function(data){
  10. data = eval('('+data+')');
  11. data.isNewRecord = false;
  12. $('#dg').datagrid('collapseRow',index);
  13. $('#dg').datagrid('updateRow',{
  14. index: index,
  15. row: data
  16. });
  17. }
  18. });
  19. }
復制

 

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

  1. function cancelItem(index){
  2. var row = $('#dg').datagrid('getRows')[index];
  3. if (row.isNewRecord){
  4. $('#dg').datagrid('deleteRow',index);
  5. } else {
  6. $('#dg').datagrid('collapseRow',index);
  7. }
  8. }
復制

 

當取消編輯動作時，如果該行是新行而且還沒有保存，直接刪除該行，否則折疊該行。

 

 

在本教程中，我們將通過 jQuery EasyUI 框架創建一個 RSS 閱讀器。

我們將使用以下插件:

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

步驟 1：創建布局（Layout）

  1. &lt;body class="easyui-layout"&gt;
  2. <div region="north" border="false" class="rtitle">
  3. jQuery EasyUI RSS Reader Demo
  4. </div>
  5. <div region="west" title="Channels Tree" split="true" border="false" style="width:200px;background:#EAFDFF;">
  6. <ul id="t-channels" url="data/channels.json"></ul>
  7. </div>
  8. <div region="center" border="false">
  9. <div class="easyui-layout" fit="true">
  10. <div region="north" split="true" border="false" style="height:200px">
  11. <table id="dg" 
  12. url="get_feed.php" border="false" rownumbers="true"
  13. fit="true" fitColumns="true" singleSelect="true">
  14. <thead>
  15. <tr>
  16. <th field="title" width="100">Title</th>
  17. <th field="description" width="200">Description</th>
  18. <th field="pubdate" width="80">Publish Date</th>
  19. </tr>
  20. </thead>
  21. </table>
  22. </div>
  23. <div region="center" border="false" style="overflow:hidden">
  24. <iframe id="cc" scrolling="auto" frameborder="0" style="width:100%;height:100%"></iframe>
  25. </div>
  26. </div>
  27. </div>
  28. &lt;/body&gt;
復制

 

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

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

  1. $('#dg').datagrid({
  2. onSelect: function(index,row){
  3. $('#cc').attr('src', row.link);
  4. },
  5. onLoadSuccess:function(){
  6. var rows = $(this).datagrid('getRows');
  7. if (rows.length){
  8. $(this).datagrid('selectRow',0);
  9. }
  10. }
  11. });
復制

 

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

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

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

  1. $('#t-channels').tree({
  2. onSelect: function(node){
  3. var url = node.attributes.url;
  4. $('#dg').datagrid('load',{
  5. url: url
  6. });
  7. },
  8. onLoadSuccess:function(node,data){
  9. if (data.length){
  10. var id = data[0].children[0].children[0].id;
  11. var n = $(this).tree('find', id);
  12. $(this).tree('select', n.target);
  13. }
  14. }
  15. });

 

jQuery EasyUI 拖放

本教程向您展示如何使 HTML 元素可拖動，在本例中，我們將創建三個 DIV 元素然后啟用他們的拖動和放置。

首先，我們創建三個 <div> 元素：

  1. <div id="dd1" class="dd-demo"></div>
  2. <div id="dd2" class="dd-demo"></div>
  3. <div id="dd3" class="dd-demo"></div>
復制

 

對於第一個 <div> 元素，我們通過默認值讓其可以拖動。

  1. $('#dd1').draggable();
復制

 

對於第二個 <div> 元素，我們通過創建一個克隆（clone）了原來元素的代理（proxy）讓其可以拖動。

  1. $('#dd2').draggable({
  2. proxy:'clone'
  3. });
復制

 

對於第三個 <div> 元素，我們通過創建自定義代理（proxy）讓其可以拖動。

  1. $('#dd3').draggable({
  2. proxy:function(source){
  3. var p = $('<div class="proxy">proxy</div>');
  4. p.appendTo('body');
  5. return p;
  6. }
  7. });

 

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

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

顯示頁面上的商品

  1. <ul class="products">
  2. <li>
  3. <a href="#" class="item">
  4. <img src="images/shirt1.gif"/>
  5. <div>
  6. <p>Balloon</p>
  7. <p>Price:$25</p>
  8. </div>
  9. </a>
  10. </li>
  11. <li>
  12. <a href="#" class="item">
  13. <img src="images/shirt2.gif"/>
  14. <div>
  15. <p>Feeling</p>
  16. <p>Price:$25</p>
  17. </div>
  18. </a>
  19. </li>
  20. <!-- other products -->
  21. </ul>
復制

 

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

創建購物車

  1. <div class="cart">
  2. <h1>Shopping Cart</h1>
  3. <table id="cartcontent" style="width:300px;height:auto;">
  4. <thead>
  5. <tr>
  6. <th field="name" width=140>Name</th>
  7. <th field="quantity" width=60 align="right">Quantity</th>
  8. <th field="price" width=60 align="right">Price</th>
  9. </tr>
  10. </thead>
  11. </table>
  12. <p class="total">Total: $0</p>
  13. <h2>Drop here to add to cart</h2>
  14. </div>
復制

 

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

拖動克隆的商品

  1. $('.item').draggable({
  2. revert:true,
  3. proxy:'clone',
  4. onStartDrag:function(){
  5. $(this).draggable('options').cursor = 'not-allowed';
  6. $(this).draggable('proxy').css('z-index',10);
  7. },
  8. onStopDrag:function(){
  9. $(this).draggable('options').cursor='move';
  10. }
  11. });
復制

 

請注意，我們把 draggable 屬性的值從 'proxy' 設置為 'clone'，所以拖動元素將由克隆產生。

放置選擇商品到購物車中

  1. $('.cart').droppable({
  2. onDragEnter:function(e,source){
  3. $(source).draggable('options').cursor='auto';
  4. },
  5. onDragLeave:function(e,source){
  6. $(source).draggable('options').cursor='not-allowed';
  7. },
  8. onDrop:function(e,source){
  9. var name = $(source).find('p:eq(0)').html();
  10. var price = $(source).find('p:eq(1)').html();
  11. addProduct(name, parseFloat(price.split('$')[1]));
  12. }
  13. });
  14. var data = {"total":0,"rows":[]};
  15. var totalCost = 0;
  16. function addProduct(name,price){
  17. function add(){
  18. for(var i=0; i<data.total; i++){
  19. var row = data.rows[i];
  20. if (row.name == name){
  21. row.quantity += 1;
  22. return;
  23. }
  24. }
  25. data.total += 1;
  26. data.rows.push({
  27. name:name,
  28. quantity:1,
  29. price:price
  30. });
  31. }
  32. add();
  33. totalCost += price;
  34. $('#cartcontent').datagrid('loadData', data);
  35. $('div.cart .total').html('Total: $'+totalCost);
  36. }
復制

 

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

 

 

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

顯示學校科目

  1. <div class="left">
  2. <table>
  3. <tr>
  4. <td><div class="item">English</div></td>
  5. </tr>
  6. <tr>
  7. <td><div class="item">Science</div></td>
  8. </tr>
  9. <!-- other subjects -->
  10. </table>
  11. </div>
復制

 

顯示時間表

  1. <div class="right">
  2. <table>
  3. <tr>
  4. <td class="blank"></td>
  5. <td class="title">Monday</td>
  6. <td class="title">Tuesday</td>
  7. <td class="title">Wednesday</td>
  8. <td class="title">Thursday</td>
  9. <td class="title">Friday</td>
  10. </tr>
  11. <tr>
  12. <td class="time">08:00</td>
  13. <td class="drop"></td>
  14. <td class="drop"></td>
  15. <td class="drop"></td>
  16. <td class="drop"></td>
  17. <td class="drop"></td>
  18. </tr>
  19. <!-- other cells -->
  20. </table>
  21. </div>
復制

 

拖動在左側的學校科目

  1. $('.left .item').draggable({
  2. revert:true,
  3. proxy:'clone'
  4. });
復制

 

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

  1. $('.right td.drop').droppable({
  2. onDragEnter:function(){
  3. $(this).addClass('over');
  4. },
  5. onDragLeave:function(){
  6. $(this).removeClass('over');
  7. },
  8. onDrop:function(e,source){
  9. $(this).removeClass('over');
  10. if ($(source).hasClass('assigned')){
  11. $(this).append(source);
  12. } else {
  13. var c = $(source).clone().addClass('assigned');
  14. $(this).empty().append(c);
  15. c.draggable({
  16. revert:true
  17. });
  18. }
  19. }
  20. });
復制

 

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

 

jQuery EasyUI 菜單與按鈕

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

  1. <div id="mm" class="easyui-menu" style="width:120px;">
  2. <div onclick="javascript:alert('new')">New</div>
  3. <div>
  4. <span>Open</span>
  5. <div style="width:150px;">
  6. <div><b>Word</b></div>
  7. <div>Excel</div>
  8. <div>PowerPoint</div>
  9. </div>
  10. </div>
  11. <div icon="icon-save">Save</div>
  12. <div class="menu-sep"></div>
  13. <div>Exit</div>
  14. </div>
復制

當菜單創建之后是不顯示的，調用 'show' 方法顯示它或者調用 'hide' 方法隱藏它：

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

 

通常情況下，使用 <button> 元素來創建按鈕，而鏈接按鈕（Link Button）則是使用 <a> 元素來創建的。所以實際上一個鏈接按鈕（Link Button）就是一個顯示為按鈕樣式的 <a> 元素。

為了創建鏈接按鈕（Link Button），所有您需要做的就是添加一個名為 'easyui-linkbutton' 的 class 屬性到 <a> 元素：

  1. <div style="padding:5px;background:#fafafa;width:500px;border:1px solid #ccc">
  2. <a href="#" class="easyui-linkbutton" iconCls="icon-cancel">Cancel</a>
  3. <a href="#" class="easyui-linkbutton" iconCls="icon-reload">Refresh</a>
  4. <a href="#" class="easyui-linkbutton" iconCls="icon-search">Query</a>
  5. <a href="#" class="easyui-linkbutton">text button</a>
  6. <a href="#" class="easyui-linkbutton" iconCls="icon-print">Print</a>
  7. </div>
  8.  
  9. <div style="padding:5px;background:#fafafa;width:500px;border:1px solid #ccc">
  10. <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-cancel">Cancel</a>
  11. <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-reload">Refresh</a>
  12. <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-search">Query</a>
  13. <a href="#" class="easyui-linkbutton" plain="true">text button</a>
  14. <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-print">Print</a>
  15. <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-help"></a>
  16. <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a>
  17. <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-back"></a>
  18. </div>
復制

 

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

有時候您需要禁用鏈接按鈕（Link Button）或者啟用它，下面的代碼演示了如何禁用一個鏈接按鈕（Link Button）：

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

 

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

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

  1. <div style="background:#fafafa;padding:5px;width:200px;border:1px solid #ccc">
  2. <a href="#" class="easyui-menubutton" menu="#mm1" iconCls="icon-edit">Edit</a>
  3. <a href="#" class="easyui-menubutton" menu="#mm2" iconCls="icon-help">Help</a>
  4. </div>
  5. <div id="mm1" style="width:150px;">
  6. <div iconCls="icon-undo">Undo</div>
  7. <div iconCls="icon-redo">Redo</div>
  8. <div class="menu-sep"></div>
  9. <div>Cut</div>
  10. <div>Copy</div>
  11. <div>Paste</div>
  12. <div class="menu-sep"></div>
  13. <div iconCls="icon-remove">Delete</div>
  14. <div>Select All</div>
  15. </div>
  16. <div id="mm2" style="width:100px;">
  17. <div>Help</div>
  18. <div>Update</div>
  19. <div>About</div>
  20. </div>
復制

 

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

 

 

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

我們創建一個分割按鈕（Split Button）和一個鏈接按鈕（Link Button）：

  1. <div style="border:1px solid #ccc;background:#fafafa;padding:5px;width:120px;">
  2. <a href="#" class="easyui-splitbutton" menu="#mm" iconCls="icon-edit">Edit</a>
  3. <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-help"></a>
  4. </div>
  5. <div id="mm" style="width:150px;">
  6. <div iconCls="icon-undo">Undo</div>
  7. <div iconCls="icon-redo">Redo</div>
  8. <div class="menu-sep"></div>
  9. <div>Cut</div>
  10. <div>Copy</div>
  11. <div>Paste</div>
  12. <div class="menu-sep"></div>
  13. <div>
  14. <span>Open</span>
  15. <div style="width:150px;">
  16. <div>Firefox</div>
  17. <div>Internet Explorer</div>
  18. <div class="menu-sep"></div>
  19. <div>Select Program...</div>
  20. </div>
  21. </div>
  22. <div iconCls="icon-remove">Delete</div>
  23. <div>Select All</div>
  24. </div>
復制

 

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

 

 

jQuery EasyUI 布局

邊框布局（border layout）提供五個區域：east、west、north、south、center。以下是一些通常用法：

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

為了應用布局（layout），您應該確定一個布局（layout）容器，然后定義一些區域。布局（layout）必須至少需要一個 center 區域，以下是一個布局（layout）實例：

  1. <div class="easyui-layout" style="width:400px;height:200px;">
  2. <div region="west" split="true" title="Navigator" style="width:150px;">
  3. <p style="padding:5px;margin:0;">Select language:</p>
  4. <ul>
  5. <li><a href="javascript:void(0)" onclick="showcontent('java')">Java</a></li>
  6. <li><a href="javascript:void(0)" onclick="showcontent('cshape')">C#</a></li>
  7. <li><a href="javascript:void(0)" onclick="showcontent('vb')">VB</a></li>
  8. <li><a href="javascript:void(0)" onclick="showcontent('erlang')">Erlang</a></li>
  9. </ul>
  10. </div>
  11. <div id="content" region="center" title="Language" style="padding:5px;">
  12. </div>
  13. </div>
復制

 

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

最后我們寫一個 onclick 事件處理函數來檢索數據，'showcontent' 函數非常簡單：

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

 

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

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

以下就是所有代碼：

  1. <div class="easyui-panel" title="Complex Panel Layout" iconCls="icon-search" collapsible="true" style="padding:5px;width:500px;height:250px;">
  2. <div class="easyui-layout" fit="true">
  3. <div region="north" border="false" class="p-search">
  4. <label>Search:</label><input></input>
  5. </div>
  6. <div region="center" border="false">
  7. <div class="easyui-layout" fit="true">
  8. <div region="east" border="false" class="p-right">
  9. <img src="images/msn.gif"/>
  10. </div>
  11. <div region="center" border="false" style="border:1px solid #ccc;">
  12. <div class="easyui-layout" fit="true">
  13. <div region="south" split="true" border="false" style="height:60px;">
  14. <textarea style="border:0;width:100%;height:100%;resize:none">Hi,I am easyui.</textarea>
  15. </div>
  16. <div region="center" border="false">
  17. </div>
  18. </div>
  19. </div>
  20. </div>
  21. </div>
  22. </div>
  23. </div>
復制

 

我們不需要寫任何的 javascript 代碼，它自己有非常強大的設計用戶界面的功能。

 

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

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

  1. <div class="easyui-accordion" style="width:300px;height:200px;">
  2. <div title="About Accordion" iconCls="icon-ok" style="overflow:auto;padding:10px;">
  3. <h3 style="color:#0099FF;">Accordion for jQuery</h3>
  4. <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
  5. </div>
  6. <div title="About easyui" iconCls="icon-reload" selected="true" style="padding:10px;">
  7. easyui help you build your web page easily
  8. </div>
  9. <div title="Tree Menu">
  10. <ul id="tt1" class="easyui-tree">
  11. <li>
  12. <span>Folder1</span>
  13. <ul>
  14. <li>
  15. <span>Sub Folder 1</span>
  16. <ul>
  17. <li><span>File 11</span></li>
  18. <li><span>File 12</span></li>
  19. <li><span>File 13</span></li>
  20. </ul>
  21. </li>
  22. <li><span>File 2</span></li>
  23. <li><span>File 3</span></li>
  24. </ul>
  25. </li>
  26. <li><span>File2</span></li>
  27. </ul>
  28. </div>
  29. </div>

 

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

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

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

  1. <div class="easyui-tabs" style="width:400px;height:100px;">
  2. <div title="First Tab" style="padding:10px;">
  3. First Tab
  4. </div>
  5. <div title="Second Tab" closable="true" style="padding:10px;">
  6. Second Tab
  7. </div>
  8. <div title="Third Tab" iconCls="icon-reload" closable="true" style="padding:10px;">
  9. Third Tab
  10. </div>
  11. </div>
復制

 

我們創建一個帶有三個面板（panel）的 Tabs 組件，第二個和第三個面板（panel）可以通過點擊關閉按鈕進行關閉。

 

通過使用 jQuery EasyUI 可以很容易地添加 Tabs。您只需要調用 'add' 方法即可。

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

步驟 1：創建 Tabs

  1. <div style="margin-bottom:10px">
  2. <a href="#" class="easyui-linkbutton" onclick="addTab('google','http://www.google.com')">google</a>
  3. <a href="#" class="easyui-linkbutton" onclick="addTab('jquery','http://jquery.com/')">jquery</a>
  4. <a href="#" class="easyui-linkbutton" onclick="addTab('easyui','http://jeasyui.com/')">easyui</a>
  5. </div>
  6. <div id="tt" class="easyui-tabs" style="width:400px;height:250px;">
  7. <div title="Home">
  8. </div>
  9. </div>
復制

 

這個 html 代碼非常簡單,我們創建了帶有一個名為 'Home' 的 tab 面板的 Tabs。請注意，我們不需要寫任何的 js 代碼。

步驟 2：實現 'addTab' 函數

  1. function addTab(title, url){
  2. if ($('#tt').tabs('exists', title)){
  3. $('#tt').tabs('select', title);
  4. } else {
  5. var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
  6. $('#tt').tabs('add',{
  7. title:title,
  8. content:content,
  9. closable:true
  10. });
  11. }
  12. }
復制

 

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

 

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

步驟 1：創建 Tabs

  1. <div id="tt" class="easyui-tabs" style="width:330px;height:270px;">
  2. <div title="Shirt1" style="padding:20px;">
  3. <img src="images/shirt1.gif">
  4. </div>
  5. <div title="Shirt2" style="padding:20px;">
  6. <img src="images/shirt2.gif">
  7. </div>
  8. <div title="Shirt3" style="padding:20px;">
  9. <img src="images/shirt3.gif">
  10. </div>
  11. <div title="Shirt4" style="padding:20px;">
  12. <img src="images/shirt4.gif">
  13. </div>
  14. <div title="Shirt5" style="padding:20px;">
  15. <img src="images/shirt5.gif">
  16. </div>
  17. </div>
復制

 

步驟 2：寫自動播放代碼

  1. var index = 0;
  2. var t = $('#tt');
  3. var tabs = t.tabs('tabs');
  4. setInterval(function(){
  5. t.tabs('select', tabs[index].panel('options').title);
  6. index++;
  7. if (index >= tabs.length){
  8. index = 0;
  9. }
  10. }, 3000);
復制

 

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

 

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

定義一些面板（panel）

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

代碼如下所示：

  1. <div style="width:200px;height:auto;background:#7190E0;padding:5px;">
  2. <div class="easyui-panel" title="Picture Tasks" collapsible="true" style="width:200px;height:auto;padding:10px;">
  3. View as a slide show<br/>
  4. Order prints online<br/>
  5. Print pictures
  6. </div>
  7. <br/>
  8. <div class="easyui-panel" title="File and Folder Tasks" collapsible="true" style="width:200px;height:auto;padding:10px;">
  9. Make a new folder<br/>
  10. Publish this folder to the Web<br/>
  11. Share this folder
  12. </div>
  13. <br/>
  14. <div class="easyui-panel" title="Other Places" collapsible="true" collapsed="true" style="width:200px;height:auto;padding:10px;">
  15. New York<br/>
  16. My Pictures<br/>
  17. My Computer<br/>
  18. My Network Places
  19. </div>
  20. <br/>
  21. <div class="easyui-panel" title="Details" collapsible="true" style="width:200px;height:auto;padding:10px;">
  22. My documents<br/>
  23. File folder<br/><br/>
  24. Date modified: Oct.3rd 2010
  25. </div>
  26. </div>
復制

 

自定義面板（panel）的外觀效果

請注意，這個視圖外觀效果不是我們想要的，我們必須改變面板（panel）的頭部背景圖片和折疊/展開按鈕的圖標。

做到這一點並不難，我們需要做的只是重新定義一些 CSS。

  1. .panel-body{
  2. background:#f0f0f0;
  3. }
  4. .panel-header{
  5. background:#fff url('images/panel_header_bg.gif') no-repeat top right;
  6. }
  7. .panel-tool-collapse{
  8. background:url('images/arrow_up.gif') no-repeat 0px -3px;
  9. }
  10. .panel-tool-expand{
  11. background:url('images/arrow_down.gif') no-repeat 0px -3px;
  12. }
復制

 

由此可見，使用 easyui 定義用戶界面非常簡單。

 

先寫到這里。。。累了。。。后面還有

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 jQuery UI vs EasyUI jQuery快速入門 JavaScript UI選型及Jquery EasyUI使用經驗談 JQuery EasyUI DataGrid獲取當前行索引及快速清空 JQuery 入門學習附常用UI模塊 JQuery 快速入門一篇通 Jquery Easyui與Jquery Bootstrap的比較 JQuery-easyui 分析（1） Jquery EasyUI 開發實錄 JQuery EasyUI window 用法
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM