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自定義函數甚至

回答

相關問題