基于JQuery的换皮肤功能

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css"
        rel="stylesheet" type="text/css"id="skin"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"
        type="text/javascript"></script>
    <script src="js/plugins/jquery-ui-1.8.14.custom/external/jquery.cookie.js" type="text/javascript"></script>
    <script type="text/javascript">
        function changecss(str) {
            $("#skin").attr("href", str)  //改变一下href属性其实这里已经完成

             /*

               $("#skin", window.frames[0].document).attr("href",  str);//应用于子窗体

               $(window.parent.document).find("#skin").attr("href",  str);//应用于父窗体  

              */
             /*$.cookie("css_skin", str)//这里是记录一下cookie,防止刷新就回到原来的css路径
           
            下载路径:http://plugins.jquery.com/files/jquery.cookie.js.txt
            */
        }
        $(document).ready(function () {
            /*
           使用cookie 中存储 的样式要求，此方式还可以扩展换成从数据表中获取样式
            
            if ($.cookie("css_skin") != null) {
                changecss($.cookie("css_skin"));
            }*/
        });
    </script>
    <script type="text/javascript">
        $(function () {

            $('ul#Pager li,table.ui-list .ui-list-row').hover(
                    function () { $(this).addClass('ui-state-hover'); },
                    function () { $(this).removeClass('ui-state-hover'); }
                );

        });
    </script>
    <style type="text/css">
        #themes{font-size: 14px; font-weight: bold; text-align: right;}
        #themes ul ,#themes li{ list-style:none;float:right;  padding:10px}
        body{font: 72.5% "Trebuchet MS" , sans-serif;margin: 50px;margin-top: 0px;}
        .demoHeaders{margin-top: 2em;}


        /*jquery extended ui Pager*/
        .ui-pager{margin: 0;padding: 0;}
        .ui-pager .ui-pager-item{margin: 2px;padding: 4px 0;cursor: pointer;float: left;list-style: none;}
        .ui-pager span, .ui-pager span.ui-icon,.ui-pager a{float: left;margin:0 4px;height:16px;}

        /*jquery extended ui List*/
        .ui-list {width:100%;border: 1px solid #C6C6C6; empty-cells:hide; border-collapse: collapse}
        .ui-list .ui-list-header th,.ui-list .ui-list-header td,
        .ui-list .ui-list-row td {border:#c0c0c0 1px solid !important;border-bottom:none;line-height:16px;+line-height:18px;padding: 3px 7px 3px 6px;+padding: 2px 7px 2px 6px;}
        .ui-list .ui-list-row td {overflow: hidden;text-overflow: ellipsis;-o-text-overflow: ellipsis;font-weight:normal;}

    </style>
</head>
<body>
    <div id="themes">
        Chanage Themes :
        <ul>
            <li><a href="javascript:changecss('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/black-tie/jquery-ui.css')">
                black-tie</a></li>
            <li><a href="javascript:changecss('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/blitzer/jquery-ui.css')">
                blitzer</a> </li>
            <li><a href="javascript:changecss('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/smoothness/jquery-ui.css')">
                smoothness</a> </li>
            <li><a href="javascript:changecss('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/flick/jquery-ui.css')">
                flick</a></li>
            <li><a href="javascript:changecss('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/le-frog/jquery-ui.css')">
                le-frog</a></li>
        </ul>
    </div>
    <h2 class="demoHeaders">
        Pager</h2>
    <ul id="Pager" class="ui-pager ui-widget ui-helper-clearfix">
        <li class="ui-pager-item ui-state-default ui-corner-all"><a class="">第一页</a></li>
        <li class="ui-pager-item ui-state-default ui-corner-all"><a class="ui-icon ui-icon-circle-triangle-w">
            前一页</a></li>
        <li class="ui-pager-item ui-state-default ui-corner-all ui-state-active"><span>1</span></li>
        <li class="ui-pager-item ui-state-default ui-corner-all"><a href="#" class="">2</a></li>
        <li class="ui-pager-item ui-state-default ui-corner-all"><a href="#" class="">3</a></li>
        <li class="ui-pager-item ui-state-default ui-corner-all"><a href="#" class="ui-icon ui-icon-circle-triangle-e">
            下一页</a></li>
        <li class="ui-pager-item ui-state-default ui-corner-all"><a class="">最后一页</a></li>
    </ul>
    <h2 class="demoHeaders">
        List</h2>
    <table class="ui-list  ui-corner-all">
        <tr class="ui-list-header ui-state-default">
            <th class="">1 Columns</th><th class="">2 Columns</th><th class="">3 Columns</th><th class="">4 Columns</th><th class="">5 Columns</th><th class="">6 Columns</th><th class="">7 Columns</th>
        </tr>
        <tr class="ui-list-row">
            <td>First</td><td>Second</td><td>Third</td><td>four</td><td>five</td><td>six</td><td>seven</td>
        </tr>
        <tr class="ui-list-row">
            <td>First</td><td>Second</td><td>Third</td><td>four</td><td>five</td><td>six</td><td>seven</td>
        </tr>
        <tr class="ui-list-row">
            <td>First</td><td>Second</td><td>Third</td><td>four</td><td>five</td><td>six</td><td>seven</td>
        </tr>
    </table>
</body>
</html>