TinyUiEnterpriseTiny 前端展現(xiàn)框架
以前發(fā)表過一篇文章：TinyAdmin前端展現(xiàn)框架，其在線演示路徑為：http://www.tinygroup.org/tinyadmin/，應(yīng)該說有許多人還是感覺興趣的，但是由于這個(gè)是基于SmartAdmin框架改寫的，雖然我們自己買了SmartAdmin的授權(quán)，但是廣大用戶如果要用的時(shí)候，就會有授權(quán)相關(guān)的問題，這會大大影響一些人的使用決策--尤其是會再發(fā)行的朋友。
再一個(gè)原因是SmartAdmin初看不是不錯(cuò)的，但是實(shí)際用起來，里面的問題比較多，對IE8基本上可以說是不兼容，雖然我們努力進(jìn)行了一定的修正，但是還是兼容性不夠好。有些用戶體驗(yàn)方面也有改進(jìn)的空間，這就越來越讓我思考，是不是要有更好的解決方案？
直到AJian和密緣之友加入我的團(tuán)隊(duì)之后，我覺得是時(shí)候比較徹底的解決這個(gè)問題了。果然，在風(fēng)淡蕓輕、AJian、密緣之友的通力合作下，只用了一個(gè)月左右的時(shí)間，就拿出一TinyUI的初始版本，目前已經(jīng)基本完善，當(dāng)然我們還在進(jìn)行系統(tǒng)性的測試，相信還存在一些小問題（有些我們自己已經(jīng)發(fā)現(xiàn)，正在修正中），歡迎感興趣的同學(xué)們一起來參與改進(jìn)。
在線演示地址：http://www.tinygroup.org/tinyuiweb/
源碼地址（必須托管在高大上的開源中國GIT倉庫）：http://git.oschina.net/tinyframework/TinyUiEnterprise
開發(fā)環(huán)境構(gòu)建，需要有GIT，MAVEN(3.1.x)，JDK1.6：
git clone https://git.oschina.net/tinyframework/TinyUiEnterprise.git cd TinyUiEnterprise mvn install cd *web mvn jetty:run
在執(zhí)行mvn install的時(shí)候，第一次時(shí)間比較長，因?yàn)橐獜闹醒雮}庫下載一些資源包，可以抽支煙、喝杯茶、走走步啥的。
如果走完最后一步，就可以啟動起一個(gè)本地環(huán)境（注意，沒有別的應(yīng)用戰(zhàn)用8080端口），這個(gè)時(shí)候起個(gè)瀏覽器，輸入：
http://localhost:8080/tinyuiweb/
注意，請?jiān)贗E9以上瀏覽器、Chrome、FireFox等瀏覽器上瀏覽，目前IE8還在作適應(yīng)性調(diào)整。
一些說明，本UI框架中，有一些內(nèi)容取自H-UI，這個(gè)我們和H-UI源創(chuàng)團(tuán)隊(duì)進(jìn)行過溝通，他們允許我們復(fù)用他們框架中的內(nèi)容。
本UI框架中，在某些外在實(shí)現(xiàn)方面參考了SmartAdmin的一些特性，但是沒有復(fù)用它的源碼。
本UI框架中，集成了一些開源的JQuery插件，但是不改變原來插件的授權(quán)方式，請使用者在使用時(shí)查看原始插件的授權(quán)方式。
TinyUI的一些特性說明：
提供了完整的主頁面框架
提供了整頁切換和Ajax局部刷新的支持
提供了豐富的菜單插入點(diǎn)
提供了多種皮膚
提供了豐富的界面元素自定義
提供了UI組件包的封裝
提供了宏封裝，使得使用時(shí)不必關(guān)心具體實(shí)現(xiàn)
提供了流式布局，在手機(jī)端也有良好的展現(xiàn)
良好的解決了UI組件包之間的依賴關(guān)系
良好的解決了CSS合并和JS合并及其壓縮方面的問題
下面我通過一些圖形了做一個(gè)展示：
上面是其中的一個(gè)頁面，組件包列表是根據(jù)實(shí)際加載的組件包數(shù)量實(shí)時(shí)計(jì)算出來的，因此不需要人為進(jìn)行修改---這個(gè)就是依賴TinyUiEngine的強(qiáng)大支持了。
點(diǎn)擊設(shè)置按鈕，會顯示界面調(diào)整面板，在這里可以對導(dǎo)航條、菜單欄、導(dǎo)般菜單等進(jìn)行固定與否的調(diào)整，也可以調(diào)整菜單的位置。還可以選擇是采用全屏還是固定寬度的設(shè)置，值得一提的是如果選擇固定寬度，會根據(jù)頁面的寬度在970與1170寬度之間自動適應(yīng)。再下面就是各種各樣的主題風(fēng)格了。呵呵，現(xiàn)在的主題風(fēng)格只是簡單調(diào)整了一下，用于測試，后面會請專業(yè)的美工同學(xué)進(jìn)行系統(tǒng)性的調(diào)整。
然后，里面就是幾十個(gè)組件的實(shí)際示例，我敢保證你想用的多大多組件都已經(jīng)包含在內(nèi)了。如果你認(rèn)為還不夠，請到bbs.tinygroup.org社區(qū)中留言，只要提的合理，我們會以你想象不到的速度快速進(jìn)行添加。
下面我展示一個(gè)流式布局的示范：
一開始是整頁寬度的固定寬度顯示，還可以看到兩邊的陰影，現(xiàn)在固定寬度為1170像素。
我們減少它的寬度
它的寬度已經(jīng)變成970像素寬。
再把它的寬度減少，
可以看到兩邊的隱藏已經(jīng)沒有了。
由于寬度實(shí)在是小，菜單就不再完整顯示，而是只顯示圖標(biāo)了。
嗯嗯，效果不錯(cuò)，已經(jīng)完整的展示了整個(gè)過程。
上面是菜單顯示方式，可以看到是非常適合手機(jī)等觸摸屏上操作的。
Tiny出品，必是精品，小伙伴們一起參與或加入我們吧?。?！