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