jQuery EasyUI DEMO

Datebox 日期選擇器

之前測過 jQuery UI 的日期選擇器, 發現看似簡單的元件, 要操控它還真需要不少的設定. EasyUI 號稱 Easy, 是否較容易設定呢? 今天就來測試看看 How easy it is :

# jQuery EasyUI 參考文件
# jQuery EasyUI datebox
# jQuery UI 的日期選擇器

jQuery EasyUI 的日期選擇器 datebox 是 combo 與 calendar 物件的組合, 它與 jQueryUI 的 Datepicker 元件一樣都是用一個文字欄位來承載,  但不同的地方是, datebox 只要指定樣式類別為 easyui-datebox 即可, 不須呼叫 datebox() 方法來將其初始化 :

<input id="datebox1" type="text" class="easyui-datebox" >

如果沒有指定樣式類別, 則必須呼叫 datebox() 方法才行 :

   <input id="datebox2" type="text" >
   <script language="javascript" >
    $(document).ready(function(){
      $("#datebox2").datebox({required:true});
      });
   </script >

其他詳細內容請參考原始出處

Panel

jQuery EasyUI 的 Panel 是一種容器, 用來存放網頁內容, 也是其他容器如 layout, tab, accordion 的父容器. 其說明文件參考 :

# http://www.jeasyui.com/documentation/panel.php

與其他 EasyUI 元件一樣, 建立一個 Panel 容器有兩個方法, 一個是用 HTML5 標籤語法 (主要是 data-options 屬性), 其二是使用 Javascript 語法, 用程式來設定.

首先來看最簡單的 HTML 方式. Panel 容器只要用一個 div 元素, 並設定樣式類別為 easyui-panel 即可


其他詳細內容請參考原始出處

Accordion 摺疊選單

Accordion 是手風琴的意思, 亦即此 UI 可以像手風琴那樣展開與縮合, 它的每一個選項都是一個 Panel, 所以 Panel 的屬性與方法皆可用來操控每一個選項. 其 API 文件參考 :

# EasyUI Accordion

EasyUI 的折疊選單是用兩層 div 元素做的, 而 jQueryUI 則是用 ul-li 來做. EasyUI 只要在第一層的 div 指定樣式類別為 easyui-aaacordion, 第二層的 div 加上 title 屬性即可


其他詳細內容請參考原始出處

Tabs 頁籤面板

每一種 Javascript 框架或桌面程式語言都會提供頁籤面板這種常用的容器, 之前玩 ExtJS 時與 Java Swing 時曾詳細地做過測試, 詳見 :

# ExtJS 4 測試 : 頁籤面板 TabPanel 
# Java Swing 測試 : 頁籤面板 JTabbedPane

jQuery UI 的頁籤我沒測試過, 但之前使用 jQuery UI 寫了一個簡易架站軟體, 使用的容器就是 Tabs. EasyUI 的頁籤面板跟摺疊選單一樣都是利用兩層 div 元素建構的 (其實兩個很像), 跟 jQuery UI 基本上相同, 不同的是, jQuery UI 的頁籤標題需另外使用 ul-li 來做, 而 EasyUI 則直接在內層 div 元素的 title 屬性裡

原始介紹文章出自於此

Layouy 排版

測試完 Panel, Accordion, 以及 Tabs 後, 網頁的基本容器用法大致熟悉了, 接下來就是重頭戲 : 網頁排版, EasyUI 提供了 Layout 元件來處理版面問題, 其實 Layout 元件跟 Java Swing 的 BorderLayout 是同樣的東西啦! 都是用來排版, 只不過 Java Swing 常用在桌面程式 (也可以用在網頁!), 而 EasyUI 純粹用在網頁排版而已, 都是將一個版面分成東西南北中五個區域, 分別放置適當的內容. 北方通常用作 Banner, 例如網站的 Logo 或搜尋列; 南方通常當作 Footer, 例如版權宣告, 來站人數等等; 西方通常是導覽列; 東方則常用來做其他訊息如外部連結, 廣告行銷等等. 關於 Java 的排版請參考 :

# Java Swing 測試 : JButton 與排版

而 EasyUI 的 Layout 元件 API 參見 :

# http://www.jeasyui.com/documentation/layout.php

原始介紹文章出自於此

Tree 樹

Tree 適合用來表達從屬結構, 例如組織架構, 檔案系統等等, 是非常好用的使用者介面. EasyUI 提供的 tree 元件 API 如下 :

# http://www.jeasyui.com/documentation/tree.php
# Tree Demo

原始介紹文章出自於此