JQuery自定义函数

Question

我正在为jQuery编写我的第一个自定义函数/插件，它非常有趣。基本上，它将从数组中加载一组图像，并创建一个滑块，使您能够从列表中选择一个并将其显示为主图像。

在我的选项中，我添加了一个onClick事件，但我希望能够将变量传递给此事件，以供最终用户在选项中设置，例如图像源，因此当您单击可选的onClick函数触发的图像时，最终用户可以返回所单击图像的源，他是我的更好的示例的代码，它可能有点脏，因为我没有清理它，它充满了需要润色的代码，但它是有效的。

(function($){ 
$.fn.imagePicker = function( options ) { 
    var defaults = {
        width: 398,
        height: 230,
        imageArray: ["/img/news/emailpi.jpg", "/img/news/debit.jpg", "/img/news/aim-high.jpg", "/img/news/Koala.jpg", "/img/news/170217_get_connected.jpg",
                     "/img/news/10.jpg", "/img/news/1000864_street_variations__doors_2.jpg", "/img/news/1005134_ear_defenders.jpg", "/img/news/1080177_magnifying_glass.jpg", "/img/news/160.jpg",
                     "/img/news/161.jpg", "/img/news/162.jpg", "/img/news/163.jpg", "/img/news/2012.jpg", "/img/news/48.jpg",
                     "/img/news/8.jpg", "/img/news/12.jpg", "/img/news/ski.jpg", "/img/news/storm.jpg", "/img/news/tax-img.jpg",],
        show: 10,
        thumb: {
                width:70, 
                height: 60, 
                borderWidth: 1, 
                borderColour: "#CCC", 
                borderStyle: "solid", 
                padding:3
            },
        mainImage: {
                    width: 150, 
                    height:200, 
                    borderColour:"#CCC", 
                    borderStyle:"solid", 
                    padding:3
                },
        leftScroll: 50,
        rightScroll: 50,
        interval: 5,
        onClick: function(){},
        onScrollLeft:function(){},
        onScrollRight:function(){},
        debug: false
    };
    var options = $.extend( true, defaults, options );

    //Preload the images in the array
    ip_preloader( options.imageArray )
    $(this).css({width:options.width, height:options.height, overflow:'hidden'});
    $(this).html( "<div class='ip-main-images' style='text-align:center'></div>\n\
                   <div class='ip-image-menu' style='position:relative; height:"+(options.thumb.height+5)+"px; width:"+( ((options.thumb.width + options.thumb.padding + ( options.thumb.borderWidth*2 ))*options.imageArray.length) )+"px; overflow:hidden;'>\n\
                       <div class='ip-menu-images-overlay' style='width:"+options.width+"px; position:absolute; top:0;'>\n\
                           <div class='ip-left-hotspot' style='background:url(/admin_v2/css/images/white_trans_10x10.png);position:absolute; left:0; top:0; width:"+options.leftScroll+"px; height:"+( options.thumb.height+( options.thumb.borderWidth*2 ) )+"px; z-index:99;'></div>\n\
                           <div class='ip-right-hotspot' style='background:url(/admin_v2/css/images/white_trans_10x10.png);position:absolute; right:0; top:0; width:"+options.rightScroll+"px; height:"+( options.thumb.height+( options.thumb.borderWidth*2 ) )+"px; z-index:99;'></div>\n\
                       </div>\n\
                       <div class='ip-menu-images' style='position:relative; top:0;'>\n\
                       </div>\n\
                   </div>\n\
                   <div class='ip-mouse-pos'></div>" );
    var container = $(this);
    var menu = $(this).find( ".ip-menu-images" );
    var main = $(this).find( ".ip-main-images" );

    main.html( "<img src='"+options.imageArray[0]+"' width='"+options.mainImage.height+"' height='"+options.mainImage.width+"' style='margin:0 auto; width:"+options.mainImage.width+"px' />" );

    for( i=0; i<options.imageArray.length; i++ ){
        menu.append( "<img src='"+options.imageArray[i]+"' style='float:left; margin-right:"+options.thumb.padding+"px; border:"+options.thumb.borderWidth+"px "+options.thumb.borderStyle+" "+options.thumb.borderColour+";' alt='' class='' width='"+options.thumb.width+"' height='"+options.thumb.height+"' />" );
    }

    $(".ip-image-menu img").live("click", function( ){
        var src = $(this).attr("src");
        $(".ip-main-images img").attr("src", src);
        options.onClick( src );
    });
    var leftpos = 0;
    $(".ip-left-hotspot").bind('mouseenter', function() {
    this.iid = setInterval(function() {
       if( leftpos != options.leftScroll ){
           leftpos ++;
           menu.css("left", leftpos); 
           options.onScrollLeft();
        } 
       if(options.debug)$(".ip-mouse-pos").html( "LeftPos: "+menu.css("left") );
        }, options.interval);
    }).bind('mouseleave', function(){
        this.iid && clearInterval(this.iid);
    });


    $(".ip-right-hotspot").bind('mouseenter', function() {
    this.iids = setInterval(function() {
       if( leftpos != "-"+menu.width()){
           leftpos --;
           menu.css("left", leftpos); 
           options.onScrollRight();
        }
       if(options.debug)$(".ip-mouse-pos").html( "LeftPos: "+menu.css("left") );
        }, options.interval);
    }).bind('mouseleave', function(){
        this.iids && clearInterval(this.iids);
    });



    function ip_preloader( imagesArray ) 
    {
        // counter
        var i = 0;
        // create object
        imageObj = new Image();
        // start preloading
        for(i=0; i<=3; i++) 
        {
          imageObj.src=imagesArray[i];
        }
    }
;    }; 
})(jQuery);

如果你做一个查找(" src ")会跳转到我调用options.onClick的那段代码，我只是想把src传递给那个事件，这样最终用户就可以访问它，如果他们想用图像src填充一个隐藏的表单域等等，我也知道它是如何工作的，因为我在没有正确的术语的情况下很难用google来搜索它。(我甚至不确定我正在尝试做的事情是否被称为“事件”)

Answer 1

这是一个松散的示例，但您可以允许用户将函数传递到构造函数中，在此示例中，我传递的是一个回调对象，但afaik的作用是相同的

var a = "xyz";

var Foo = function(args, callbacks) {
    var a = "abc";
    this.bar = callbacks.bar(a);
};

var foo = new Foo({}, { bar: function(a){ alert(a) } });

foo.bar();  // will alert "abc" NOT "xyz"

here is a demo