第12章 jQuery动画与UI插件_第1页
第12章 jQuery动画与UI插件_第2页
第12章 jQuery动画与UI插件_第3页
第12章 jQuery动画与UI插件_第4页
第12章 jQuery动画与UI插件_第5页
已阅读5页，还剩32页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

高等学校规划教材Web前端开发实例教程（第2版）——HTML5+CSS3+JavaScript+jQuery第12章jQuery动画与UI插件目录12.1jQuery的动画方法简介12.2显示与隐藏效果12.3淡入淡出效果12.4滑动效果12.5jQueryUI简介12.6jQueryUI的常用插件12.1jQuery的动画方法简介12.1jQuery的动画方法简介 jQuery的动画方法分为4类。基本动画方法：既有透明度渐变，又有滑动效果，是常用的动画效果方法。滑动动画方法：仅适用滑动渐变动画效果。淡入淡出动画方法：仅适用透明度渐变动画效果。自定义动画方法：作为上述三种动画方法的补充和扩展。12.2显示与隐藏效果12.2.1隐藏元素的方法12.2.2显示元素的方法12.2.1隐藏元素的方法 hide()方法用于隐藏页面中可见的元素。有两种语法格式。 1．格式一hide() 2．格式二 格式二是带参数的形式，用于以优雅的动画隐藏所有匹配的元素，并在隐藏完成后可选择地触发一个回调函数，格式如下：hide(speed,[callback])12.2.2显示元素的方法 show()方法用于显示页面中隐藏的元素。有两种语法格式。 1．格式一show() 2．格式二 格式二是带参数形式，用于以优雅的动画显示所有匹配的元素，并在显示完成后可选择地触发一个回调函数，语法格式如下：show(speed,[callback])12.2.2显示元素的方法 【例12-1】显示与隐藏动画效果示例。12.3淡入淡出效果12.3.1淡入效果12.3.2淡出效果12.3.3元素的不透明效果12.3.4交替淡入淡出效果12.3.1淡入效果 fadeIn()方法用于淡入显示已隐藏的元素。与show()方法不同的是，fadeIn()方法只是改变元素的不透明度，该方法会在指定的时间内提高元素的不透明度，直到元素完全显示。 其语法格式如下：fadeIn(speed,callback)12.3.2淡出效果 jQuery中的fadeOut()方法用于淡出可见元素。格式如下：fadeOut(speed,callback)【例12-2】淡入与淡出效果示例。12.3.3元素的不透明效果

fadeTo()方法可以把元素的不透明度以渐进方式调整到指定的值。这个动画效果只是调整了元素的不透明度，而匹配元素的高度和宽度不会发生变化。该方法的基本语法格式如下：fadeTo(speed,opacity,callback)12.3.4交替淡入淡出效果

jQuery中的fadeToggle()方法可以在fadeIn()与fadeOut()方法之间进行切换。如果元素已淡出，则fadeToggle()会向元素添加淡入效果。如果元素已淡入，则fadeToggle()会向元素添加淡出效果。fadeToggle()方法的基本语法格式如下：fadeToggle(speed,callback)12.4滑动效果12.4.1向下展开效果12.4.2向上收缩效果12.4.3交替伸缩效果12.4.1向下展开效果

jQuery中提供了slideDown()方法用于向下滑动元素，该方法通过使用滑动效果，将逐渐显示隐藏的被选元素，直到元素完全显示为止，在显示元素后触发一个回调函数。

该方法实现的效果适用于通过jQuery隐藏的元素，或者在CSS中声明display:none的元素。其语法格式如下：slideDown(speed,[callback])12.4.2向上收缩效果

jQuery中的slideUp()方法用于向上滑动元素，从而实现向上收缩效果，直到元素完全隐藏为止。该方法实际上是改变元素的高度，如果页面中一个元素的display属性值为none，则当调用slideUp()方法时，元素将由下到上缩短显示。其语法格式如下：$(selector).slideUp(speed,callback)12.4.3交替伸缩效果

jQuery中的slideToggle()方法通过使用滑动效果（高度变化）来切换元素的可见状态。在使用slideToggle()方法时，如果元素是可见的，就通过减小高度使全部元素隐藏；如果元素是隐藏的，就增加元素的高度使元素最终全部可见。其语法格式如下：$(selector).slideToggle(speed,callback)12.4.3交替伸缩效果

【例12-3】滑动效果示例。单击“向下展开”按钮，div元素中的内容从上往下逐渐展开；单击“向上收缩”按钮，div元素中的内容从下往上逐渐折叠；单击“交替伸缩”按钮，div元素中的内容可以向下展开也可以向上收缩。12.5jQueryUI简介12.5.1jQueryUI概述12.5.2jQueryUI的下载12.5.3jQueryUI的使用12.5.4jQueryUI的工作原理12.5.1jQueryUI概述

1．jQueryUI的特性

jQueryUI是以jQuery为基础开源JavaScript网页用户界面代码库，它包含底层用户交互、动画、特效和可更换主题可视控件。

2．jQueryUI与jQuery的区别

1）jQuery是一个js库，主要提供的功能是选择器、属性修改和事件绑定等。

2）jQueryUI是在jQuery的基础上，利用jQuery的扩展性设计的插件，提供了一些常用的界面元素。12.5.2jQueryUI的下载

在使用jQueryUI之前，需要下载jQueryUI库，步骤如下。

1）在浏览器中输入其官网网址。

2）单击“CustomDownload”按钮，进入jQueryUI的DownloadBuilder页面。

3）在DownloadBuilder页面的左下角，用户可以从这些提供的主题中选择一个。

4）单击“Download”按钮，即可下载选择的jQueryUI。12.5.3jQueryUI的使用

在网页中使用jQueryUI插件时，需要将解压之后的jquery-ui-1.12.1.custom文件夹复制到网页所在的文件夹下，然后在网页的<head>区域添加jquery-ui.css文件、jquery-ui.js文件及external/jquery文件夹下jquery.js文件的引用，代码如下：<linkrel="stylesheet"href="jquery-ui-1.12.1.custom/jquery-ui.css"/><scriptsrc="jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script><scriptsrc="jquery-ui-1.12.1.custom/jquery-ui.js"></script>12.5.4jQueryUI的工作原理

1．安装

当安装插件时，生命周期开始，只需要在一个或多个元素上调用插件，即安装了插件。

2．方法（1）option方法（2）disable方法（3）enable方法（4）destroy方法（5）widget方法12.5.4jQueryUI的工作原理

3．事件

所有的jQueryUI插件都有和它们各种行为相关的事件，用于在状态改变时通知用户。例如，可以绑定进度条的change事件，一旦值发生变化就触发，代码如下：$("#elem").bind("progressbarchange",function(){alert("进度条的值发生了改变!");});

每个事件都有一个相对应的回调，作为选项进行呈现。12.6jQueryUI的常用插件12.6.1折叠面板12.6.2自动完成12.6.3标签页12.6.1折叠面板

折叠面板的常用选项及说明如表12-2所示。12.6.1折叠面板

折叠面板的常用方法及说明如表12-3所示。12.6.1折叠面板

折叠面板的常用事件及说明如表12-4所示。12.6.1折叠面板

【例12-4】实现折叠面板，默认第一个面板为展开状态。12.6.2自动完成

自动完成（Autocomplete）用来根据用户输入的值进行搜索和过滤，让用户快速找到并从预设值列表中选择。

自动完成部件（AutocompleteWidget）使用jQueryUICSS框架来定义它的外观和感观的样式。如果需要使用自动完成部件指定的样式，则可以使用下面的CSSclass名称。ui-autocomplete：用于显示匹配用户的菜单（menu）。ui-autocomplete-input：自动完成部件实例化input元素。12.6.2自动完成

【例12-5】通过使用自动完成实现根据用户的输入，智能显示查询列表的功能，如果查询列表过长，则可以通过为autocomplete设置max-height来防止菜单显示太长。12.6.3标签页

标签页（Tabs）是一种多面板的单内容区，每个面板与列表中的标题相关，单击标签页，可以切换显示不同的逻辑内容。标签页（Tabs）必须在一个有序（<ol>）或无序（<ul>）列表中。每个标签页的"title"必须在一个列表项（<li>）的内部，且必须用一个带有href属性的锚（<a>）包裹。每个标签页面板可以是任意有效的元素，但它必须带有一个id，该id与相关标签页的锚中的哈希值相对应。11.6.4复合选择器

复合选择器的使用方法如下：$("selector1,selector2,…,selectorN");

1）selector1：一个有效的选择器，id选择器、元素选择器或类名选择器等。

2）selector2：另一个有效的选择器，id选择器、元素选择器或类名选择器等。

3）selectorN：任意多个选择器，id选择器、元素选择器或是类名选择器等。12.6.3标签页

【例12-6】制作一个关于鲜品园公司介绍的标签页，当鼠标指针经过标签页时打开标签页内容，当鼠标指针二次经过标签页时则隐藏标签页内容。习题121．编写程序实现正方形不同的淡入与淡出动画效果，如图12-11所示。2．制作向上滚动的动态新闻效果，每隔3s新闻信息就会向上滚动，如图12-12所示。3．制作画廊幻灯片切换效果。页面加载后，每隔一段时间，图片自动切换到下一幅；用户单击图片右下方的数字，将直接切换到相应的图片；用户单击链接文字，可以打开相应的网页，如图12-13所示。习题124．使用

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论