漂亮的自定义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基础知识，就肯定能懂。