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();});
實現效果如下: