jQuery自定义函数甚至

Question

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

在我的选项中，我添加了一个 onClick 事件，但我希望能够将变量传递给此事件，以便最终用户在选项中进行设置，例如图像 src，因此当您单击图像时，可选的 onClick函数触发，然后最终用户可以返回单击的图像的 src，他是我的代码，作为一个更好的例子，它可能有点脏，因为我没有清理它并且它充满了需要抛光的代码，但它可以工作。

(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);

如果您执行 find for ("src") 将跳转到我调用 options.onClick 的代码位，我只想将 src 传递给该事件，以便最终用户可以访问它，如果他们想用图像 src 等填充隐藏的表单字段。而且我也知道它是如何工作的，因为我在没有正确术语的情况下努力搜索它。 （甚至不确定我正在尝试做的事情是否被称为“事件”）

Answer 1

您可以使用以下内容：

if(typeof(options.onClick) == 'function'){
    options.onClick(x, y, z);
}

您可以将所需的参数提供给function。 JavaScript 并不关心你给函数提供了多少参数。你订阅者只需要在他的处理程序中指定参数。

这个例子表明它有效。

var onclick;

onclick = function(a){
    alert(a);
};

onclick('Hellow world', 'I am useless');

所以这应该也可以：

$('#myElement').imagePicker({
    onclick: function(src){
        alert(src);
    }
});

也许你可以让你的例子更小一点。这段代码有点多。

Answer 2

这是一个松散的例子，但你可以允许用户将函数传递给构造函数，在这个例子中，我传递了一个回调对象但 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