xtJs Desktop桌面開(kāi)始菜單動(dòng)態(tài)生成

ExtJs框架是目前市面上采用比較成熟的js框架，有著諸多優(yōu)點(diǎn)特別適合用來(lái)實(shí)現(xiàn)一些內(nèi)部的管理信息系統(tǒng).ExtJs提供了一套組件來(lái)開(kāi)發(fā)類似于windows桌面的單頁(yè)面系統(tǒng)，其中desktop桌面的開(kāi)始菜單按照后臺(tái)提供的數(shù)據(jù)動(dòng)態(tài)生成也是一個(gè)難點(diǎn)，下面將對(duì)desktop桌面動(dòng)態(tài)開(kāi)始菜單的生成進(jìn)行介紹。

ExtJs官方提供了desktop桌面的demo，其中關(guān)于開(kāi)始菜單的生成是靜態(tài)的方式，在js腳本中設(shè)置好了固定的開(kāi)始菜單內(nèi)容再生成開(kāi)始菜單。<font color=red>本文的講解內(nèi)容均是在官方demo基礎(chǔ)上進(jìn)行的修改</font>

整個(gè)需要改進(jìn)的腳本只有兩個(gè)一個(gè)是根目錄下的App.js以及BogusModule.js，前臺(tái)與后臺(tái)之間通過(guò)Ajax交互，數(shù)據(jù)交換個(gè)是為json

后臺(tái)定義了Mids類，如下所示：

public class Mids {
 private String mid; //菜單id
 private String text; //菜單名詞
 private String path; //菜單路徑
 private List<Mid> subs; //子菜單
 //Mid作為Mids內(nèi)部類
 public class Mid {
 private String mid;
 private String text;
 private String path;
 }
}

因此前后臺(tái)交互的json數(shù)組示例如下：

[{mid:”m1”,text:”菜單1”,path:”/m1”,subs:null},{mid:”m2”,text:”菜單2”,path:”/m1”,subs:[mid:”m21”,text:”菜單21”,path:”/m21”}]

接下來(lái)我們就要修改App.js這個(gè)js文件

 getModules : function(){
// return [
// //new MyDesktop.Blockalanche(),
// //new MyDesktop.BogusMenuModule(),
// //new MyDesktop.BogusModule()
// 
// ];
 return mArr;
},
//找到這段代碼并注釋掉部分行并修改為return mArr，其中mArr就是開(kāi)始菜單模塊會(huì)在另一個(gè)js文件中定義

下面我們就看核心的BogusModule.js這個(gè)文件，這個(gè)文件定義了開(kāi)始菜單的生成方式和類型

//首先需要定義一個(gè)模塊類型MyDesktop.BogusModule
Ext.define(
 'MyDesktop.BogusModule',
 {
 extend: 'Ext.ux.desktop.Module',
 init:function () {},
 createWindow: function (obj) {
 var desktop=this.app.getDesktop();
 createWindow(desktop,obj);//該方法另外定義
 }
 });

菜單數(shù)組以及Menu模型與后臺(tái)傳遞的json數(shù)據(jù)進(jìn)行綁定

var mArr=[];
Ext.define('Menu', {
 extend: 'Ext.data.Model',
 fields: ['mid', 'text', 'path','subs']
});
// 

定義了一個(gè)store采用Ajax方式與后臺(tái)進(jìn)行是數(shù)據(jù)交互store進(jìn)行數(shù)據(jù)加載并實(shí)現(xiàn)開(kāi)始菜單動(dòng)態(tài)加載和綁定，并且生成桌面

var store=Ext.create('Ext.data.Store', {
 model: 'Menu',
 proxy: {
 type: 'ajax',
 url: 'menu',
 reader: 'json'
 }
});
store.load({
scope: this,
callback: function (r, op, success) {
 if (success) {
 for (var i=0; i < r.length; i++) {
 var menu=Ext.define('MyDesktop.materialMenu', {
 extend: 'MyDesktop.BogusModule',
 init: function () {
 var mm=this;
 //判斷是否有子菜單，有子菜單則設(shè)置為點(diǎn)擊無(wú)效
 if (r[i].data.subs) {
 mm.launcher={
 text: r[i].data.text,
 iconCls: 'bogus',
 handler: function () {
 //有子菜單則點(diǎn)擊無(wú)效
 return false;
 },
 menu: {items: []}
 };
 //遍歷子菜單數(shù)據(jù)并生成子菜單項(xiàng)
 Ext.Array.each(r[i].data.subs, function (m, index, allItems) {
 mm.launcher.menu.items.push({
 text: m.text,
 iconCls: 'bogus',
 handler: function (src) {
 var desktop=mm.app.getDesktop();
 createWindow(desktop,src);
 },
 //scope: this,
 src: m.path,
 windowId: m.mid
 });
 });
 } else {
 //沒(méi)有子菜單則設(shè)置點(diǎn)擊打開(kāi)窗口
 mm.launcher={
 text: r[i].data.text,
 iconCls: 'bogus',
 handler: this.createWindow,
 scope: this,
 src: r[i].data.path,
 windowId: r[i].data.mid
 };
 }
 }
 });
 mArr.push(new menu());
 }
 // 生成桌面
 var myDesktopApp;
 Ext.onReady(function () {
 myDesktopApp=new MyDesktop.App();
 });
 }
}
});

定義對(duì)應(yīng)的打開(kāi)窗口模塊，每個(gè)窗口模塊均內(nèi)嵌了一個(gè)iframe，通過(guò)該iframe可以加載其它頁(yè)面內(nèi)容

function createWindow(desktop,obj) {
var win=desktop.getWindow('bogus' + obj.windowId);
if (!win) {
 var iframeId='bogus_' + obj.windowId;
 win=desktop
 .createWindow({
 id: 'bogus' + obj.windowId,
 title: obj.text,
 //width: 800,
 //height: 600,
 maximizable: true,
 maximized: true,
 closable: true,
 resizable: true,
 html: "<iframe id='"
 + iframeId
 + "' style='width:100%;height:100%;border:0px;margin:0px;padding:0px;' frameborder='0' src=''></iframe>",
 iconCls: 'bogus',
 animCollapse: false,
 constrainHeader: true,
 listeners: {
 afterrender: function () {
 document
 .getElementById(iframeId).src=obj.src;
 }
 },
 buttons: [
 {
 text: '刷新窗口內(nèi)容',
 handler: function () {
 document
 .getElementById(iframeId).src=obj.src;
 }
 }, {
 text: '切換窗口大小',
 handler: function () {
 win.toggleMaximize();
 }
 }, {
 text: '關(guān)閉',
 handler: function () {
 win.close();
 }
 }]
 });
}
win.show();
return win;
}

這樣就完成了ExtJs桌面的動(dòng)態(tài)開(kāi)始菜單生成

目錄

• 一、EasyUI
• 二、DWZ JUI
• 三、HUI
• 四、BUI
• 五、Ace Admin
• 六、Metronic
• 七、H+ UI
• 八、Admin LTE
• 九、INSPINIA
• 十、LigerUI
• 十一、FineUI
• 十二、其它UI
• 十三、總結(jié)下下載

最近要做一個(gè)企業(yè)的OA系統(tǒng)，以前一直使用EasyUI，一切都好，但感覺(jué)有點(diǎn)土了，想換成現(xiàn)在流行的Bootstrap為基礎(chǔ)的后臺(tái)UI風(fēng)格，想滿足的條件應(yīng)該達(dá)到如下幾個(gè)：

1、美觀、大方、簡(jiǎn)潔

2、兼容IE8、不考慮兼容IE6/IE7，因?yàn)楝F(xiàn)在還有很多公司在使用Win7系統(tǒng)，系統(tǒng)內(nèi)置了IE8

3、能通過(guò)選項(xiàng)卡打開(kāi)多個(gè)頁(yè)面，不想做單頁(yè)，iframe也沒(méi)關(guān)系

4、性能好，不要太笨重

5、最好以Bootstrap為基礎(chǔ)

6、還希望在以后別的系統(tǒng)中能夠復(fù)用。

一次次反復(fù)糾結(jié)的選擇開(kāi)始了，給大家介紹下我考慮過(guò)的UI，也給大家一個(gè)參考。

一、EasyUI

easyui是一種基于jQuery的用戶界面插件集合。

easyui為創(chuàng)建現(xiàn)代化，互動(dòng)，JavaScript應(yīng)用程序，提供必要的功能。

使用easyui你不需要寫很多代碼，你只需要通過(guò)編寫一些簡(jiǎn)單HTML標(biāo)記，就可以定義用戶界面。

easyui是個(gè)完美支持HTML5網(wǎng)頁(yè)的完整框架。

easyui節(jié)省您網(wǎng)頁(yè)開(kāi)發(fā)的時(shí)間和規(guī)模。

easyui很簡(jiǎn)單但功能強(qiáng)大的。

優(yōu)點(diǎn)：輕量、功能強(qiáng)大、免費(fèi)、兼容性好、幫助詳細(xì)、使用的人多生態(tài)好

缺點(diǎn)：非響應(yīng)式布局、某些系統(tǒng)看起來(lái)有點(diǎn)土（客戶與老板的感覺(jué)、確實(shí)與最新的那些UI有差距）

獲得：上網(wǎng)搜索、網(wǎng)盤搜索大把被搭建好了基礎(chǔ)功能的框架。下載

下載后大家可以替換成最新的1.5版的easyui

官網(wǎng)：http://www.jeasyui.com/，有免費(fèi)版，有商業(yè)版，商業(yè)版收費(fèi)，幫助非常詳盡

資源：http://www.jeasyui.net/，easyui是國(guó)人的的作品，但服務(wù)器在國(guó)外，官網(wǎng)也是英文的，這個(gè)網(wǎng)站類似官網(wǎng)的中文版

二、DWZ JUI

特點(diǎn)：DWZ富客戶端框架(jQuery RIA framework), 是中國(guó)人自己開(kāi)發(fā)的基于jQuery實(shí)現(xiàn)的Ajax RIA開(kāi)源框架. 設(shè)計(jì)目標(biāo)是簡(jiǎn)單實(shí)用,快速開(kāi)發(fā),降低ajax開(kāi)發(fā)成本。

官網(wǎng)：http://jui.org/

下載：https://github.com/dwzteam/

三、HUI

H-ui前端框架是在bootstrap的思想基礎(chǔ)上基于 HTML、CSS、JAVASCRIPT開(kāi)發(fā)的輕量級(jí)web前端框架,開(kāi)源免費(fèi),簡(jiǎn)單靈活,兼容性好,滿足大多數(shù)中國(guó)網(wǎng)站。分了前端UI與后端UI。

官網(wǎng)：http://www.h-ui.net/H-ui.admin.shtml 后臺(tái)，http://www.h-ui.net/ 前臺(tái)

下載：https://github.com/jackying/

缺點(diǎn)：感覺(jué)用的人少，名氣小，資料不全，配套組件不多，但國(guó)人的產(chǎn)品符合國(guó)人的口味。

四、BUI

BUI她是基于jQuery,兼容KISSY的UI類庫(kù)，專致于解決后臺(tái)系統(tǒng)的框架方案，BUI提供了豐富的DPL含有強(qiáng)大的控件庫(kù)對(duì)業(yè)務(wù)做了精細(xì)的分析。

官網(wǎng)：http://www.builive.com/

下載：https://github.com/dxq613/bui

感覺(jué)也比較冷、與HUI有點(diǎn)類似的優(yōu)點(diǎn)整體框架符合我的要求，但風(fēng)格有種說(shuō)不出的感覺(jué)。

五、Ace Admin

響應(yīng)式Bootstrap網(wǎng)站后臺(tái)管理系統(tǒng)模板ace admin，非常不錯(cuò)的輕量級(jí)易用的admin后臺(tái)管理系統(tǒng)，基于Bootstrap3，擁有強(qiáng)大的功能組件以及UI組件，基本能滿足后臺(tái)管理系統(tǒng)的需求，而且能根據(jù)不同設(shè)備適配顯示，而且還有四個(gè)主題可以切換。以前收費(fèi)，好像最新版不再收費(fèi)了。

下載：https://github.com/bopoda/ace

官網(wǎng)：http://ace.jeka.by/

感覺(jué)比較全，功能強(qiáng)大,組件多，美觀，只是用了很多不同的插件，兼容性不錯(cuò)。

兼容的瀏覽器：

• Internet Explorer 10
• Internet Explorer 11
• Internet Explorer 8
• Internet Explorer 9
• Latest Chrome
• Latest Firefox
• Latest Opera
• Latest Safari

使用的插件：

View Code

使用到的插件并沒(méi)有分開(kāi)存放，使用起來(lái)會(huì)麻煩一些。

另外該插件也被很多人簡(jiǎn)化、修改成選項(xiàng)卡+iframe風(fēng)格了。

六、Metronic

Metronic 是一套精美的響應(yīng)式后臺(tái)管理模板，基于強(qiáng)大的 Twitter Bootstrap 框架實(shí)現(xiàn)。Metronic 擁有簡(jiǎn)潔優(yōu)雅的 Metro UI 風(fēng)格界面，6 種顏色可選，76 個(gè)模板頁(yè)面，包括圖表、表格、地圖、消息中心、監(jiān)控面板等后臺(tái)管理項(xiàng)目所需的各種組件。

頁(yè)面規(guī)范、精致、細(xì)膩、美觀大方；功能強(qiáng)大、非常全；在所有我看到過(guò)的基于Bootstrap的網(wǎng)站模版中，Metronic是我認(rèn)為最優(yōu)秀的之一，其外觀之友好、功能之全面讓人驚嘆。Metronic 是一個(gè)自適應(yīng)的HTML模版，提供后臺(tái)管理模版和前端內(nèi)容網(wǎng)頁(yè)模版兩種風(fēng)格。

優(yōu)點(diǎn)：

支持HTML5 和 CSS3

自適應(yīng)，基于響應(yīng)式 Twitter Bootstrap框架，同時(shí)面向桌面電腦、平板、手機(jī)等終端。

整合AngularJS 框架。

可自定義管理面板，包括靈活的布局、主題、導(dǎo)航菜單、側(cè)邊欄等。

提供了部分電子商務(wù)模塊：CMS, CRM, SAAS。

多風(fēng)格，提供了3個(gè)前端風(fēng)格，7個(gè)后端管理面板風(fēng)格。

簡(jiǎn)潔扁平風(fēng)格設(shè)計(jì)。

700多個(gè)網(wǎng)頁(yè)模版，1500多個(gè)UI小組件，100多個(gè)表單，80多個(gè)jQuery插件。

提供說(shuō)明文檔。

缺點(diǎn)：

太大了，真的不知道從那里開(kāi)始

對(duì)IE的兼容不好，雖然官方聲稱支持IE8，但我測(cè)試結(jié)果不支持

收費(fèi)，今天的價(jià)格是

七、H+ UI

官網(wǎng)的介紹：H+是一個(gè)完全響應(yīng)式，基于Bootstrap3.3.6最新版本開(kāi)發(fā)的扁平化主題，她采用了主流的左右兩欄式布局，使用了Html5+CSS3等現(xiàn)代技術(shù)，她提供了諸多的強(qiáng)大的可以重新組合的UI組件，并集成了最新的jQuery版本(v2.1.4)，當(dāng)然，也集成了很多功能強(qiáng)大，用途廣泛的jQuery插件，她可以用于所有的Web應(yīng)用程序，如網(wǎng)站管理后臺(tái)，網(wǎng)站會(huì)員中心，CMS，CRM，OA等等，當(dāng)然，您也可以對(duì)她進(jìn)行深度定制，以做出更強(qiáng)系統(tǒng)。

官網(wǎng)：http://www.zi-han.net/theme/hplus/

與Metronic與INSPINIA非常像，插件非常多，收費(fèi)998人民幣。

八、Admin LTE

AdminLTE 是一個(gè)基于Bootstrap 3.x的免費(fèi)主題，它是一個(gè)完全響應(yīng)式管理模板。高度可定制的，易于使用。適合從小型移動(dòng)設(shè)備到大的臺(tái)式機(jī)很多的屏幕分辨率。

下載：https://github.com/almasaeed2010/AdminLTE （目前star 11652+）

預(yù)覽: http://almsaeedstudio.com/preview/

官網(wǎng)：Free Bootstrap Admin Template

瀏覽器支持：

IE 9+

Firefox (latest)

Chrome (latest)

Safari (latest)

Opera (latest)

插件：

View Code

特點(diǎn)：

• 響應(yīng)式布局，支持多種設(shè)備
• 打印增強(qiáng)
• 豐富可排序的面板組件
• 18個(gè)插件與3個(gè)自定義插件
• 輕量、快速
• 兼容主流瀏覽器，IE8不兼容
• 支持Glyphicons, Fontawesome和Ion圖標(biāo)

整體感覺(jué)與Metronic類似、功能強(qiáng)大，UI精致，被許多公司使用。

評(píng)論中感謝網(wǎng)友（dotNetDR_、醉丶千秋）推薦，確定是值得關(guān)注的一個(gè)UI。

九、INSPINIA

INSPINIA是平面設(shè)計(jì)理念的管理模板。它是充分響應(yīng)的由Bootstrap3 +框架開(kāi)發(fā)的模板,HTML5和CSS3。它有很多可重用的UI組件和集成了最新的jQuery插件。它可以用于所有類型的web應(yīng)用程序自定義管理面板中,項(xiàng)目管理系統(tǒng),管理儀表板,應(yīng)用程序的后端,CMS或CRM。

與Metronic一樣，風(fēng)格也比較像，個(gè)人認(rèn)為比Metronic還要強(qiáng)大一些，頁(yè)面規(guī)范、精致、細(xì)膩、美觀大方；功能強(qiáng)大、非常全；在所有我看到過(guò)的基于Bootstrap的網(wǎng)站模版中，Metronic是我認(rèn)為最優(yōu)秀的之一，其外觀之友好、功能之全面讓人驚嘆。Metronic 是一個(gè)自適應(yīng)的HTML模版，提供后臺(tái)管理模版和前端內(nèi)容網(wǎng)頁(yè)模版兩種風(fēng)格。

瀏覽器兼容：

• IE 9, 10, 11
• Latest Chrome
• Latest Firefox
• Latest Opera
• Latest Safari

收費(fèi)，今天的價(jià)格是。

演示地址：http://wrapbootstrap.com/preview/WB0R5L90S

特點(diǎn)：

相對(duì)Metronic他準(zhǔn)備了很多個(gè)版本，比如：

Static version, AngularJS, ASP.NET MVC5/MVC6, Meteor and Ruby on Rails version

插件很多，但都按引用分文件夾存放了，靜態(tài)版本中我看了就是48個(gè)插件，有PSD源文件，提供的文件包含：

View Code

詳細(xì)介紹：https://wrapbootstrap.com/theme/inspinia-responsive-admin-theme-WB0R5L90S

十、LigerUI

LigerUI 是基于jQuery 的UI框架，其核心設(shè)計(jì)目標(biāo)是快速開(kāi)發(fā)、使用簡(jiǎn)單、功能強(qiáng)大、輕量級(jí)、易擴(kuò)展。簡(jiǎn)單而又強(qiáng)大，致力于快速打造Web前端界面解決方案，可以應(yīng)用于.net,jsp,php等等web服務(wù)器環(huán)境。

官網(wǎng)：http://www.ligerui.com/

演示：http://www.ligerui.com/demo.html

特點(diǎn)：

使用簡(jiǎn)單，輕量級(jí)

控件實(shí)用性強(qiáng)，功能覆蓋面大，可以解決大部分企業(yè)信息應(yīng)用的設(shè)計(jì)場(chǎng)景

快速開(kāi)發(fā)，使用LigerUI可以比傳統(tǒng)開(kāi)發(fā)減少極大的代碼量

易擴(kuò)展，包括默認(rèn)參數(shù)、表單/表格編輯器、多語(yǔ)言支持等等

支持Java、.NET、PHP等web服務(wù)端

支持 IE6+、Chrome、FireFox等瀏覽器

開(kāi)源，源碼框架層次簡(jiǎn)單易懂。

下載：http://pan.baidu.com/s/1o83vRZk

API: http://api.ligerui.com/

演示地址: http://demo.ligerui.com/

源碼下載: http://git.oschina.net/ligerui/LigerUI/ (源碼托管)

http://pan.baidu.com/s/1D0AVO (V1.2.3)

技術(shù)支持： http://www.cnblogs.com/leoxie2011/

個(gè)人感覺(jué)文檔比較全，也有公司的信息系統(tǒng)使用了該UI（去年我去一家公司培訓(xùn)他們就使用該UI，后面上頭說(shuō)要換漂亮些的，他們糾結(jié)好久），但整合感覺(jué)比不上EasyUI，與DotNet親一點(diǎn)感覺(jué)，DWZ則與Java新一些。

LigerUI中國(guó)人開(kāi)發(fā)的、免費(fèi)。

十一、FineUI

基于 jQuery / ExtJS 的 ASP.NET 控件庫(kù)、創(chuàng)建 No JavaScript，No CSS，No UpdatePanel，No ViewState，No WebServices 的網(wǎng)站應(yīng)用程序。

該UI也是國(guó)人的作品，開(kāi)源、免費(fèi)、至今有100多個(gè)版本了，個(gè)人感覺(jué)界面不算難看，控件多，幫助說(shuō)明也有不少；但只是為ASP.NET量身定做的，有一定的局限性；重，非常重，ExtJS+ASP.NET的頁(yè)面狀態(tài)就更加重了。

官網(wǎng)：http://fineui.com/

論壇：http://fineui.com/bbs/

示例：http://fineui.com/demo/

文檔：http://fineui.com/doc/

下載：http://fineui.codeplex.com/

十二、其它UI

下載地址（沒(méi)有積分請(qǐng)留下您的郵箱，我發(fā)給大家），因?yàn)楹枚嗳讼矚g

十三、總結(jié)下下載

沒(méi)有形式就沒(méi)有內(nèi)容、UI重要，特別是當(dāng)客戶與老板不懂太多關(guān)于代碼、功能、性能的時(shí)候。

上面的UI你也許可以通過(guò)各種途徑獲得，但商業(yè)應(yīng)用請(qǐng)慎重。

想來(lái)想去還是拿不定主意，不過(guò)有點(diǎn)想法：

1、使用HUI和bootstrap

2、使用EasyUI的框架，內(nèi)容頁(yè)使用HUI+BootStrap，iframe選項(xiàng)卡

3、從各個(gè)功能強(qiáng)大的頁(yè)面中拿一些插件過(guò)來(lái)

本文轉(zhuǎn)載>博客園:張果

你們知道的管理后臺(tái)UI框架還有哪些呢？歡迎大家留言討論，小編我最近用過(guò)H-UI、Easy_UI、M-UI。歡迎大家點(diǎn)贊，留言討論，喜歡這篇文章可以分享給更多人，關(guān)注我每天更新分享有關(guān)程序員、科技、編程之類的文章！！！愛(ài)你們，，么么噠，，讓我們一起愉快的玩耍把！！！