使用jQuery.cssHooks()方法扩展zepto

时间:2013-07-21 19:31:24

标签: javascript jquery jquery-ui zepto

我想使用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吗?

0 个答案:

没有答案