Jquery UI 是一套开源免费的、基于Jquery的插件，在这里记录下Jquery UI 的初步使用。

第一、下载安装

　　　　下载Jquery,官网：http://jquery.com;　　下载Jquery UI，官网：http://jqueryui.com/

　　　　Jquery的部署就不说了，说下Jquery UI的部署；以jquery-ui-1.9.1为例，如果只是简单使用Jquery UI的话，导入jquery-ui-1.9.1.custom.min.js和jquery-ui-1.9.1.custom.min.css就够了，想更深入了解的话，建议使用theme方式：解压下载的Jquery UI后，找到themes目录，把它copy到项目中，然后找到ui目录，把ui目录copy到themes目录下。如图：

基于 jqueryui 框架 jquery.ui_ViewUI

　　基本准备完成。

第二、初步使用

　　下面我们创建一个页面，演示一个手风琴的效果（accordion组件）

　　1、引用css



<link rel="Stylesheet" type="text/css" href="themes/base/jquery.ui.all.css" />



 

　　2、引用Js



<script type="text/javascript" src="themes/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="themes/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="themes/ui/jquery.ui.accordion.js"></script>



 

　　3、实现代码




基于 jqueryui 框架 jquery.ui_ViewUI_02

基于 jqueryui 框架 jquery.ui_基于 jqueryui 框架_03

Html代码 


<!-- Html代码 -->
<div id="accordion" class="ui-widget-content"   style="height: 80%;">
     <h6><a href="#">用户管理</a></h6>
     <div>...</div>
     <h6><a href="#">商品管理</a></h6>
     <div>...</div>
     <h6><a href="#">订单管理</a></h6>
     <div>
     　　<ul>
        　　<li><a href="#">订单管理</a></li>
           <li><a href="#">收货地址管理</a></li>
           <li><a href="#">退货管理</a></li>
        </ul>
     </div>
     <h6><a href="#">统计</a></h6>
     <div>...</div>
</div>



 




基于 jqueryui 框架 jquery.ui_ViewUI_02

基于 jqueryui 框架 jquery.ui_基于 jqueryui 框架_03

View Code 


<!-- JavaScript代码 -->
<SCRIPT type=text/javascript>
    //初始化手风琴
    function initAccordion(){
    $( "#accordion" ).accordion({
        collapsible: true
    });
    }
    
    $(document).ready(function() {
           //手风琴
        initAccordion();
        });
</SCRIPT>



 

 　　4、实现效果

基于 jqueryui 框架 jquery.ui_ViewUI_06

第三、主题风格的使用

 　　可能有人说上面的例子做出来的色调和我的不一样，那是因为我们用的主题风格不一样。下面我们来做一个更换主题的应用。

　　1、下载主题

　　　　可以进官网的Themes页面选择需要的主题下载，如图：

基于 jqueryui 框架 jquery.ui_ViewUI_07

　　不过我个人不推荐这种方式（下载不方便、会有很多重复的东西）。我更喜欢一次性下载所有主题，简单快捷还没有重复的东西，一次性下载，可以进首页底端找到Themes下载，如图：

基于 jqueryui 框架 jquery.ui_基于 jqueryui 框架_08

　　2、部署

　　　　下载完后解压，在themes目录下有各个主题对应的目录，打开这些目录，你会发现各个主题就是用了不同图片和jquery.ui.theme.css这个样式文件。好了，找到关键了，那我们看一下jquery.ui.theme.css文件是在哪里引用的呢？打开jquery.ui.all.css文件就知道是这里引用了



@import "jquery.ui.base.css";
@import "jquery.ui.theme.css";



　　　　接下来就好办了，首先，我们在项目的themes目录下建立一个目录，把base目录下的除jquery.ui.theme.css、jquery-ui.css外的css样式文件全放进去

基于 jqueryui 框架 jquery.ui_基于 jqueryui 框架_09

@import "jquery.ui.theme.css";这句干掉；然后把各个主题的目录copy到themes目录下

基于 jqueryui 框架 jquery.ui_javascript_10

　　　　到此，部署完毕。

 

　　3、实现更换主题代码



<link id="theme" rel=stylesheet type=text/css  href="themes/dot-luv/jquery.ui.theme.css">
<link rel=stylesheet type=text/css  href="themes/all/jquery.ui.all.css">



 

 




基于 jqueryui 框架 jquery.ui_ViewUI_02

基于 jqueryui 框架 jquery.ui_基于 jqueryui 框架_03

Html代码 


<!-- Html代码 -->
<select id="theme_changer">
    <option value="themes/dot-luv/jquery.ui.theme.css" selected="selected">Dot-luv Theme</option>
    <option value="themes/hot-sneaks/jquery.ui.theme.css" >Hot-sneaks Theme</option>
    <option value="themes/flick/jquery.ui.theme.css" >Flick Theme</option>
    <option value="themes/ui-darkness/jquery.ui.theme.css" >Ui-darkness Theme</option>
    <option value="themes/vader/jquery.ui.theme.css" >Vader Theme</option>
 </select>



 

 




基于 jqueryui 框架 jquery.ui_ViewUI_02

基于 jqueryui 框架 jquery.ui_基于 jqueryui 框架_03

JavaScript代码 


<!-- JavaScript代码 -->    
　　//更改主题
    function initTheme(){
         $('#theme_changer').change(function() {
            // alert("changer theme");
             var theme = $(this).find("option:selected").val();
            // alert(theme);
             $('#theme').attr('href', theme);
             });
    }
　　$(document).ready(function() {
        //主题
        initTheme();
        //手风琴
        initAccordion();
　　});



 

 　　实现效果如下：

基于 jqueryui 框架 jquery.ui_ViewUI_15

基于 jqueryui 框架 jquery.ui_jquery_16

基于 jqueryui 框架 jquery.ui_基于 jqueryui 框架_17

好了，Jquery UI 的初步使用到此为止。