JQueryカスタム関数

Question

jQueryのための私の最初のカスタム関数/アドオンを書いています。それはとても楽しいことでした。基本的には、配列から画像の束を読み込み、リストから1つを選択してメイン画像として表示するためのスライダを作成します。

私のオプションでは、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に苦労しているので、どのように動作するのか知っています。あなたは以下のように使用することができ

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

これが緩ん例ですが、あなたは、ユーザーがコンストラクタに関数を渡すことができる可能性があり、この例では、私は、コールバックのオブジェクトを渡すが、それは同じこと

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