Своя функция

[inex]

Добрый день. Помаленьку изучаю jQuery, и вот добрался до создания плагина, но что-то не получается...поэтому прошу помощи...

Вот как было изначально и работает:

jQuery(document).ready(function(){
    jQuery(window).scroll(function () {
	    if (jQuery(this).scrollTop() > 300) {
		    jQuery('.box').fadeIn();
	    } else {
		    jQuery('.box').fadeOut();
	    }
    });
});

а вот пытаюсь переделать в плагин:

jQuery(document).ready(function(){
    (function( $ ){ 
	    $.fn.myBox = function() {
		    jQuery(window).scroll(function () {
			    if (this.scrollTop() > 300) {
				    this.fadeIn();
			    } else {
				    this.fadeOut();
			    }
		    });
	    };
    })( jQuery );
});

<script>
  jQuery(function(){
		    jQuery(".box").myBox();
  });
</script>

но не работает...помогите пожалуйста разобраться что делаю не так, заранее спасибо!

[antonKar]

Насколько я помню, в плагинах не нужен $(document).ready();

[nerv]

не проверял

(function( $ ) {

    var win;

    $.fn.myBox = function() {
        win = win || $( window ).scroll(function() {
            win.trigger( 'my' );
        });

        win.on( 'my', function() {
            var method = win.scrollTop > 300 ? 'fadeIn' : 'fadeOut';
            this[ method ]();
        }.bind( this ));
    };

}( jQuery ));



$(function() {

    $( ".box" ).myBox();

});

Edited July 16, 2013 by nerv

[Zverushka]

Первая ошибка - не this, а $(this).

Вторая, когда ты входишь в функцию myBox() $(this) - это ".myBox", а во внутренней функции scroll $(this) - это уже window.

Поэтому первое, что нужно сделать в myBox() - это записать значение this в переменную. var box = $(this); и уже использовать его.

jQuery(document).ready(function(){
	    (function( $ ){
			    $.fn.myBox = function() {
				    var box = $(this);
					    jQuery(window).scroll(function () {
							    if (box.scrollTop() > 300) {
									    box.fadeIn();
							    } else {
									    box.fadeOut();
							    }
					    });
			    };
	    })( jQuery );
});
jQuery(".box").myBox();

[inex]

Спасибо за помощь, сделал как подсказал Zverushka, но что-то не работает Буду разбираться, пока туговато)

[lexxcode]

На форуме есть отличная статья которая очень подробно объясняет как писать плагины к jQuery http://forum.htmlboo...showtopic=23096 . Спасибо товарищу Great Rash'у за это.

(function($) {
  $.fn.myBox = function(options) {
    // Default
    var settings = {
      scrollTop: 300
    };

    return this.each(function() {
      if (options) {
        $.extend(settings, options);
      }

      var $this = $(this);
      $(window).on({
        scroll: function() {
          if ($(this).scrollTop() > settings.scrollTop) {
            $this.fadeIn();
          } else {
            $this.fadeOut();
          }
        }
      });
    });
  };
})(jQuery);

Потом уже можно будет вызывать

$(function(){
  $('.box').myBox({
    scrollTop : 500
  });
});

[inex]

На форуме есть отличная статья которая очень подробно объясняет как писать плагины к jQuery http://forum.htmlboo...showtopic=23096 . Спасибо товарищу Great Rash'у за это.

(function($){
$.fn.myBox = function(options) {
// Default
var settings = {
scrollTop: 300
};

return this.each(function() {
if (options) {
$.extend(settings, options);
}

var $this = $(this);
$(window).on({
scroll : function(){
if($(this).scrollTop() > settings.scrollTop) {
$this.fadeIn();
}
else {
$this.fadeOut();
}
}
});
});
};
})(jQuery);

Потом уже можно будет вызывать

$(function(){
$('.box').myBox({
scrollTop : 500
});
});

Огромное спасибо за пример и за ссылку! Всё заработало!

[Zverushka]

Спасибо за помощь, сделал как подсказал Zverushka, но что-то не работает Буду разбираться, пока туговато)

Извиняюсь, маленькую ошибку допустила, не "if(box.scrollTop()>300){", а "if($(this).scrollTop()>300){"

http://jsfiddle.net/cJ8MV/7/

Edited July 16, 2013 by Zverushka

[nerv]

На форуме есть отличная статья

не читал, но могу сказать несколько комментариев по твоему коду:

$.fn.myBox = function(options) {

// Default

var settings = {

scrollTop: 300

};

1. зачем создавать объект с настройками каждый раз при обращению к плагину?

$(window).on({

2. зачем биндить событие каждый раз при вызове плагина, если можно сделать это один раз для всех вызовов? (в данном случае)

[lexxcode]

nerv

1. Потому, что если настройки по-умолчанию вынести за функцию

(function($) {
    // Default
    var settings = {
	    scrollTop: 300
    };
    $.fn.myBox = function(options) {
	    return this.each(function() {
            /* ... */
	    });
    };
})(jQuery);

то первый же вызов плагина с параметрами перепишет этот объект глобально (в рамках контекста) для всех будущих обращений к плагину. Это явно не то что ожидается

2. Что нужно было точно вынести из return this.each(), так это extend который переопределяет параметры по-умолчанию:

(function($) {
  $.fn.myBox = function(options) {
    // Default
    var settings = $.extend({
	  scrollTop: 300
    }, options);
    return this.each(function() {
	  /* ... */
    });
  };
})(jQuery);

Что касается событий... ну в данном конкретном случае теоретически да можно сразу скопом для всех цеплять события. Тут надо сказать вообще весьма странный функционал в этом плагине.

Но! Как правило, коллекция (может состоять из нескольких элементов) к которой привязывается плагин, действовать должны по отдельности каждый элемент коллекции независимо от остальных.

[inex]

Я повторюсь, что я пока изучаю jq, поэтому да, не спорю что мой "плагин" это банально Просто столкнулся с трудностями, которые не смог решить сам...поэтому большое спасибо, за то что помогли и показали как правильно...т.к. в будущем хочу написать "плагин", "библиотечку" для личного пользования...

[nerv]

то первый же вызов плагина с параметрами перепишет этот объект глобально (в рамках контекста) для всех будущих обращений к плагину. Это явно не то что ожидается

var obj = $.extend({}, obj1, obj2 ); 

Edited July 17, 2013 by nerv