Question

好的，所以我正在学习编写插件，并且用于插件创作的jQuery网站真是令人困惑。我真的想弄清楚如何在我的插件中添加基于浏览器事件触发的方法。所以基本上我有一个插件，为移动设备构建可滑动的幻灯片放映。当设备旋转时，我需要它来重建新尺寸的幻灯片。现在我拥有它所以它第一次构建它但我不能（a）想出为不同的函数添加方法和（b）将事件绑定到那些特定的方法。这是我的代码。

(function( $ ){

    $.fn.jCarousel = function( options ) {
    var empty = {} 

    var defaults = { 
        height: $(window).height(),
        width: $(window).width(),
        count: 1,
        amount: $('.swiper', this).length,
        thisone:this,
    };

    var options = $.extend(empty, defaults, options);

    return this.each(function() {

        options.thisone = this;

        amount = $('.swiper', this).length;
        holdWidth = options.width * options.amount;

        $('.swiper', this).height(options.height);
        $(this).height(options.height);
        $('.swiper', this).width(options.width);
        $(this).width(holdWidth);
        $('.swipe_slide',this).width(holdWidth);

      //==================================================================================================================
        //==================================================================================================================

        $('.swiper', this).each(function(i) {
            var nwidth = options.width*i;
            $(this).css('left',nwidth);
        });
        //==================================================================================================================
        //==================================================================================================================     
        //==================================================================================================================
        //==================================================================================================================

        $('.swipe_slide', this).swipe(function(evt, data) {
            if(data.direction=='left'){
                //alert('count: '+options.count+" amount: "+options.amount);
                if(options.count != options.amount){
                    moveWidth = options.count * -options.width;
                    $('.swipe_slide',options.thisone).css( "left" ,moveWidth );
                    options.count++
                }else{
                    return    
                }
            }else{
                if(options.count!=1){    
                    moveWidth = moveWidth+ options.width;
                    $('.swipe_slide',options.thisone).css( "left" ,moveWidth );
                    options.count--
                }
                else{
                    return
                }
            }
        });    
        //==================================================================================================================    
        //==================================================================================================================  
        });
    };

})( jQuery );

Answer 1

$(window).bind('orientationchange', $.fn.jCarousel);

您必须稍微重构插件，以便函数存储传递给它的选项，否则在方向更改时再次运行该函数会将选项重置为默认值。

Jquery插件开发，附加浏览器事件和方法

1 个答案: