文章/答案/技术大牛

发布

社区首页 >专栏 >WEB入门之十九 UI

WEB入门之十九 UI

张哥编程

发布于 2024-12-17 04:22:14

38000

代码可运行

文章被收录于专栏：云计算linux云计算linux

运行总次数：0

代码可运行

本章简介

jQuery本身注重于后台，没有漂亮的界面，而jQuery UI的出现则补充了前者的不足，它提供了诸多的组件和华丽的界面，使用方便、灵活。

jQuery UI是在jQuery的基础上，利用jQuery的扩展性而设计的针对UI的插件。它提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等。本章将学习jQuery UI中的各种组件。

核心技能部分

9.1 jQuery UI简介

UI即User Interface，指的是用户界面。jQueryUI是以jQuery为基础的开源JavaScript网页用户界面插件。包含底层用户交互、动画特效和可更换主题的可视组件。开发人员可以直接用它来构建具有很好交互性的Web前端界面。所有插件经测试能兼容IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+和Google Chrome等浏览器。

jQuery UI主要分为4个部分：核心部分、交互行为组件、微件和动画效果组件。

核心：这是jQuery UI的核心代码，包含最底层、最基本的函数和初始化组件，供其他地方调用。

交互行为组件：交互部件是一些与鼠标交互相关的内容，包括Draggable（拖动）、Droppable（置放）、Resizable（缩放）、Selectable（选择）和Sortable（排序）等。

微件：主要是一些界面的扩展，包括Accordion（手风琴）、AutoComplete（自动完成）、Dialog（对话框）、Slider（滑块）、Tabs（选项卡）、DatePicker（日历）、ProgressBar（进度条）等。

我们可以从下载最新的jQuery UI库，目前版本是1.8.21。下载的时候可以有选择的进行定制下载。

下载后会得到一个压缩包，解压该文件，里面会有很多js文件和css文件，开发时需要导入这些文件才能使用jQuery UI组件。

9.1 Widgets微件

Widgets即小部件、微件，是跟HTML中的页面元素（例如：按钮、对话框等）比较相似的组件。jQuery UI提供的微件的界面更好看，功能更强大，详见表9-1-1所示。

表9-1-1 jQuery UI微件

微件名称	说明
Accordion	手风琴组件
Button	按钮组件
Dialog	对话框组件
Tabs	选项卡组件
Datepicker	日历组件

9.1.1 Accordion

Accordion即手风琴，这是一种常见的界面组件。我们先认识一下这个组件的最简单用法，参考代码如下所示。

示例9.1

<!DOCTYPE html>
<html>
<head>
    <title>示例9.1</title>
    <metahttp-equiv="Content-Type" content="text/html;charset=gb2312" />
<link rel="stylesheet"href="../../themes/base/jquery.ui.all.css">
    <scriptsrc="../../jquery-1.7.2.js"></script>
    <script src="../../ui/jquery.ui.core.js"></script>
    <scriptsrc="../../ui/jquery.ui.widget.js"></script>
    <scriptsrc="../../ui/jquery.ui.accordion.js"></script>
    <script>
    $(function() {
        $( "#acc" ).accordion();
    });
    </script>
</head>
<body>
<div id="acc">
    <h3><a href="#">我的家人</a></h3>
    <div>
        <ul>
            <li>Jack</li>
            <li>Tom</li>
            <li>Mary</li>
        </ul>
    </div>
    <h3><a href="#">我的好友</a></h3>
    <div>
        <ul>
            <li>Jack</li>
            <li>Tom</li>
            <li>Mary</li>
        </ul>
    </div>
    <h3><a href="#">我的同事</a></h3>
    <div>
        <ul>
            <li>Jack</li>
            <li>Tom</li>
            <li>Mary</li>
        </ul>
    </div>
    <h3><a href="#">我的同学</a></h3>
    <div>
        <ul>
            <li>Jack</li>
            <li>Tom</li>
            <li>Mary</li>
        </ul>
    </div>
</div>
</body>
</html>

上述代码加粗部分是我们实现手风琴组件必须要导入的文件，jquery.ui.all.css是一个包含了手风琴组件样式的文件；jquery-1.7.2.js是jQuery库文件；jquery.ui.widget.js包含了所有jQuery UI微件都需要用到的底层、核心函数；jquery.ui.accordion.js是实现手风琴组件的js文件。前四个文件几乎是在使用jQueryUI微件时都需要导入的文件。

上述代码使用accordion函数使一个id是acc的div元素初始化成了手风琴组件，见斜体部分。成为手风琴组件的元素需要满足以下条件：

Ø 尽量使用块状标签布局，否则布局会乱

Ø 每个组都分为标题和身体，上述代码中的超链接相当于标题，无序列表所在的div相当于身体，身体必须紧挨着标题

上述代码给我们展示的是jQuery中手风琴组件的默认效果，我们还可以通过该组件的相关参数来定制多种多样的手风琴组件。

accordion参数主要用来设置手风琴组件的外观，常用的参参数下所示：

Ø active：设置手风琴组件加载完毕时默认展开哪一组，默认是第一组。

Ø autoHeight：用来设置手风琴组件中的所有组的高度都一样，即采用最高组的高度，默认值是true。

Ø autoWidth：用来设置手风琴组件中的所有组的宽度都一样，即采用最宽组的宽度，

默认值是true。

Ø event：用来设置使用哪个事件来触发手风琴组件中每组的展开，默认值是click。

Ø fillSpace：用来设置手风琴组件的高度与其父容器一致，将覆盖autoHeight，默认值是false。

Ø icons：用来设置每组标题的图标，子属性header用来设置分组闭合时的图标，headerSelected用来设置分组展开时的图标。jQuery提供了超过150种的图标，请参考jQuery官方网站。

Ø collapsible：用来设置是否可以单独展开/闭合手风琴组件中的某个组，默认值是false。

参数的使用方式有三种：

1．初始化组件时设置参数的值

jQuery对象. accordion ( { 参数名：参数值，... ... } )

2．获得参数的值

jQuery对象. accordion ( "option" , "参数名" )

3．设置参数的值

jQuery对象. accordion ( "option" , "参数名" , 参数值 )

jQuery UI中其他组件参数的用法与之一样，后面不再多述。下面我们通过一个示例来演示上述部分参数的用法，参考代码如下所示。

示例9.2

//其他代码跟示例9.1一样

<script>
    $(function() {
        $( "#acc").accordion({active:3,event:"mouseover"});
        var icons = {
            header:"ui-icon-circle-arrow-e",
            headerSelected:"ui-icon-circle-arrow-s"
        };
        $("#acc" ).accordion("option","icons",icons);
    });
</script>

//其他代码跟示例9.1一样

上述代码设置手风琴组件默认展开第3组，通过鼠标悬浮事件来展开组，并且标题的图标也进行了更换

9.1.1 Button

Button即按钮，但是jQuery UI中的按钮丰富多样，包括类似于HTML中的按钮，以及复选按钮、单选按钮、工具栏等。我们先认识一下这个组件的最简单用法，参考代码如下所示。

示例9.3

<!DOCTYPE html>
<html>
<head>
    <metacharset="utf-8">
    <title>示例9.3</title>
    <linkrel="stylesheet"href="../../themes/base/jquery.ui.all.css">
    <scriptsrc="../../jquery-1.7.2.js"></script>
    <scriptsrc="../../ui/jquery.ui.core.js"></script>
    <scriptsrc="../../ui/jquery.ui.widget.js"></script>
    <scriptsrc="../../ui/jquery.ui.button.js"></script>
    <script>
    $(function() {
        $("input, a, span").button();
        $("a").click(
            function(){
                alert("鼠标单击事件有效");
        });
    });
    </script>
</head>
<body>
<span>span标签</span>
<input type="button" value="HTML按钮"/>
<a href="#">HTML超链接</a>
</body>
</html>

上述代码加粗部分是我们实现按钮组件必须要导入的文件，其中jquery.ui.button.js是实现按钮组件的js文件。

上述代码使用button函数使页面中的span、提交按钮和超链接初始化成了按钮组件，见斜体部分。button函数还可以把HTML中的radio、checkbox封装成Button组件，例如下面的代码。

示例9.4

<!DOCTYPE html>
<html>
<head>
    <metahttp-equiv="Content-Type" content="text/html;charset=gb2312" />
    <title>示例9.4</title>
    <linkrel="stylesheet"href="../../themes/base/jquery.ui.all.css">
    <scriptsrc="../../jquery-1.7.2.js"></script>
    <scriptsrc="../../ui/jquery.ui.core.js"></script>
    <scriptsrc="../../ui/jquery.ui.widget.js"></script>
    <scriptsrc="../../ui/jquery.ui.button.js"></script>
    <script>
    $(function() {
        $("input").button();
    });
    </script>
</head>
<body>
    <inputtype="checkbox" id="check1"/><labelfor="check1">篮球</label>
    <inputtype="checkbox" id="check2"/><labelfor="check2">足球</label>
     <br/><br/>
    <inputtype="radio" id="radio1" name="radio"checked="checked"/>
     <labelfor="radio1">男</label>
    <inputtype="radio" id="radio2" name="radio"/>
     <labelfor="radio2">女</label>
</body>
</html>

要使HTML中的radio和checkbox能顺利被封装成Button组件，就必须为每个radio或checkbox设置一个label标签，该标签用来设置文本信息。它的for属性用来关联某个radio或checkbox，即该属性的值是某个radio或checkbox的id。上述代码的运行效果如图9.1.6所示。

上述代码给我们展示的是jQuery中按钮组件的默认效果，我们还可以通过该组件的相关参数来定制多种多样的按钮组件。

Button参数主要用来设置按钮组件的外观，常用的参数下所示：

Ø text：用来设置是否显示按钮上的文本，默认值是true。

icons：用来设置按钮上的图标，子属性primary用来设置文本左边的图标，子属性

secondary用来设置文本右边的图标。

Ø label：用来设置按钮上的文本信息。

下面我们通过一个示例来演示上述参数的用法，参考代码如下所示。

示例9.5

<!DOCTYPE html>
<html>
<head>
    <metahttp-equiv="Content-Type" content="text/html;charset=gb2312" />
    <title>示例9.5</title>
    <linkrel="stylesheet"href="../../themes/base/jquery.ui.all.css">
    <scriptsrc="../../jquery-1.7.2.js"></script>
    <scriptsrc="../../ui/jquery.ui.core.js"></script>
    <scriptsrc="../../ui/jquery.ui.widget.js"></script>
    <scriptsrc="../../ui/jquery.ui.button.js"></script>
    <script>
    $(function() {
        $("span").button({
            icons: {
                primary:"ui-icon-locked"
            },
            text: false
        });
        $("input").button({
            icons: {
                primary:"ui-icon-locked"
            }
        });
        $("a").button({
            icons: {
                primary:"ui-icon-gear",
                secondary:"ui-icon-triangle-1-s"
            }
        });
        $("div").button({
            icons: {
                primary:"ui-icon-gear",
                secondary:"ui-icon-triangle-1-s"
            },
            text: false
        });
    });
    </script>
</head>
<body>
    <span>span标签</span><br/><br/>
    <inputtype="button" value="HTML按钮"/><br/><br/>
    <ahref="#">HTML超链接</a><br/><br/>
    <div>div标签</div>
</body>
</html>

上述代码给Button组件设置了几种不同的图标

9.1.1 Datepicker

Datepicker即日期选择器，类似于JavaScript中的日历控件。jQuery UI中的日期选择器灵活易用，可自由定制多种风格的界面。我们先认识一下这个组件的最简单用法，参考代码如下所示。

示例9.6

<!DOCTYPE html>
<html>
<head>
    <title>示例9.6</title>
    <metahttp-equiv="Content-Type" content="text/html;charset=gb2312" />
    <linkrel="stylesheet" href="../../themes/base/jquery.ui.all.css">
    <scriptsrc="../../jquery-1.7.2.js"></script>
    <scriptsrc="../../ui/jquery.ui.core.js"></script>
    <scriptsrc="../../ui/jquery.ui.widget.js"></script>
    <scriptsrc="../../ui/jquery.ui.datepicker.js"></script>
    <script>
    $(function() {
        $( "#dp").datepicker();
    });
    </script>
</head>
<body>
请选择日期: <input type="text" id="dp">
</body>
</html>

上述代码加粗部分是我们实现日期选择器组件必须要导入的文件，其中jquery.ui.datepicker.js是实现该组件的js文件。

上述代码使用datepicker函数为页面中的某个文本框提供了日期选择器，见斜体部分。

上述代码给我们展示的是jQuery中日期选择器组件的默认效果，我们还可以通过该组件的相关参数来定制多种多样的日期选择器。

Datepicker参数主要用来设置日期选择器组件的外观，常用的参数下所示：

Ø dateFormat : 用来设置选取日期的格式，例如mm/dd/yy、yy-mm-dd等。

Ø changeMonth/changeYear : 用来设置月份和年份以下拉列表框的形式显示，默认值是false。

Ø showOtherMonths : 用来设置是否在日期面板中显示其他月份的日期，默认值是false。

Ø selectOtherMonths : 用来设置是否可以在日期面板中选择其他月份的日期，默认值是false。

Ø dayNamesShort/dayNamesMin : 用来设置日期面板上显示的星期的字符串，默认是英文，例如Sun、Mon、Tue等。

Ø monthNamesShort/monthNamesMin :用来设置日期面板上显示的月份的字符串，默认是英文，例如Jan、Feb、Mar等。

下面我们通过一个示例来演示上述参数的用法，参考代码如下所示。

示例9.7

<!DOCTYPE html>
<html>
<head>
    <title>示例9.7</title>
    <metahttp-equiv="Content-Type" content="text/html;charset=gb2312" />
    <linkrel="stylesheet"href="../../themes/base/jquery.ui.all.css">
    <scriptsrc="../../jquery-1.7.2.js"></script>
    <scriptsrc="../../ui/jquery.ui.core.js"></script>
    <scriptsrc="../../ui/jquery.ui.widget.js"></script>
    <scriptsrc="../../ui/jquery.ui.datepicker.js"></script>
    <script>
    $(function(){
        $("#dp").datepicker({changeMonth:true,
        changeYear:true,showOtherMonths:true,selectOtherMonths:true});
        $("#dp").datepicker("option","monthNamesShort",['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']);
        $("#dp").datepicker("option","dayNamesMin",['日','一','二','三','四','五','六']);
        $("#format").change(function(){
            $("#dp").datepicker("option","dateFormat", $(this).val());
        });
    });
    </script>
</head>
<body>
请选择格式：
    <selectid="format">
        <option value="mm/dd/yy">mm/dd/yy</option>
        <option value="yy-mm-dd">yy-mm-dd</option>
        <option value="d MM, y">d MM, y</option>
        <optionvalue="DD, d MM, yy">DD, d MM, yy</option>
    </select><br/><br/>
请选择日期: <input type="text" id="dp">
</body>
</html>

9.1.1 Dialog

Dialog即对话框，类似于DOM中的alert或confirm，但是jQuery中的对话框更加美观易用，它可以浮动、可以拖动、可以改变大小。我们先认识一下这个组件最简单的用法，参考代码如下所示。

示例9.8

<!DOCTYPE html>
<html>
<head>
    <title>示例9.8</title>
    <metahttp-equiv="Content-Type" content="text/html;charset=gb2312" />
    <linkrel="stylesheet"href="../../themes/base/jquery.ui.all.css">
    <script src="../../jquery-1.7.2.js"></script>
    <scriptsrc="../../ui/jquery.ui.core.js"></script>
    <scriptsrc="../../ui/jquery.ui.widget.js"></script>
    <scriptsrc="../../ui/jquery.ui.mouse.js"></script>
    <scriptsrc="../../ui/jquery.ui.draggable.js"></script>
    <scriptsrc="../../ui/jquery.ui.resizable.js"></script>
    <scriptsrc="../../ui/jquery.ui.position.js"></script>
    <scriptsrc="../../ui/jquery.ui.dialog.js"></script>
    <script>
    $(function() {
        $( "#dt").dialog();
    });
    </script>
</head>
<body>
<div id="dt" title="系统提示">
    欢迎使用本系统
</div>
</body>
</html>

上述代码加粗部分是我们实现对话框组件必须要导入的文件，其中jquery.ui.dialog.js是实现对话框组件的js文件；jquery.ui.mouse.js提供了鼠标拖动对话框的支持；jquery.ui.draggable.js实现了鼠标拖动；jquery.ui.position.js提供了对话框居中显示功能。>上述代码给Button组件设置了几种不同的图标

上述代码使用dialog函数使一个id是dt的div元素初始化成了对话框组件，见斜体部分。

上述代码给我们展示的是jQuery中对话框的默认效果，我们还可以通过该组件的相关参数来定制多种多样的对话框。

Dialog参数主要用来设置对话框的外观，常用的参数下所示：

Ø buttons：用来设置在对话框上现实哪些按钮，同时可指导按钮对应的事件函数。

Ø closeOnEscape：用来设置是否可以通过按下ESC键来关闭对话框，默认值为true。

Ø draggable：用来设置是否可以拖拽对话框进行移动，默认值为true。

Ø height/width：用来设置对话框的高/宽。

Ø modal：用来设置该对话框是否为模式对话框，默认值为false。

Ø position：用来设置对话框在网页中显示的位置，默认值为center，其他取值有left、right、top和bottom。

Ø resizable：用来设置对话框是否允许调整大小，默认值为true。

下面我们通过一个示例来演示上述参数的用法，参考代码如下所示。

示例9.9

<!DOCTYPE html>
<html>
<head>
    <title>示例9.9</title>
    <metahttp-equiv="Content-Type" content="text/html;charset=gb2312" />
    <linkrel="stylesheet"href="../../themes/base/jquery.ui.all.css">
    <scriptsrc="../../jquery-1.7.2.js"></script>
    <scriptsrc="../../ui/jquery.ui.core.js"></script>
    <scriptsrc="../../ui/jquery.ui.widget.js"></script>
    <scriptsrc="../../ui/jquery.ui.mouse.js"></script>
    <scriptsrc="../../ui/jquery.ui.button.js"></script>
    <scriptsrc="../../ui/jquery.ui.draggable.js"></script>
    <scriptsrc="../../ui/jquery.ui.position.js"></script>
    <script src="../../ui/jquery.ui.dialog.js"></script>
    <script>
    $(function() { 
        $("#dialog-confirm" ).dialog({
            resizable: false,
            height:220,
            width:350,
            modal: true,
            buttons: [{
                         text: "登录",
                    click: function(){$(this).dialog("close"); }
                        },
                    {
                         text: "取消",
                    click: function(){$(this).dialog("close"); }
                        }]
        });
    });
    </script>
</head>
<body>
<div id="dialog-confirm" title="用户登录">
    登录名称：<inputtype="text"/><br/><br/>
    登录密码：<inputtype="password"/>
</div>
</body>
</html>

上述代码在示例9.8的基础上多导入了一个jquery.ui.button.js文件，该文件不是必须的，它的作用是可以把页面上原始的input按钮自动封装成jQuery UI中的Button。通过图9.1.11可以看到，该对话框不能改变大小，是一个带有两个按钮的模式对话框。

9.1.1 Tabs

Tabs即选项卡组件，跟手风琴组件很相似，只不过选项卡是横向排列分组，而手风琴组件是纵向排列分组。我们先认识一下这个组件最简单的用法，参考代码如下所示。

示例9.10

<!DOCTYPE html>
<html>
<head>
    <title>示例9.10</title>
    <metahttp-equiv="Content-Type" content="text/html;charset=gb2312" />
    <linkrel="stylesheet"href="../../themes/base/jquery.ui.all.css">
    <scriptsrc="../../jquery-1.7.2.js"></script>
    <scriptsrc="../../ui/jquery.ui.core.js"></script>
    <scriptsrc="../../ui/jquery.ui.widget.js"></script>
    <scriptsrc="../../ui/jquery.ui.tabs.js"></script>
    <script>
    $(function() {
        $("#t" ).tabs();
    });
    </script>
</head>
<body>
<div id="t">
    <ul>
        <li><a href="#tabs-1">标题1</a></li>
        <li><a href="#tabs-2">标题2</a></li>
        <li><a href="#tabs-3">标题3</a></li>
    </ul>
    <divid="tabs-1">
        选项卡1
    </div>
    <divid="tabs-2">
        选项卡2
    </div>
    <divid="tabs-3">
        选项卡3
    </div>
</div>
</body>
</html>

上述代码加粗部分是我们实现选项卡组件必须要导入的文件，其中jquery.ui.tabs.js是实现选项卡组件的js文件。ine-height:150%;font-family:宋体;mso-ascii-font-family:Calibri;mso-hansi-font-family:Calibri;mso-bidi-font-family:"Times New Roman";mso-ansi-language:EN-US;mso-fareast-language:ZH-CN;mso-bidi-language:AR-SA'>提供了对话框居中显示功能。>上述代码给Button组件设置了几种不同的图标

上述代码使用tabs函数使一个id是t的div元素初始化成了选项卡组件，见斜体部分。选项卡的标题使用列表实现，选项卡的身体使用div实现，并且通过标题列表中的超链接把标题和对应的身体关联起来，即超链接href属性的值是下面某个div的id。

上述代码给我们展示的是jQuery中选项卡的默认效果，我们还可以通过该组件的相关参数来定制多种多样的选项卡。

Tabs参数主要用来设置选项卡的外观，常用的参数下所示：

Ø selected : 用来设置选项卡默认显示的tab，默认值是0，即第一个选项卡。

Ø event : 用来设置通过哪个事件来触发选项卡的切换，默认是click。

Ø collapsible : 用来设置是否可以单独显示/关闭某个tab，默认值是false。

下面我们通过一个示例来演示上述参数的用法，参考代码如下所示。

示例9.11

<!DOCTYPE html>
<html>
<head>
    <title>示例9.11</title>
    <meta http-equiv="Content-Type"content="text/html; charset=gb2312" />
    <linkrel="stylesheet"href="../../themes/base/jquery.ui.all.css">
    <scriptsrc="../../jquery-1.7.2.js"></script>
    <scriptsrc="../../ui/jquery.ui.core.js"></script>
    <script src="../../ui/jquery.ui.widget.js"></script>
    <scriptsrc="../../ui/jquery.ui.tabs.js"></script>
    <script>
    $(function() {
        $( "#t" ).tabs({
            event:"mouseover",collapsible:true,selected:2
        });
    });
    </script>
</head>
<body>
<div id="t">
    <ul>
        <li><a href="#tabs-1">标题1</a></li>
        <li><a href="#tabs-2">标题2</a></li>
        <li><a href="#tabs-3">标题3</a></li>
    </ul>
    <divid="tabs-1">
        选项卡1
    </div>
    <divid="tabs-2">
        选项卡2
    </div>
    <divid="tabs-3">
        选项卡3
    </div>
</div>
</body>
</html>

-font-family:Calibri;mso-hansi-font-family:Calibri;mso-bidi-font-family:"Times New Roman";mso-ansi-language:EN-US;mso-fareast-language:ZH-CN;mso-bidi-language:AR-SA'>组件设置了几种不同的图标

9.1 交互行为组件

Web前端的主要作用之一就是跟用户进行交互，无论是数据上的交互，还是界面上的交互。而jQuery UI中的交互行为组件主要针对界面上的交互，例如鼠标拖拽、排序、调整大小等，详见表9-1-2所示。

表9-1-2 交互行为组件

组件名称	说明
Draggable	该组件可以使鼠标拖动页面元素
Resizable	该组件可以使鼠标调整页面元素的大小

9.1.1 Draggable

Draggab即鼠标拖动，主要可以实现通过鼠标拖动页面元素，例如拖动层、拖动图片或表格等。我们先认识一下Draggab最简单的用法，参考代码如下所示。

示例9.12

<!DOCTYPE html>
<html>
<head>
    <title>示例9.12</title>
    <metahttp-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <linkrel="stylesheet"href="../../themes/base/jquery.ui.all.css">
    <scriptsrc="../../jquery-1.7.2.js"></script>
    <scriptsrc="../../ui/jquery.ui.core.js"></script>
    <scriptsrc="../../ui/jquery.ui.widget.js"></script>
    <scriptsrc="../../ui/jquery.ui.mouse.js"></script>
    <scriptsrc="../../ui/jquery.ui.draggable.js"></script>
    <style type="text/css">
            #mydiv {
                width: 300px;
                height: 200px;
                background:silver;
            }
        </style>
        <script>
           $(document).ready(function(){
                $("#mydiv").draggable();
              $("#myimg").draggable();
              $("#mytable").draggable();
            });
        </script>
    </head>
    <body>
        <divid="mydiv">
            <h3>我是可以拖动的层</h3>
        </div>
        <img id="myimg" src="images/test.gif"/>
        <table id="mytable" border="1">
            <tr>
                <td>哈</td>
                <td>哈哈</td>
                <td>哈哈哈</td>
            </tr>
            <tr>
                <td>哈</td>
                <td>哈哈</td>
                <td>哈哈哈</td>
            </tr>
            <tr>
                <td>哈</td>
                <td>哈哈</td>
                <td>哈哈哈</td>
            </tr>
        </table>
    </body>
</html>

上述代码加粗部分是我们实现鼠标拖动必须要导入的文件，其中jquery.ui.draggable.js是实现鼠标拖动的js文件。

9.1.1 Resizable

页面上的HTML元素大部分是不可以动态调整大小的，但在实际开发中是有这种需求的。jQuery中的Resizable可以帮助开发人员快速、轻松的实现这个需求。下面先看一下Resizable最简单的用法，参考代码如下所示。

示例9.13

<!DOCTYPE html>
<html>
<head>
    <title>示例9.13</title>
    <metahttp-equiv="Content-Type" content="text/html;charset=gb2312" />
    <linkrel="stylesheet" href="../../themes/base/jquery.ui.all.css">
    <scriptsrc="../../jquery-1.7.2.js"></script>
    <scriptsrc="../../ui/jquery.ui.core.js"></script>
    <scriptsrc="../../ui/jquery.ui.widget.js"></script>
    <scriptsrc="../../ui/jquery.ui.mouse.js"></script>
    <script src="../../ui/jquery.ui.resizable.js"></script>
    <style>
    #rd { width: 150px; height:150px; padding: 0.5em; border:#999999 thin solid}
    </style>
    <script>
    $(function() {
        $( "#rd" ).resizable();
        $( "#ta" ).resizable();
    });
    </script>
</head>
<body>
<div id="rd">
    这是可自由改变大小的div
</div>
<br/>
<textarea cols="50" rows="20"id="ta">
    这是可自由改变大小的文本域
</textarea>
</body>
</html>

上述代码加粗部分是我们实现鼠标拖动必须要导入的文件，其中jquery.ui.resizable.js是实现调整大小的js文件。

9.1 动画效果库

jQuery UI提供了一个动画效果库，它扩充了前面我们讲的动画特效函数和animate函数，实现了大量现成的动画特效，详见表9-1-3所示。

表9-1-3 动画效果库

函数名称	说明
show / hide	元素显示/隐藏时的动画效果，扩充了前面的show / hide函数
effect	主要通过改变大小、位置等实现动画特效

9.1.1 show / hide函数

jQuery UI动画特效库中的show / hide函数对前面讲的show /hide函数进行了功能上的扩充，动画效果更多，可以灵活定制。具体语法如下所示：

语法

jQuery对象. show / hide ( effectName, [options] , [speed] , [callback] )

该函数有四个参数，第一个是必须的，后面都是可选的，下面是参数介绍。

Ø effectName ：设置效果名称，详见表9-1-4所示。

Ø options ：设置能控制元素大小、位置的参数，通常可采用默认设置。

Ø speed ：设置动画的速度，取值有slow，normal和fast ，也可自定义一个数字，单位是毫秒。

Ø callback ：设置动画执行完后的回调函数。

表9-1-4 效果列表

效果名称	说明	对应JS文件
blind	从上向下/从下向上收缩元素	jquery.effects.blind.js
bounce	上下晃动元素	jquery.effects.bounce.js
clip	上下同时收缩元素	jquery.effects.clip.js
drop	向左边移动并提升/降低透明度，直到显示/隐藏	jquery.effects.drop.js
explode	将元素拆分成9宫格，向外/内扩展，直到隐藏/显示	jquery.effects.explode.js
fold	向左展开，再向下展开，直到显示向上收起，再向左收起，直到隐藏	jquery.effects.fold.js
highlight	使元素高亮	jquery.effects.highlight.js
pulsate	使元素闪烁	jquery.effects.pulsate.js
scale	元素四周从中心同时扩展直到显示元素四周从外围同时收缩直到隐藏	jquery.effects.scale.js
shake	左右晃动元素	jquery.effects.shake.js
slide	从左往右滑动元素直到全部显示从右往左滑动元素直到全部隐藏	jquery.effects.slide.js

下面我们通过一个示例来演示上述动画的效果，参考代码如下所示。

示例9.14

<!DOCTYPE html>
<html>
<head>
    <title>示例9.14</title>
    <metahttp-equiv="Content-Type" content="text/html;charset=gb2312" />
    <linkrel="stylesheet"href="../../themes/base/jquery.ui.all.css">
    <scriptsrc="../../jquery-1.7.2.js"></script>
    <scriptsrc="../../ui/jquery.effects.core.js"></script>
    <script src="../../ui/jquery.effects.blind.js"></script>
    <scriptsrc="../../ui/jquery.effects.bounce.js"></script>
    <scriptsrc="../../ui/jquery.effects.clip.js"></script>
    <scriptsrc="../../ui/jquery.effects.drop.js"></script>
    <scriptsrc="../../ui/jquery.effects.explode.js"></script>
    <scriptsrc="../../ui/jquery.effects.fold.js"></script>
    <scriptsrc="../../ui/jquery.effects.highlight.js"></script>
    <scriptsrc="../../ui/jquery.effects.pulsate.js"></script>
    <scriptsrc="../../ui/jquery.effects.scale.js"></script>
    <scriptsrc="../../ui/jquery.effects.shake.js"></script>
    <scriptsrc="../../ui/jquery.effects.slide.js"></script>
    <style>
    .toggler { width:500px; height:200px;}
    #effect { width:400px; height:160px;padding:0.4em;  border:#666666 thinsolid}
    #effect h3 { margin:0;padding:0.4em; text-align:center; background-color:#CCCCCC}
    </style>
    <script>
    $(function() {
        function runEffect() {
            var selectedEffect =$("#effectTypes").val();
            $("#effect").show(selectedEffect,null, "slow", callback);
        };
        function callback() {
            $("#effect").removeAttr("style").fadeOut();
        };

        $("#btn").click(function() {
            runEffect();
        });
    });
    </script>
</head>
<body>
<div class="toggler">
    <divid="effect">
        <h3>show动画测试</h3>
        <p>
        <pre>

UI即User Interface，指的是用户界面。
jQuery UI是以jQuery为基础的开源JavaScript网页用户界面插件。
包含底层用户交互、动画特效和可更换主题的可视组件。
开发人员可以直接用它来构建具有很好交互性的Web前端界面。
所有插件经测试能兼容IE6, Firefox和Google Chrome等浏览器。
        </pre>
        </p>
    </div>
</div>
<select id="effectTypes">
    <optionvalue="blind">Blind</option>
    <option value="bounce">Bounce</option>
    <optionvalue="clip">Clip</option>
    <optionvalue="drop">Drop</option>
    <optionvalue="explode">Explode</option>
    <optionvalue="fold">Fold</option>
    <optionvalue="highlight">Highlight</option>
    <optionvalue="pulsate">Pulsate</option>
    <optionvalue="scale">Scale</option>
    <optionvalue="shake">Shake</option>
    <optionvalue="size">Size</option>
    <optionvalue="slide">Slide</option>
</select>
<input type="button" value="执行"id="btn"/>
</div>
</body>
</html>

上述代码为了在一个示例中集中演示所有的动画效果，所以导入了大量的JS文件。在实际开发中，需要用哪个动画效果就导入哪个JS文件即可。

由于show函数的第1个参数是效果名，所以我们把所有的效果名都放在了下拉列表框中。用户选择某个选项后，

上述代码中的斜体部分调用了show函数，把下拉列表框中选中项的值作为第一个参数使用。hide函数的用法跟show函数一样，只不过它是用来实现元素隐藏时的动画。我们在上述代码的基础上实现了一个演示hide函数的示例，参考代码如下所示。

示例9.15

//部分代码省略，跟示例9.14一样

<script>
    $(function() {
        function runEffect() {
            var selectedEffect =$("#effectTypes").val();
            $("#effect").hide(selectedEffect,null, "slow", callback);
        };
        function callback() {
            $("#effect").removeAttr("style");
        };
        $("#btn").click(function() {
            runEffect();
        });
    });
    </script>

//部分代码省略，跟示例9.14一样

上述代码除脚本外都和上个示例一样，斜体部分调用了hide函数，把下拉列表框中选中项的值作为第一个参数使用。

9.1.1 effect函数

effect函数的用法和show/hide函数一样，只不过该函数用在已经显示到了页面上的元素，然后主要通过改变元素形状（大小、位置等）来实现动画特效的，具体语法如下所示：

语法

jQuery对象 . effect ( effectName , [options] , [speed] , [callback] )

各个参数在前面已经讲过，这里不再多述。

下面我们修改上面的代码，使用effect函数来演示各种动画特效，参考代码如下所示。

示例9.16

//部分代码省略，跟示例9.14一样

<script>
    $(function() {
        function runEffect() {
            var selectedEffect =$("#effectTypes").val();
            $("#effect").effect(selectedEffect,null, "slow", callback);
        };
        function callback() {
            $("#effect").removeAttr("style");
        };
        $("#btn").click(function() {
            runEffect();
        });
    });
    </script>

//部分代码省略，跟示例9.14一样

9.1.1 下载主题

主题即Themes，是指一整套、一系列样式的集合，相当于网页的皮肤。jQuery为UI组件提供了现成的多个主题，我们可以从其官方网站（

http://jqueryui.com/download ）上直接下载si-font-family:Calibri;mso-bidi-font-family:"Times New Roman";mso-ansi-language:EN-US;mso-fareast-language:ZH-CN;mso-bidi-language:AR-SA'>函数，把下拉列表框中选中项的值作为第一个参数使用。

选择一个主题，例如“UIlightness”，下载后会得到一个压缩包文件，该文件中包含了大量的CSS样式文件、图片和JS文件等。

9.1.1 应用主题

解压下载到的主题压缩文件，找到其中以主题名命名的文件夹，例如ui-lightness，该文件夹中存放的就是跟该主题相关的CSS样式文件和图片，哪个网页需要用这个主题只需要导入其中的jquery.ui.all.css样式文件即可。

前面我们写的示例没有应用任何主题，例如下面的代码：

//其他代码省略

<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">

<scriptsrc="../../jquery-1.7.2.js"></script>

<scriptsrc="../../ui/jquery.ui.core.js"></script>

<scriptsrc="../../ui/jquery.ui.widget.js"></script>

//其他代码省略

加粗部分使用link标签导入了base文件夹中的jquery.ui.all.css文件，该文件是jQuery UI默认无主题样式。如果需要使用某个主题，例如lightness，只需做如下修改即可：

jQuery UI主题比较多，这里不再一一展现效果图了。另外，jQuery官方网站还提供了自定义主题的功能，地址是http://jqueryui.com/themeroller/。如需自定义主题，可以访问该地址，自定义好后jQuery会自动生成相关的主题文件，我们只需下载下来即可。

本章总结

本章我们主要学习jQuery UI，包括微件、交互行为组件、动画效果库以及主题。微件是jQuery提供的现成的一些页面控件，简单易用；交互行为组件主要指的是用户通过鼠标可以进行拖拽和调整大小；动画效果库提供了大量的动画样式，通过一些函数即可实现。

主题就是UI的皮肤，jQuery在其官方网站上提供了多个主题，我们可以根据需要下载使用。

任务实训部分

1：实现工具栏

训练技能点

Ø jQuery Button组件

需求说明

使用jQuery Button组件实现工具栏。

实现步骤

（1）实现图9.2.1所示的界面，参考代码如下所示。

<div class="demo">
<span id="toolbar" class="ui-widget-headerui-corner-all">
    <buttonid="beginning">go to beginning</button>
    <buttonid="rewind">rewind</button>
    <buttonid="play">play</button>
    <buttonid="stop">stop</button>
    <buttonid="forward">fast forward</button>
    <buttonid="end">go to end</button>
    <inputtype="checkbox" id="shuffle" /><labelfor="shuffle">Shuffle</label>
    <spanid="repeat">
        <input type="radio" id="repeat0"name="repeat" checked="checked" />
    <label for="repeat0">No Repeat</label>
        <input type="radio" id="repeat1"name="repeat" />
         <labelfor="repeat1">Once</label>
        <input type="radio" id="repeatall"name="repeat" />
         <labelfor="repeatall">All</label>
    </span>
</span>
</div>

（2）调用jQuery中的button函数改变按钮的样式，部分参考代码如下所示。

$( "#beginning" ).button({
            text: false,
            icons: {
                primary: "ui-icon-seek-start"
            }
        });
        $( "#rewind" ).button({
            text: false,
            icons: {
                primary: "ui-icon-seek-prev"
            }
        });
        $( "#play" ).button({
            text: false,
            icons: {
                primary: "ui-icon-play"
            }
        })

2：手风琴相册

训练技能点

Ø jQuery Accordion组件

需求说明

实现图9.2.2所示的界面，右侧是手风琴效果，主要是图片介绍，左侧显示相关的图片。切换手风琴中的分组时，左侧图片发生相应的改变。

图9.2.2 手风琴相册

3：可拖动的菜单

训练技能点

Ø jQuery Draggable

需求说明

在实训任务1的基础上，实现通过鼠标可以拖动工具栏，但是只能拖动到页面的上端或下端。如果拖动到了其他地方，当松开鼠标时，工具栏回归原位。

4：来信闪烁

训练技能点

Ø jQuery effect函数

需求说明

图9.2.3是一个QQ工具栏，现在要求使用effect函数使工具栏上的邮箱图标闪烁。

图9.2.3 来信闪烁

实现思路

邮箱图标是一个图片，只需要使用effect函数实现该图片的闪烁效果即可。

关键代码

<link href="jquery.ui.all.css"type="text/css" rel="stylesheet"/>
<script src="jquery-1.7.2.min.js"></script> 

 <scriptsrc="jquery.effects.pulsate.js"></script>
<script src="jquery.effects.core.js"></script> </head> <body> 

  $("#ad").effect("pulsate",null,500,null);
<div id="ad"><img src="9.2.4.jpg"/></div> </body> </html> <script> 

 </script>