Как в jquery плагине создать событие?

Question

[Егор Астрейко]

Всем привет, учусь создать свои плагины.
Сейчас хочу сделать что-то на подобии вот этого.
Взял вот этот паттерн за стартовый шаблон.
Вот что у меня вышло:

Весь код

;(function ( $, window, document, undefined ) {

    // undefined is used here as the undefined global
    // variable in ECMAScript 3 and is mutable (i.e. it can
    // be changed by someone else). undefined isn't really
    // being passed in so we can ensure that its value is
    // truly undefined. In ES5, undefined can no longer be
    // modified.

    // window and document are passed through as local
    // variables rather than as globals, because this (slightly)
    // quickens the resolution process and can be more
    // efficiently minified (especially when both are
    // regularly referenced in your plugin).

    // Create the defaults once
    var pluginName = "defaultPluginName",
        defaults = {
            propertyName: "value"
        },
        count = 0;

    // The actual plugin constructor
    function Plugin( element, options ) {
        this.element = element;

        // jQuery has an extend method that merges the
        // contents of two or more objects, storing the
        // result in the first object. The first object
        // is generally empty because we don't want to alter
        // the default options for future instances of the plugin
        this.options = $.extend( {}, defaults, options) ;

        this._defaults = defaults;
        this._name = pluginName;

        $.each(this.settings, function(key, value) {
			if ( typeof value === "function" ) {
				$(this.element).on(key + "." + pluginName, function(event, param) {
					return value(event, this.element, param)
				})
			}
		});

        this.init();
    }

    Plugin.prototype = {

        init: function() {
            var parent = $("<div/>",
				{
					"class": "test" + ($(this.element).attr("disabled") ? " disabled" : ""),
					"id": "test" + "-" + count
				}),
				input = $("<input/>",
				{
					"class": "test__input",
					"id":"test-" + count + "__input"
				}),
				title = $("<div/>",
				{
					"class": "test__title",
					"click": function() { parent.addClass("show"); }
				}),
				placeholder = $("<span/>", {
					"class": "test__placeholder",
					"text": $(this.element).data("placeholder")
				}).css({
					"position": "absolute"
				}),
				titleText = $("<span/>"),
				btn = $("<div>",
				{
					"class": "test__btn"
				}).append("<span/>"),
				ul = $("<ul/>", {
					"class": "test__list"
				});
					
			$(this.element).wrap(parent);
			parent = $(this.element).parent();
			parent.append(input).append(title.append($(this.element).data("placeholder") ? placeholder : "").append(titleText).append(btn)).append(ul);

			for (var i = 0; i < $(this.element).children("option").length; i++) {
				var li = $("<li/>",
					{
						"click": function() {
							parent.removeClass("show");
						}
					}).append($("<span/>").text($(this.element).children("option")[i].text));
				ul.append(li);
				
			};

			if ( !$(this.element).data("placeholder") ) {
				titleText.text($(this.element).children("option:selected").text())
			}

        }
    };

    // A really lightweight plugin wrapper around the constructor,
    // preventing against multiple instantiations
    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName,
                new Plugin( this, options ));
            }
        });
    };

})( jQuery, window, document );

У меня на данном этапе два вопроса:
1) Правильно ли у меня сейчас все по коду
2) И как создать событие, на примере

title = $("<div/>",
{
 "class": "test__title",
 "click": function() { parent.addClass("show"); }
})

так, что бы при инициализации моего плагина можно было отменить все действия которые выполняются в функции и написать свои.
Пример:
При нажатии на

title = $("<div/>",
{
 "class": "test__title",
 "click": function show() { // Тут мои действия }
})

А если при инициализации прописать вот так:

$(document).find(".wrapper-select").children("select").defaultPluginName({
 show: function(event, el) {
  // действия, которые будут выполняться вместо моих (если есть <i>return false; </i>
  // если нету <i>return false;</i>, то действия дополняются к моим)
  return false; // что бы отменить мои действия
 }
});

Comments

[Stalker_RED]

Как в jquery плагине создать событие?

Вот же: api.jquery.com/trigger
Еще: api.jquery.com/category/events/event-handler-attachment

что бы при инициализации моего плагина можно было отменить все действия которые выполняются в функции и написать свои

В какой функции?

Пример:
При нажатии на

И что не так с этим кодом? jsfiddle.net/mLryt9jx

[Егор Астрейко]

Stalker_RED, Я хочу что бы при нажатии на блок "title", срабатывало событие. Но если при инициализации плагина указать

show: function() {
// Выполняется код который тут
 return false;
}

Мой код не выполнять при нажатии на "title", а выполнялся тот что будет указан при инциализации

Answer 1

[Егор Астрейко]

Спасибо Stalker_RED , удалось решить проблему
Получается так:
В параметрах создаем функцию:

var pluginName = "defaultPluginName",
defaults = {
   show: function() {}
};

В init создаем переменную:

init: function() {
   var options = this.options;
}

Теперь можно в init спокойно обращаться к этой функции

init: function() {
   var options = this.options;
   elem.on("click", function(event){
      if ( option.show(event) != false ) {
         // Делаем что хотим при нажатии на на этот элемент
      }
   })
}

в js при инициализации:

$("elem").pluginName({
   show: function(event) {
      // Тут все что вы хотите сделать при нажатии на элемент <b>elem</b>
      // Если указать return false; То все стандартные действия будут отменены
   }
});

Answer 2

[Ihor Bratukh]

Так пробовали?

init: function() {
	this.element.on('click', this.options.show);
}

Comments

[Егор Астрейко]

Сейчас попробую )
У меня сразу вопрос, мне придется функцию show прописывать в настройках ?

[Ihor Bratukh]

Егор Астрейко, да, иначе будет undefined или ошибка в 'use strict'. Делайте проверки.

[Егор Астрейко]

BRAGA96, а как мне сделать, что бы тип если переменная равна fals, то мои действия отменить ?

[Егор Астрейко]

BRAGA96, как мне сделать именно на title ?