NO IMAGE

MiniUi是什麼?推薦一個前端學習群606721798

  1. MiniUi是一種前端開發技術,它的全稱叫Jquery MiniUi。

  2. 用於網站頁面的開發,專業的WebUi控制元件庫。

  3. 不依賴高階語言,可支援 Java、.Net、PHP.

MiniUi的技術亮點:

  • 快速開發:使用Html配置介面,減少80%介面程式碼量。

  • 易學易用:簡單的API設計,可以獨立、組合使用控制元件。

  • 效能優化:內建資料懶載入、低記憶體開銷、快速介面佈局等機制。

  • 豐富控制元件:包含表格、樹、資料驗證、佈局導航等超過50個控制元件。

  • 超強表格:提供鎖定列、多表頭、分頁排序、行過濾、資料彙總、單元格編輯、詳細行、Excel匯出等功能。

  • 第三方相容:與ExtJS、jQuery、YUI、Dojo等任意第三方控制元件無縫整合。

  • 瀏覽器相容:支援IE6 、FireFox、Chrome等。

MiniUi如何使用?

作為一個後臺開發人員,我們瞭解一些前端的知識也是必不可少的,所以今天在這裡主要講解一下MiniUi的使用。在後面也會演示一個簡單的例子。

第一步,我們需要去MiniUi官網(http://www.miniui.com/download/)下載一個壓縮包,根據自己用到的開發工具來選擇性下載,我用的開發工具是Eclipse,所以我就下載了一個Eclipse的。解壓後匯入自己的工程中。匯入完成後工程目錄如下圖所示:

前端MiniUi入門學習及簡單例子

工程目錄圖

第二步,我們需要把專案釋出到tomcat中,並且執行啟動。開啟瀏覽器輸入http://localhost:8080/miniui_java/就會進入到MiniUi官網介面。

第三步,其實第二步只是作為一個演示,在實際當中用到的其實主要用到的就是工程目錄圖當中的scripts這個資料夾中的資源。所以我們只需要把這個scripts資料夾匯入到自己webapp檔案下,就可以放心使用了。


MiniUi簡單例子

上述步驟完成後我們就可以使用它了。在這裡我就以MiniUi框架佈局為例來講一講。

MiniUi框架的佈局主要有四種分別是:OutlookTree、OutlookMenu、Tree 、Menu,就拿OutlookMenu佈局為例。首先我們需要找到這個佈局的HTML頁面,這個頁面的是在demo/outlookmenu.html中。我們把這個頁面粘到自己的webapp資料夾目錄下,當然你也可以在webapp資料夾下自己建立一個資料夾放進去。在這裡我是把outlookmenu.html放到了webapp下,在這個頁面上我們需要修改獲取資源的路徑 :<script src=”scripts/boot.js” type=”text/javascript”></script> ,如果放到了自己建的的資料夾下,請按照自己的目錄結構自行修改,在這裡就不在贅述。

先不要著急執行專案,我們還需要在outlookmenu.html頁面中把獲取左邊選單資料資源的url的路徑修改成自己的(第42行),還要把獲取右邊的資料表頁面修改成自己的頁面,就可以執行了。執行結果如下圖所示:

前端MiniUi入門學習及簡單例子

OutlookMenu佈局圖