jQueryUI入门教程

HTML5培训技术

Jquery UI 是一套开源免费的、基于Jquery的插件，在这里记录下Jquery UI 的初步使用。

第一、下载安装

　　　　下载Jquery,官网：http://jquery.com;　　下载JqueryUI，官网：http://jqueryui.com/

　　　　Jquery的部署就不说了，说下JqueryUI的部署；以jquery-ui-1.9.1为例，如果只是简单使用JqueryUI的话，导入jquery-ui-1.9.1.custom.min.js和jquery-ui-1.9.1.custom.min.css就够了，想更深入了解的话，建议使用theme方式：解压下载的JqueryUI后，找到themes目录，把它copy到项目中，然后找到ui目录，把ui目录copy到themes目录下。如图：

　　基本准备完成。

第二、初步使用

　　下面我们创建一个页面，演示一个手风琴的效果（accordion组件）

　　1、引用css

　　2、引用Js

　　3、实现代码

Html代码

...

　　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、实现更换主题代码

Html代码

    Dot-luv Theme
    Hot-sneaks Theme
    Flick Theme
    Ui-darkness Theme
    Vader Theme

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 的初步使用到此为止。

上一篇：12个常用的jQuery选择器

下一篇：jQuery-ui基础的弹出框