Подскажите по созданию плагина
Есть маленький плагин, ничего особого не делает, только выводит в консоль опции при создании объекта и при нажатие. Понимаю, что вопрос мега глупый, но данный код не работает с несколькими объектами, почему и как это сделать. Простите ребята, каюсь. :cray:
<script>
(function($) {
var pluginName = 'Plugin',
defaults = {
propertyName: "value"
};
options = {};
function Plugin( element, options ) {
this.element = element;
this.options = $.extend( {}, defaults, options) ;
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype = {
init: function (e) {
console.log(this.options);
}
};
$.fn.Plugin = function ( options,event ) {
this.each(function () {
plugin = new Plugin( this, options );
});
$(this).click(function(){
plugin.init();
});
}
})(jQuery);
$( document ).ready(function() {
$('#alert').Plugin({color:'green'});
$('#alert1').Plugin({color:'red'});
});
</script>
<div id='alert'>alert</div>
<div id='alert1'>alert1</div>
|
elink12,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<script>
(function($) {
var pluginName = 'Plugin',
defaults = {
propertyName: "value"
},
options = {};
function Plugin( element, options ) {
this.element = element;
this.options = $.extend( {}, defaults, options) ;
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype = {
init: function (e) {
console.log(this.options);
$(this.element).click(this.click.bind(this));
},
click : function(){
console.log(this.options);
}
};
$.fn.Plugin = function ( options,event ) {
return this.each(function () {
new Plugin( this, options );
});
}
})(jQuery);
$( document ).ready(function() {
$('#alert').Plugin({color:'green'});
$('#alert1').Plugin({color:'red'});
});
</script>
<div id='alert'>alert</div>
<div id='alert1'>alert1</div>
</body>
</html>
|
elink12,
$("input",this.element).click(this.click.bind(this));
|
elink12,
или так строка 36
$(this.element).on("click","input",this.click.bind(this));
|
elink12,
или так
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<script>
(function($) {
var pluginName = 'Plugin',
defaults = {
propertyName: "value"
},
options = {};
function Plugin( element, options ) {
this.element = element;
this.options = $.extend( {}, defaults, options) ;
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype = {
init: function (e) {
console.log(this.options);
$(this.element).on({"click" : this.click},"input",this.options);
},
click : function(e){
this.value = e.data.color
}
};
$.fn.Plugin = function ( options,event ) {
return this.each(function () {
plugin = new Plugin( this, options );
});
}
})(jQuery);
$( document ).ready(function() {
$('#alert').Plugin({color:'green'});
$('#alert1').Plugin({color:'red'});
});
</script>
<div id='alert'>alert<input type="text"></input></div>
<div id='alert1'>alert<input type="text"></input></div>
</body>
</html>
|
$(this.element).on({"click" : this.click},"input",this.options);
Вот это мне очень помогло, получается происходит "сопряжение" действия с функцией, мне почему-то казалось, что по структуре и логике должно быть немного иначе и требуется это делать в fn, как контроллере, получается, что объект создается каждый раз при любом событие и обрабатывается в Init? |
jQuery boilerplate. Связывание переменной this с функцией.
elink12, еще вариант с полноценным джеквери бойлепрелтом.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<script>
;(function ( $, window, undefined ) {
var pluginName = 'Plugin',
document = window.document,
defaults = {
propertyName: "value"
};
function Plugin( element, options ) {
this.element = element;
this.options = $.extend( {}, defaults, options) ;
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype = {
init: function (e) {
*!*
$(this.element).click($.proxy(this.click, this));
*/!*
},
click : function(){
console.log(this.options);
}
};
$.fn[pluginName] = function ( options ) {
return this.each(function () {
if (!$.data(this, 'plugin_' + pluginName)) {
$.data(this, 'plugin_' + pluginName, new Plugin( this, options ));
}
});
};
}(jQuery, window));
$(function() {
$('#alert').Plugin({color:'green'});
$('#alert1').Plugin({color:'red'});
});
</script>
<div id='alert'>alert</div>
<div id='alert1'>alert1</div>
</body>
</html>
|
Хм, а как в этих случаях правильно передать значение value в функцию?
у меня возвращается событие, можно конечно из него вытащить, но будет ли это верно? |
Блин, что-то не пойму, как из инит например вызвать другую функцию конструктора , какой синтаксис в плагине?
|
Цитата:
Plugin.prototype = {
click : function(e){
e.target.value = this.options.color;
}
};
Цитата:
Plugin.prototype = {
init: function (e) {
$(this.element).click($.proxy(this.click, this));
this.log('test');
},
click : function(e){
e.target.value = this.options.color;
},
log: function(msg) {
console.log(msg);
}
};
|
| Часовой пояс GMT +3, время: 08:44. |