总有人间一两风,填我十万八千梦

jQuery .cssHooks 用法 手册 | 示例代码

jQuery开发手册 归档 424℃ 0评论

描述: 直接向 jQuery 中添加钩子,用于覆盖设置或获取特定 CSS 属性时的方法,目的是为了标准化 CSS 属性名或创建自定义属性。

  • 添加的版本: 1.4.3jQuery.cssHooks

$.cssHooks 对象提供了一种方法通过定义函数来获取和设置特定的CSS值的方法。  它也可以被用来创建新的cssHooks以标准化CSS3功能,如框阴影和渐变。

例如,某些版本基于Webkit的浏览器需要-webkit-border-radius属性来设置元素的border-radius,而早期的Firefox版本使用-moz-border-radius属性。一个CSS hook 可以标准化这些供应商前缀的属性,让.css() 接受一个单一的,标准的属性的名称(border-radius,或用DOM属性的语法,borderRadius)。

除了提供了对特定样式的处理可以采用更加细致的控制外,  $.cssHooks也扩展了.animate() 方法上可用的属性。

定义一个新的css hook十分简单。下面的模板可以方便您创建自己的 cssHook:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
(function($) {
// first, check to see if cssHooks are supported
if ( !$.cssHooks ) {
// if not, output an error message
throw("jQuery 1.4.3 or above is required for this plugin to work");
return;
}
// Wrap in a document ready call, because jQuery writes
// cssHooks at this time and will blow away your functions
// if they exist.
$(function () {
$.cssHooks["someCSSProp"] = {
get: function( elem, computed, extra ) {
// handle getting the CSS property
},
set: function( elem, value ) {
// handle setting the CSS value
}
};
});
})(jQuery);

Feature Testing(功能测试)

在使供应商特定的CSS属性标准化前,首先要确定浏览器是否支持标准的属性 或 带浏览器供应商前缀的变种。例如,检查支持border-radius 属性,还要检查该属性的任何变种写法是否是临时元素的 style 对象中的成员。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
(function($) {
function styleSupport( prop ) {
var vendorProp, supportedProp,
// capitalize first character of the prop to test vendor prefix
capProp = prop.charAt(0).toUpperCase() + prop.slice(1),
prefixes = [ "Moz", "Webkit", "O", "ms" ],
div = document.createElement( "div" );
if ( prop in div.style ) {
// browser supports standard CSS property name
supportedProp = prop;
} else {
// otherwise test support for vendor-prefixed property names
for ( var i = 0; i < prefixes.length; i++ ) {
vendorProp = prefixes[i] + capProp;
if ( vendorProp in div.style ) {
supportedProp = vendorProp;
break;
}
}
}
// avoid memory leak in IE
div = null;
// add property to $.support so it can be accessed elsewhere
$.support[ prop ] = supportedProp;
return supportedProp;
}
// call the function, e.g. testing for "border-radius" support:
styleSupport( "borderRadius" );
})(jQuery);

Defining a complete css hook(定义一个完整的css hook)

要定义一个完整的cssHook,首先我们需要测试您当前使用的 jQuery 版本是否支持 cssHooks 方法,此外,还要结合上面提到的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
(function($) {
if ( !$.cssHooks ) {
throw("jQuery 1.4.3+ is needed for this plugin to work");
return;
}
function styleSupport( prop ) {
var vendorProp, supportedProp,
capProp = prop.charAt(0).toUpperCase() + prop.slice(1),
prefixes = [ "Moz", "Webkit", "O", "ms" ],
div = document.createElement( "div" );
if ( prop in div.style ) {
supportedProp = prop;
} else {
for ( var i = 0; i < prefixes.length; i++ ) {
vendorProp = prefixes[i] + capProp;
if ( vendorProp in div.style ) {
supportedProp = vendorProp;
break;
}
}
}
div = null;
$.support[ prop ] = supportedProp
return supportedProp;
}
var borderRadius = styleSupport( "borderRadius" );
// Set cssHooks only for browsers that
// support a vendor-prefixed border radius
if ( borderRadius && borderRadius !== "borderRadius" ) {
$.cssHooks.borderRadius = {
get: function( elem, computed, extra ) {
return $.css( elem, borderRadius );
},
set: function( elem, value) {
elem.style[ borderRadius ] = value;
}
};
}
})(jQuery);

然后,您可以在支持的浏览器中使用DOM(驼峰)样式或CSS(连字符号)的风格设置边框半径:

1
2
$("#element").css("borderRadius", "10px");
$("#another").css("border-radius", "20px");

如果浏览器不支持任何形式的CSS属性写法,并且也不支持任何前缀写法,那么该样式是不会应用到元素上的。但是,如果浏览器支持某种特殊的写法,那么可以在 cssHooks 中添加对该特殊用法的支持。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
(function($) {
// feature test for support of a CSS property
// and a proprietary alternative
// ...
if ( $.support.someCSSProp && $.support.someCSSProp !== "someCSSProp" ) {
// Set cssHooks for browsers that
// support only a vendor-prefixed someCSSProp
$.cssHooks.someCSSProp = {
get: function( elem, computed, extra ) {
return $.css( elem, $.support.someCSSProp );
},
set: function( elem, value) {
elem.style[ $.support.someCSSProp ] = value;
}
};
} else if ( supportsProprietaryAlternative ) {
$.cssHooks.someCSSProp = {
get: function( elem, computed, extra ) {
// Handle crazy conversion from the proprietary alternative
},
set: function( elem, value ) {
// Handle crazy conversion to the proprietary alternative
}
}
}
})(jQuery);

Special units(特殊单位)

默认情况下,传递给.css() 方法的值,jQuery添加一个“px”单位。可以通过jQuery.cssNumber对象中添加属性的方法,来防止这种行为的发生

1
$.cssNumber["someCSSProp"] = true;

Animating with cssHooks(cssHooks动画)

通过向 jQuery.fx.step 对象中添加属性,cssHook 同样可以向 jQuery 的动画机制中添加钩子:

1
2
3
$.fx.step["someCSSProp"] = function(fx){
$.cssHooks["someCSSProp"].set( fx.elem, fx.now + fx.unit );
};

注意,上述这种用法应用于简单的数值属性的动画是最好的。根据不同的 CSS 属性,返回值的类型以及动画的复杂性,可能需要在 cssHooks 写更多的代码。

转载请注明:悠然品鉴 » jQuery .cssHooks 用法 手册 | 示例代码

喜欢 (0)or分享 (0)
发表我的评论
取消评论

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址