By anjia

更新日期:

文章目录
  1. 1. 使用插件
    1. 1.1. 自定义选择符
    2. 1.2. 全局函数插件
  2. 2. jQuery UI 插件库
    1. 2.1. Interaction
    2. 2.2. Widget
    3. 2.3. Effect
      1. 2.3.1. 颜色动画
      2. 2.3.2. 基于类的动画
      3. 2.3.3. 高级缓动函数
      4. 2.3.4. 其他效果
    4. 2.4. ThemeRoller
  3. 3. 小结
  4. 4. QA

jQuery 除了提供了核心组件（操作DOM、事件绑定、AJAX等）外，它还有强大的扩展功能，即插件架构。我们可以使用现成的插件，也可以自定义插件。现成的插件，我们可以通过以下方式获取：

  1. 官网的插件库：http://plugins.jquery.com/
    有演示demo，有源码，有插件的用户评级、版本、bug报告等
  2. Github：提交历史、多人关注、多少分支，可以大致了解插件的品质，至少能知道它的流行程度
  3. jQuery 论坛：http://forum.jquery.com/using-jquery-plugins
    讨论插件的使用

使用插件

插件的使用非常简单。简单，是典型的 jQuery 插件的特征。我们可以为插件指定特定参数-映射，JSON结构键值对；也可以修改插件的默认参数 $.fn.cycle.defaults，一处修改全局生效。

1
2
$('<div></div>').slider();
//把一个div元素变成一个可滑动的进度条了

插件能干什么？它除了能提供更多的 jQuery 方法，eg. $.cookie(), $.math.sum() 外，它也可以扩展 jQuery 的功能，甚至修改已有的特性。改变 jQuery 库其他部分的运行方式，eg.为动画提供其他的风格，eg.能响应用户动作触发更多的 jQuery 事件 【?? 调用自定义的函数】

自定义选择符

由插件提供的选择符扩展

1
2
3
.cycle('pause')  //暂停播放-幻灯片
.cycle('resume') //恢复播放-幻灯片，resume 重新开始 继续 恢复 重新占用
$('ul:paused')   //jQuery对象，引用页面中所有暂停的幻灯片

全局函数插件

即在 jQuery 命名空间中提供了一些新的全局函数。当在插件中提供的功能与页面中的DOM元素无关时，就不适合去扩展标准的 jQuery 方法。这时，就可以选择此模式，去扩展全局函数。eg. Cookie插件 就是通过 $.cookie() 来实现的。

jQuery UI 插件库

与 Cycle 和 Cookie 等大多数插件只做一件事相比，jQuery UI 能做的可谓包罗万象。jQuery UI 某种意义上并不是插件，而是一个完整的插件库。jQuery UI 团队创建了大量核心的交互组件和成熟的部件，使用它们可以创造出更加类似桌面应用程序的 Web 体验。可以去它的官网上看看 http://jqueryui.com/

  1. 交互式组件（Interaction）：拖动、放置、排序和调整项目大小
  2. 部件（Widget）：按钮、折叠窗格、日期选择器、对话框、滑动条、进度条、标签页，等还有其他正在开发中的
  3. 效果（Effect）：jQuery UI 为补充和增强jQuery的核心动画功能，提供了相当多的高级效果。

jQuery UI 库非常注重功能的一致性，下面通过一些小实例来感受下。

Interaction

交互组件就是一组行为，可以和自定义代码结合起来生成复杂的交互式应用。 jQuery UI 中的交互式组件，eg.Resizable 组件可以让用户通过自然拖动的方式把元素调整成任意大小。

为元素应用交互行为非常简单，只需在元素上调用和插件同名的方法即可。

1
2
3
4
5
6
7
//在书名所在的盒装区域右小角添加一个调整大小的手柄
$('#book .title').resizable();
	
//传递自定义的选项，eg.限制只能调整垂直方向上的高度
$('#book .title').resizable({
	handles: 's' //south-底部
});

Widget

除了交互式组件外，jQuery UI 库还提供了一批可靠的用户界面部件。不论从外观还是功能上来看，它们都是开箱即用的。在页面上引用了不同的主题后，初始化后的 UI 部件就具有了一定的样式。

1
2
//把一个div元素转换成一个滑动条部件
$('<div id="slider"></div>').slider().appendTo('body');

假设，我们已经用 jQuery UI 中的 .cycle() 和 .slider() 在页面上创建了幻灯片和滑动条。现在，我们想用滑动条来手动控制幻灯片的播放。只需要在两者的状态发生变化时，在滑动条和幻灯片之间同步发送消息即可。

为了响应滑动条的值的变化，我们可以绑定一个由滑动条触发的自定义事件 slide。虽然它不是原生js事件，但在 jQuery 代码中就像原生事件一样。监听这种事件呢，不用显示地 .bind()，只要把事件处理程序传递给 .slider() 方法即可，即设置插件的 slide 选项。

1
2
3
4
5
6
7
$('<div id="slider"></div>').slider({
	min: 0,
	max: $('#books li').length - 1,
	slide: function(event, ui){ //自定义函数 slide
		$('#books').cycle(ui.value);
	}
}).appendTo('body');

无论什么时候调用 slide() 回调，它的参数 ui 中都保存着部件相关的信息，包括滑动条当前的值。然后把这个值传递给 Cycle 部件。这就实现了通过滑动条去控制幻灯片的效果。要实现相反的效果，即幻灯片控制滑动条，则可以使用 Cycle 的 before 回调函数，它会在每次幻灯片变换时触发。

此处，我们先不用关注为什么会这样，重点关注如何使用插件就行，即插件的 API 形式。故这里就不贴完整的代码了。
简单说明下：slide 函数是 Slider 组件内部定义的一个选项，对外提供的一个接口，供滑动条发生变化的时候回调用。它的参数，也是 Slider 内部回传的。代码中自定义的部分，就负责接收函数参数和丰富函数主体就 ok。同理 .cycle(ui.value) 这个函数也是幻灯片组件 Cycle 对外提供的一个接口。

每个 jQuery UI 部件都有一些可以配置的选项、事件、方法。详情参考 http://jqueryui.com/demos/

Effect

效果（effect）模块，包括：一个核心文件 + 一组独立的效果文件
其中，核心文件为创建颜色动画和基于类的动画提供了支持，也提供了高级的缓动函数。

颜色动画

在文档中引用了核心效果文件之后，扩展的 .animate() 就可以接受另外一些样式属性，eg. borderTopColor、backgroundColor、color 

1
2
3
4
5
6
7
8
9
10
11
12
$('#books').hover(function(){
	$('#books .title').animate({
		backgroundColor: '#eee',
		color: '#000'
	}, 1000); 
}, function(){
	$('#books .title').animate({
		backgroundColor: '#000',
		color: '#fff'
	}, 1000);
});
//1s平滑的完成过渡：黑色背景上的白色文字 -> 浅灰色背景上的黑色文本

基于类的动画

我们知道，有三个操作类的方法：.addClass() .removeClass() .toggleClass()。
这三个方法在 jQuery UI 中经过扩展，都可以接受第二个可选参数，用于控制动画时长。在指定了第二个参数的情况下，页面的行为就像是调用了.animate()并直接指定了所有样式属性一样。

1
$('title').toggleClass('highlighted', 'slow');

高级缓动函数

有些动画，不是以稳定的速度来被执行的。eg .slideUp(1000) 相应元素的高度变成0要经过1秒。但开始和结束-变化慢，中间高度变化快。这种速度的变化就是缓动，让动画更流畅，更自然。高级缓动函数可以改变加速|减速曲线。

【此处，略。当真正有需求时，再细查】

其他效果

效果模块的独立效果文件，包含了很多变换，比 jQuery 本身提供的简单滑动、淡化动画要复杂。这些变换都可以通过 .effect() 方法来实现。eg.
1.显示和隐藏 .show() .hide() .toggle() .slideUp() .slideDown()
2.改变元素形状和位置 transfer size
3.更吸引人的隐藏动画 explode puff
4.让元素更吸引眼球 pulsate shake(强调当前不能接受的动作)

【此处，略。当真正有需求时，再细查】

ThemeRoller

主题卷轴 ThemeRoller，一个面向 UI 部件的基于 Web 的交互式主题引擎（??? 相当于换肤喽）

【此处，略。当真正有需求时，再细查】

小结

在网页中整合第三方插件的各种方式。着重讨论：
1.Cycle 插件：jQuery 实例上的-操作DOM的。自定义插件
2.Cookie 插件：jQuery 全局对象上的
3.jQuery UI 库

什么是插件？
如何找别人开发的插件？
如何在网页中使用它们？

QA

???
Cycle：处理html的。在js生成的 or 默认全权由用户书写html //感觉内部会自动生成
//里面不就是轮播

命名
timeout: 切换幻灯片之间等待的毫秒数
speed: 切换本身要花的毫秒数
pause: 鼠标进入时-暂停播放

slide // v.
before // v. 等很简单的名字命名

$(‘#book .title’).resizable(); //方法名，小写
‘ui-icon-pause’ ‘ui-icon-play’
.animate({}, 1000) //第二个独立的参数

???
回弹效果：

???
Cookie 的有效期：会话期间-直到浏览器关闭、整个站点
对DOM进行操作- insertAfter
选择符的操作

jQuery UI 主题框架中的标准类名 ‘primary’

jQuery UI 部件（Widget）对方法的调用形式都进行了转换—方便更简便的使用

文章目录
  1. 1. 使用插件
    1. 1.1. 自定义选择符
    2. 1.2. 全局函数插件
  2. 2. jQuery UI 插件库
    1. 2.1. Interaction
    2. 2.2. Widget
    3. 2.3. Effect
      1. 2.3.1. 颜色动画
      2. 2.3.2. 基于类的动画
      3. 2.3.3. 高级缓动函数
      4. 2.3.4. 其他效果
    4. 2.4. ThemeRoller
  3. 3. 小结
  4. 4. QA