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代码 --> <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(); 　　});    　　实现效果如下：