JQuery自定义函数甚至

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

，如果你做（“SRC”）一个发现会跳到你的代码位，我叫options.onClick，我只是想给SRC传递给该事件，因此最终用户可以访问它，他们是否应该用图像src等来填充隐藏的表单域。还有，我知道它是如何工作的，因为我没有正确的术语而苦苦寻找Google。（我也不知道什么，我试图做的是所谓的“事件”）

来源

2012-01-17 tom at zepsu dot com

您可以使用下列内容：

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

_{也许你可以让你的例子有点小。这大部分代码是一点点。}

来源

2012-01-17 16:45:40

谢谢，似乎我正朝着正确的方向前进。我以为我的例子有点长，但想要显示我所有的代码“以防万一”，大声笑是为什么我把查找src部分，因为我讨厌阅读代码：p – 2012-01-17 16:53:47

啊，好的。如果传递给你函数的东西确实是一个函数，我建议检查'typeof'。 – 2012-01-17 17:03:15

这是一个松散的例子，但你可以允许用户通过函数到构造函数，在这个例子中，我传递回调的对象，但据我所知它会达到同样的事情

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

来源

2012-01-17 17:02:39

JQuery自定义函数甚至

回答

相关问题