1. 程式人生 > >網購一套UI代碼的始末

網購一套UI代碼的始末

窗口 異步 路徑 定制 end 包括 月份 edi 需要

引言:

  一個商業項目的需要,又因為時間緊迫的關系,準備購買一套簡潔,易用,可定制化強的UI,經過對國內外多家UI產品進行了對比,

  包括:FineUI, EasyUI, EXT.NET, EXTJS, jQueryUI, jQuery MiniUI, ligerUI, kendo-ui, uikit, hplus, uimaker 。

最後選擇了uimaker的一個模板。

Ⅰ 優點:

  1)示例不依賴於.net,java, php等服務器平臺,只需要電腦有一個瀏覽器即可進行示例瀏覽。

2)在easyui的基礎上進行定制,使用方法與easyui具有100%的相似度。

3)已有多套ui皮膚,減少了皮膚定制的工作量。

經過UI的功能測試,性能測試,兼容性測試,發現有如下缺點:

Ⅱ 缺點:

1)js的語法錯誤。

2)個別頁面,加載的數據太多,影響了軟件的性能。

3)對bootstrap的部份不兼容性。

4)作者服務不到位,承諾的3月份更新,現在都6月10號了

對於一個10來年的程序員,這些問題都不是問題,唯一的問題,就是時間不夠,不過這是商業項目,必須得解決。

Ⅲ 擼起袖子幹:

1)修改js的語法錯誤。

2)修改部份邏輯,提高UI性能。

3)因為我的項目要與bootstrap兼容,所以對bootstrrap做了大量的兼容。

4)與font awesome圖標,layer彈出框的兼容。

5)集成百度的上傳控件webuploader,替換為百度的編輯器Ueditor 等控件的。

一些圖片賞析:

比如:未經過修改時的UI - Error 錯誤

技術分享

一,在以前的基礎上新增了7套皮膚,只需要動態切換一下皮膚路徑即可。

技術分享

二,簡潔美觀的登錄頁面。

技術分享

三,以圖文並茂的方式顯示系統的主要信息。

技術分享

四,頁面樹形菜單,Tab的運用。

技術分享

五,列表頁的顯示(異步加載)

技術分享

六,導航菜單,以及彈出窗口的示例。

技術分享

網購一套UI代碼的始末