Форум

elink12 · #1 (**permalink**) 27.09.2017, 21:33

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

<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>

рони · #2 (**permalink**) 27.09.2017, 21:50

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>

рони · #3 (**permalink**) 27.09.2017, 22:03

elink12,

$("input",this.element).click(this.click.bind(this));

рони · #4 (**permalink**) 27.09.2017, 22:05

elink12,
или так строка 36

$(this.element).on("click","input",this.click.bind(this));

рони · #5 (**permalink**) 27.09.2017, 22:18

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>

elink12 · #6 (**permalink**) 27.09.2017, 22:36

$(this.element).on({"click" : this.click},"input",this.options);

Вот это мне очень помогло, получается происходит "сопряжение" действия с функцией, мне почему-то казалось, что по структуре и логике должно быть немного иначе и требуется это делать в fn, как контроллере, получается, что объект создается каждый раз при любом событие и обрабатывается в Init?

Rasy · #7 (**permalink**) 27.09.2017, 23:21

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>

elink12 · #8 (**permalink**) 27.09.2017, 23:53

Хм, а как в этих случаях правильно передать значение value в функцию?
у меня возвращается событие, можно конечно из него вытащить, но будет ли это верно?

elink12 · #9 (**permalink**) 28.09.2017, 00:06

Блин, что-то не пойму, как из инит например вызвать другую функцию конструктора , какой синтаксис в плагине?

Rasy · #10 (**permalink**) 28.09.2017, 00:17

Сообщение от elink12

Хм, а как в этих случаях правильно передать значение value в функцию?
у меня возвращается событие, можно конечно из него вытащить, но будет ли это верно?

Да, объект события подходит для манипуляций.

Plugin.prototype = {
  click : function(e){
    e.target.value = this.options.color;
  }
};

Сообщение от elink12

Блин, что-то не пойму, как из инит например вызвать другую функцию конструктора , какой синтаксис в плагине?

Просто обратиться к методу объекта

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

Форум

Справочник

Discord чат

Курсы javascript