2021-05-12 14:32:11
jQuery MiniUI 快速入門
2019-12-13 01:59:07
前段時間由於工作的原因接觸到MiniUI。感覺MiniUI很強大，使用起來也很舒服。下面我就帶領大家快速的使用MiniUI。
MiniUI - 專業WebUI控制元件庫
它能縮短開發時間，減少程式碼量，使開發者更專注於業務和伺服器端，輕鬆實現介面開發，帶來絕佳的使用者體驗。使用MiniUI，開發者可以快速建立Ajax無重新整理、B/S快速錄入資料、CRUD、Master-Detail、選單工具列、彈出面板、布局導航、資料驗證、分頁表格、樹、樹形表格等典型WEB應用系統介面。
jQuery MiniUI提供如下幾個大類的控制元件：
表格控制元件
樹形控制元件
布局控制元件：標題面板、彈出面板、折疊分割器、布局器、表單佈局器等
導航控制元件：分頁導航器、導航選單、索引標籤、選單、工具列等。
表單控制元件：多選輸入框、彈出選擇框、文字輸入框、數位輸入框、日期選擇框、下拉選擇框、下拉樹形選擇框、下拉表格選擇框、檔案上傳控制元件、多選框、列表框、多選框組、單選框組、按鈕等
富文字編輯器
圖表控制元件：柱狀圖、餅圖、線形圖、雙軸圖等。
技術亮點：
快速開發：使用Html設定介面，減少80%介面程式碼量。
易學易用：簡單的API設計，可以獨立、組合使用控制元件。
效能優化：內建資料懶載入、低記憶體開銷、快速介面布局等機制。
豐富控制元件：包含表格、樹、資料驗證、布局導航等超過50個控制元件。
超強表格：提供鎖定列、多表頭、分頁排序、行過濾、資料匯總、單元格編輯、詳細行、Excel匯出等功能。
第三方相容：與ExtJS、jQuery、YUI、Dojo等任意第三方控制元件無縫整合。
瀏覽器相容：支援IE6+、FireFox、Chrome等。
跨平台支援：支援Java、.NET、PHP等。
1
下載MiniUI
產品下載地址：http://www.miniui.com/download。
提醒：請根據不同的伺服器端後台，選擇下載不同後台版本的MiniUI。
我是用PHP開發，下載PHP版本的MiniUI
2
安裝MiniUI
下載後，解壓縮MiniUI。會有如圖檔案結構
提醒：新版本中開發者只需要參照scripts/boot.js即可。
3
開始第一個MiniUI程式
1、WEB伺服器根目錄下建立自己的專案目錄miniui_hello,將下載的MiniUI目錄下的scripts拷貝到專案目錄下，即可使用miniui。見圖：
2、編寫HelloWorld.html程式。程式如圖所示：
注意：
1、請注意相關javascript和css的路徑是否正確。
說明
1、控制元件宣告：class="mini-button"
2、屬性設定：text="Hello"
3、事件係結：onclick="onHelloClick"
4、事件處理常式：onHelloClick的e是事件物件，e.sender是事件激發者，本例中是button。
4
檢視執行效果
在瀏覽器位址列輸入http://localhost/miniui_hello/HelloWorld.html。點選Hello按鈕，即可看到使用miniui封裝的彈框。
行文至此，我們已經會在專案中用MiniUI。想深入學習MiniUI看完持續關注我的後續經驗。也可以直接通過官網http://www.miniui.com學習。
相關文章