jquery-ui的使用

在沒有任何前段框架的情況下，但是又想做出華麗的效果，那麼這時候jquery-ui能夠幫到你。

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目錄下。如圖：

　　基本準備完成。

第二、初步使用

　　下面我們創建一個頁面，演示一個手風琴的效果（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、實現代碼

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>

 

View Code

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

 

 　　4、實現效果

第三、主題風格的使用

 　　可能有人說上面的例子做出來的色調和我的不一樣，那是因爲我們用的主題風格不一樣。下面我們來做一個更換主題的應用。

　　1、下載主題

　　　　可以進官網的Themes頁面選擇需要的主題下載，如圖：

　　不過我個人不推薦這種方式（下載不方便、會有很多重複的東西）。我更喜歡一次性下載所有主題，簡單快捷還沒有重複的東西，一次性下載，可以進首頁底端找到Themes下載，如圖：

　　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樣式文件全放進去

　　　　然後打開jquery.ui.all.css文件，把@import "jquery.ui.theme.css";這句幹掉；然後把各個主題的目錄copy到themes目錄下

　　　　到此，部署完畢。

 

　　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">

 

 

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>

 

 

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();
　　});

 

 　　實現效果如下：

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

感謝 http://www.cnblogs.com/alex2520/archive/2012/11/03/alex_JqueryUI_01.html