如何使用jQuery UI的themeroller

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 ：
-创建tabs.html

2，更换皮肤
接下来需要为tabs更换皮肤，通过官方提供的jquery.themeswitcher.js 则可以轻易实现。
看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：-删除一些皮肤.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，你怎么办？
首先去官方下载另一套皮肤，当然可以自己定义。
  。
下载好后，打开另一套皮肤的ui.theme.css，给里面所有的css加上前缀。
比如：我有一个tabs ，包含在

看demo5：-一个页面2种样式.html

6，远程加载皮肤速度慢？
你是否已经感觉到每次更换皮肤都要从 ui.jquery.com 网站上去下载？
如果已经感觉对了，那么请你马上把

程序还有皮肤样式等 移到自己本地的服务器上来。
这样就可以非常轻松的解决问题了。

7，还有问题吗？
如果对themeroller还有什么不懂，请在下面留言，cssrain将即使为你解答。
如果你有什么技巧，也可以告诉我，共同学习。

本例源码下载：

本篇文章来源于 cssrain.cn 原文链接：

阅读(1523) | 评论(0) | 转发(0) |

0

上一篇：python 与 php rpc通讯

下一篇：lsof 命令详解