Пользовательская функция JQuery даже - PullRequest
Новая
       22

Пользовательская функция JQuery даже

0 голосов
/ 17 января 2012

Я пишу свою первую пользовательскую функцию / аддон для 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 этому событию, чтобы конечный пользователь имел к нему доступ, если он захочет заполнить скрытое поле формы с помощьюimage src и т. д. И также я знаю, как это работает, так как я борюсь за Google без правильной терминологии.(я даже не уверен, что то, что я пытаюсь сделать, называется "событием")

Ответы [ 2 ]

1 голос
/ 17 января 2012

Вы можете использовать следующее: 

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

Может быть, вы могли бы сделать свой пример немного меньше.Этот объем кода немного много.

0 голосов
/ 17 января 2012

Это простой пример, но вы можете разрешить пользователю передавать функцию в конструктор, в этом примере я передаю объект обратных вызовов, но на самом деле это будет то же самое 

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"

вот демо

...