themerooller是什么？
它是一套快速的，可视化的，为jQuery UI组件提供皮肤的控件。
下面以jQuery UI中的tabs 讲解：
1， 创建tabs
首先去ui.jquery.com下载程序库，
这个例子是讲解tab，所以只需要下载UI Core和Tabs 2个js即可。
接下来把下载的程序库中多余的CSS去掉，
例如找到ui.base.css，然后只留下ui.core.css和ui.tabs.css。
然后使用js调用：
$(function(){
//创建tabs
$('#tabs').tabs();
});
就这样一个简单的tabs 就 做出来了。
看demo1 ：
http://www.cssrain.cn/demo/jquery-ui-tab/demo1-创建tabs.html
2，更换皮肤
接下来需要为tabs更换皮肤，通过官方提供的jquery.themeswitcher.js 则可以轻易实现。
看demo2：
http://www.cssrain.cn/demo/jquery-ui-tab/demo2-更换皮肤.html
3，删除一些皮肤
themeswitcher 提供的皮肤选项太多了，怎么办？
有两种方式解决，第一可以去js里找到 第20行，
有一行 var switcherpane = .....
里面的li标签 就是代表每一个选项。
第二种方法就是自己写脚本来删除，比如如下脚本：
function removeTheme(themeName) {
if(themeName=="all"){
$("span.themeName").parents("ul").empty();
}
$("span.themeName:contains(" + themeName + ")").parent().parent().remove();
}
//移除单个皮肤
removeTheme("UI lightness");
removeTheme("UI darkness");
//移除全部皮肤
//removeTheme("all");
看demo3：http://www.cssrain.cn/demo/jquery-ui-tab/demo3-删除一些皮肤.html
4，增加自己的皮肤
打开jquery.themeswitch.js，找到第20行，
有一行 var switcherpane = ..... ;
中间有个< ul>标签,里面的li正是需要替换的。
换成如下格式：
< li>
< a href="?ffDefault=Trebuchet+MS...[完整路径 ，如果忘记了，可以去ui.theme.css里查找]">
< img src="theme image" alt="UI Lightness" title="UI Lightness" />
< span class="themeName">UI lightness< /span>
< /a>
< /li>
5，一个页面2种样式的tabs
当一个页面需要2种样式的tabs，你怎么办？
首先去官方下载另一套皮肤，当然可以自己定义。
http://jqueryui.com/themeroller/#themeGallery 。
下载好后，打开另一套皮肤的ui.theme.css，给里面所有的css加上前缀。
比如：我有一个tabs ，包含在 <div class="another" 里， 那么ui.theme.css里的前缀就是.another 。
看demo5：http://www.cssrain.cn/demo/jquery-ui-tab/demo5-一个页面2种样式.html
6，远程加载皮肤速度慢？
你是否已经感觉到每次更换皮肤都要从 ui.jquery.com 网站上去下载？
如果已经感觉对了，那么请你马上把
http://jqueryui.com/themeroller/themeswitchertool/
程序还有皮肤样式等 移到自己本地的服务器上来。
这样就可以非常轻松的解决问题了。
本篇文章来源于 cssrain.cn 原文链接：http://www.cssrain.cn/article.asp?id=1310
