JqueryUI入門

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代碼 --><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>

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

實現效果如下：