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

實現效果如下：