我想用 zepto 代替 jquery ......所以我在我的 web jquery 中用 zepto 替换,包括这个脚本
script
window.jQuery = Zepto
客栈这个和平的代码
color.hook = function( hook ) {
var hooks = hook.split( " " );
each( hooks, function( i, hook ) {
console.dir(jQuery.cssHooks) // this gives me undefined
jQuery.cssHooks[ hook ] = {
set: function( elem, value ) {
console.log('es')
var parsed, curElem,
backgroundColor = "";
if ( value !== "transparent" && ( jQuery.type( value ) !== "string" || ( parsed = stringParse( value ) ) ) ) {
value = color( parsed || value );
if ( !support.rgba && value._rgba[ 3 ] !== 1 ) {
curElem = hook === "backgroundColor" ? elem.parentNode : elem;
while (
(backgroundColor === "" || backgroundColor === "transparent") &&
curElem && curElem.style
) {
try {
backgroundColor = jQuery.css( curElem, "backgroundColor" );
curElem = curElem.parentNode;
} catch ( e ) {
}
}
value = value.blend( backgroundColor && backgroundColor !== "transparent" ?
backgroundColor :
"_default" );
}
value = value.toRgbaString();
}
try {
elem.style[ hook ] = value;
} catch( e ) {
// wrapped to prevent IE from throwing errors on "invalid" values like 'auto' or 'inherit'
}
}
};
jQuery.fx.step[ hook ] = function( fx ) {
if ( !fx.colorInit ) {
fx.start = color( fx.elem, hook );
fx.end = color( fx.end );
fx.colorInit = true;
}
jQuery.cssHooks[ hook ].set( fx.elem, fx.start.transition( fx.end, fx.pos ) );
};
});
};
我有这个错误
Uncaught TypeError: Cannot set property 'backgroundColor' of undefined
这个
$.cssHooks // gives me undefined
在 jquery 我发现这个扩展
jQuery.extend({
// Add in style property hooks for overriding the default
// behavior of getting and setting a style property
cssHooks: {
opacity: {
get: function( elem, computed ) {
if ( computed ) {
// We should always get a number back from opacity
var ret = curCSS( elem, "opacity" );
return ret === "" ? "1" : ret;
}
}
}
},
我如何在 zepto 中实现 jquery 的 cssHooks ???
tnx
编辑 2
我为这个问题找到了一个可行的解决方案我自己实现了一个 ccsHooks
jQuery.cssHooks=
{
opacity:
{
get: function( elem, computed )
{
if ( computed )
{
var ret = curCSS( elem, "opacity" );
return ret === "" ? "1" : ret;
}
}
}
};
jQuery.fx.step = {};
jQuery.easing = {
linear: function( p ) {
return p;
},
swing: function( p ) {
return 0.5 - Math.cos( p*Math.PI ) / 2;
}
};
var originalQsa = jQuery.zepto.qsa;
$.zepto.qsa = function(el, sel) {
try {
return originalQsa.apply(this, arguments)
} catch(e) {
console.error("invalid CSS selector: ", sel)
return []
}
}
这扩展了 zepto cssHooks。这是导致所有问题的事件处理程序
$('#menu a').click(function()
{
var name=$(this).attr('id');
var div=$('div#'+name);
var visible=$('#container').find(':visible').attr('id');
$('div#'+visible).css({position:'absolute'}).hide('slide',{direction:'left'},1000,function()
{
$(div).css({position:'relative'}).show('slide',{direction:'right'},1000,function(){resetSizeGmaps()});
});
});
但我使用创建的 try/catch 跟踪此错误
invalid CSS selector: :visible
任何人都可以修复我的 cssHooks 吗?