扩展jQuery:UI效果框架

基思林 经过 基思林  |  2013年10月14日

jquery. UI效果框架是模块化的,就像窗口小部件框架一样,允许您选择要使用的包的包的部分和减少代码要求。你可以 为自己创建自定义下载, 这考虑了模块之间的依赖关系。

在查看如何创建新效果之前,您应该了解jQuery UI效果框架已提供的其他功能,以便在开发自己的效果时可以使用它。

单个jQuery UI效果模块的基础是常用功能的核心。这些能力在这里实施,以便你不’需要重新发明它们,可以立即将它们应用于自己的效果。和彩色动画一起,你 ’LL从一个类的属性找到动画,以及几个可能在开发新效果方面有用的低级功能。

 

彩色动画

效果核心模块为包含颜色值的样式属性添加自定义动画支持:前景和背景颜色以及边框和大纲颜色。 jQuery本身只允许动画是简单数值的属性,其中可选的单位指定器,如PX,EM或%。它没有’图解了如何解释更复杂的值,如颜色,或者如何正确递增这些值以实现所需的转换,例如通过中间紫色从蓝色到红色。

颜色值由三个组件组成:红色,绿色和蓝色贡献,每个贡献都有0到255.它们可以以多种不同的方式在HTML和CSS中指定,如下所述:

  • 十六进制数字 - #ddffe8
  • 最小十六进制数字 - #CFC
  • 十进制RGB值-RGB(221,255,232)
  • 十进制RGB百分比-RGB(87%,100%,91%)
  • 十进制RGB和透明度值-RGBA(221,255,232,127)
  • 一个名叫颜色的石灰

必须分开红色,绿色和蓝色组件,并将其初始值单独动画到最终值,然后组合成中间步骤的新型复合颜色。 jQuery UI为每个受影响的属性添加动画步骤以正确解码当前和所需的颜色,并将值更改为动画运行。除了上一个列表中描述的颜色格式,Animate Call还可以接受三个数值(每个和255之间)的数组来指定颜色。一旦定义了这些函数,您可以以同样的方式为其他数字属性进行动画:

$('#myDiv').animate({backgroundColor: '#DDFFE8'});

jquery. UI包含它理解的名为Colors的扩展列表,从基本的红色和绿色到更漠视的Darkorchid和Darksalmon。甚至有透明颜色。

 

类动画

标准jQuery允许您在所选香港跑狗图上添加,删除或切换类。 jQuery UI可以通过允许您在状态和之后的转换中进行动画。它通过从起始和结束配置中提取可以动画(数值和颜色)的所有属性值来实现这一点,然后将所有这些标准的动画调用调用为要更改的所有属性。通过在调用addClass,RemoveClass或ToggleClass函数时指定持续时间来触发此新动画:

$('#myDiv').addClass('highlight', 1000);

JQuery UI还添加了一个新函数,删除类并添加一个类,并在两个状态(提供持续时间)之间的可选转换:

$('#myDiv').switchClass('oldClass', 'newClass', 1000);

 

共同效果功能

为了更好地支持jQuery UI的各种效果,效果核心模块提供了几种对这些效果的功能,也许是您自己的效果。为了说明如何使用这些功能中的几个,下面的列表显示了幻灯片效果的相关部分。

$.effects.effect.slide = function( o, done ) {
// Create element
var el = $( this ),
        props = [ "position", "top", "bottom", "left", "right", "width", "height" ],
        mode = $.effects.setMode( el, o.mode || "show" ), ...; // Determine mode of operation

// Adjust
$.effects.save( el, props ); // Save current settings
el.show();
distance = o.distance || el[ ref === "top" ? "outerHeight" : "outerWidth" ]( true );
$.effects.createWrapper( el ).css({overflow: "hidden"}); // Create wrapper for animation
...

// Animation
animation[ ref ] = ...;

// Animate
el.animate( animation, {
                       queue: false,
                       duration: o.duration,
                       easing: o.easing,
                       complete: function() {
                               if ( mode === "hide" ) {
                                       el.hide();
                               }
                               $.effects.restore( el, props ); // Restore original settings
                               $.effects.removeWrapper( el ); // Remove animation wrapper
                               done();
                       }
            });
};

您可以使用setMode函数将切换模式转换为适当的显示或隐藏值,基于香港跑狗图的当前可见性。如果提供的模式显示或隐藏,它会保留该值,在这种情况下,默认为未提供,以显示。

在启动动画的效果之前,您可能希望使用保存函数来记住香港跑狗图上的几个属性的原始值(从道具中的名称),以便完成后恢复。使用jQuery数据函数将值存储在香港跑狗图上。

为了便于实现香港跑狗图的移动实现效果,您可以将包含CreateWrapper功能的该香港跑狗图周围的容器用作运动的参考点。位置信息将从指定的香港跑狗图复制到包装器上,以便直接出现原始香港跑狗图。然后,该元件将其左上方的新容器定位,使得用户不可于效果。该函数返回对包装器的引用。

原始香港跑狗图的左/右/顶/底部/底部设置的任何更改现在都将相对于其原始位置,而不会影响周围香港跑狗图。您之前保存了某些属性值,您’d在完成动画时使用还原功能将它们返回到原始设置。与此同时,您应该删除先前使用删除包装功能创建的任何包装器。如果没有包装器,此函数返回对包装器的引用,或者如果没有包装器,则返回给包装器。

jquery. UI效果提供的其他一些功能可能是使用的核心模块:

getBaseline(原产地,原件) 此函数将原点规范(垂直和水平位置的两个香港跑狗图阵列)归式为给定原始大小的分数值(0.0到1.0)(具有高度和宽度属性的对象)。它将命名的位置(顶部,左,中心等)转换为0.0,0.5或1.0,并将数值转换为相关尺寸的比例。返回的对象具有属性x和y以保持相应方向上的分数值。例如,

var baseline = $.effects.getBaseline(['middle', 20], {height: 100, width: 200}); // baseline = {x: 0.1, y: 0.5}

setTransition(香港跑狗图,列表,因子,值) 要立即将缩放因子应用于多个属性值,请使用此功能。对于列表中的每个属性名称,通过将其乘以因子来检索香港跑狗图的当前值,并更新。将结果放入属性名称下的值对象,并从函数返回该对象。例如,要将某些值减少一半,您可能会这样做:

el.from = $.effects.setTransition(el, ['borderTopWidth', 'borderBottomWidth', ...], 0.5, el.from);

CSS.Unit(键) 要将命名的CSS属性(key)分成其量和单位(EM,PT,PX或%),返回为两个值的数组,请使用此功能。如果单位aren’T之一,返回空数组。例如,

var value = el.cssUnit('width'); // e.g. value = [200, 'px']

本节中呈现的函数由jQuery UI提供的许多效果使用。这些效果在下一节中审查。

 

现有效果

jquery. UI提供了许多效果。其中大部分旨在增强香港跑狗图出现或消失的方式(如盲目和掉落),而其他人则用于引起您的注意力(如突出和摇动):

  • 瞎的: 香港跑狗图从其顶部或左侧垂直扩展或划水平
  • 弹跳: 香港跑狗图滴入或疏忽,并反弹几次
  • 夹子: 香港跑狗图从其中心线垂直扩展或纵向(默认)或水平划分
  • 降低: 香港跑狗图从左侧(默认)或顶部幻灯片或从完全不透明度逐渐消失
  • 爆炸: 香港跑狗图分成部分并脱离苍蝇,或从飞行部件重新组装
  • 褪色: 香港跑狗图逐渐消失或完全不透明度
  • 折叠: 香港跑狗图首先在一个方向上展开或收缩,然后在另一个方向上(默认情况下水平垂直)
  • 强调: 香港跑狗图简要更改背景颜色
  • 噗: 香港跑狗图减少或增加大小,并逐渐消失或从完全不透明度
  • 搏动: 香港跑狗图淡出了几次
  • 规模: 香港跑狗图以百分比数量从其中心点扩展或合同
  • 摇: 香港跑狗图几次从侧面移动
  • 尺寸: 香港跑狗图减少或尺寸增加到给定尺寸
  • 滑动: 香港跑狗图从其自己的边缘水平滑动(默认)或垂直
  • 转移: 香港跑狗图被移动并调整为匹配目标香港跑狗图

这些效果可以与增强型jQuery UI Show,Hide和Toggle功能结合使用,通过将所需效果的名称提供为第一个参数来结合使用。您还可以提供其他选项,可以更改效果的行为,动画的持续时间和回调函数’s触发完成。

$('#aDiv').hide('clip');
$('#aDiv').toggle('slide', {direction: 'down'}, 1000);

 

概括

包含在jQuery UI模块中是一些基本的实用程序功能,低级行为(如拖放),高级组件或小部件(如制表符和DatePicker),以及众多的视觉效果。您可以使用这些效果来增强网页上的香港跑狗图的演示文稿,或向用户带来特定香港跑狗图’注意。帮助您创建自己的效果’S常用功能的核心可用。

 

您是否使用过jQuery UI效果框架?它与本机CSS Tweens进行比较如何?让我们在评论中了解您的想法。