漂亮的自訂jQueryUI主題

之前的項目中，使用的是jqueryUI的UI組件，jqueryUI的個人化定製確實不錯，但大多是字型，顏色方面的小改動。而且不知大家是否看過jQuery的樣本頁面，貌似排版布局很精美，但是使用查看樣式就能發現在body元素的樣式中有一條針對font-size的設定。使用Firebug禁用這條樣式再看看，排版一下子“肥”了n多。真的搞不懂，為什麼jqueryUI的尺寸樣式要這樣奇怪？？

 

之前看到jQuery EasyUI的外觀樣式比較養眼，都說它是山寨“ExtJS”，我看做的還不錯。但是貌似這個傢伙與強大的jqGrid有些衝突，而且有時執行速度有點緩慢延遲。不得已只好忍痛割愛，畢竟捨不得放棄jqGrid的強大功能。

 

既然最初看中的是jQuery EasyUI的外觀樣式，乾脆從jqueryUI下載一個自訂版的UI主題，然後根據自己的要求，藉助Firebug，改造出適合自己主題。既然要改，就不能只是改個字型、顏色的小打小鬧，要從字型、顏色、尺寸、布局都動動手腳。

 

以下內容是jqueryUI提供的Redmond主題和我修改後的aero主題（
）的部分對比（全都取消了body中的font-size樣式），當然各人審美不同。

 

 

1. 整個jqueryUI外觀最令我看不順眼的就是tab組件，原來的tab組件又肥又醜，看上去一點都不秀敏。修改後的主題，縮小了每個標籤的邊距，去掉了標籤條背後的深色背景，使它看上去更協調。

 

 

 

2. 修改後的主題使對話方塊的標題與整個表單融為一體。

 

 

 

3. 修改後主題的日期選擇框也與整個主題風格一致。

 

這些變化都只是通過修改jquery-ui-1.8.1.custom.css的內容得來的。當然裡面的一些表徵圖還可以繼續替換美化，相信使用CSS Sprite方法應該不難。

 

如果有興趣的話，可以使用UltraEdit的文本比較功能，查看一下我修改的jquery-ui-1.8.1.custom.css與jqueryUI提供的那些內建主題的jquery-ui-1.8.1.custom.css有什麼區別。只要有CSS基礎知識，就肯定能懂。

 

新主題的：http://code.google.com/p/jquery-ui-theme-aero/downloads/list