어떻게 방법과 jQuery 플러그인을 만드는 방법?

해결법

1.JQuery와 플러그인 제작 페이지 (http://docs.jquery.com/Plugins/Authoring)에 따르면, JQuery와 및 jQuery.fn 네임 스페이스를 진흙하지 않는 것이 좋습니다. 그들은이 방법을 제안한다 :

JQuery와 플러그인 제작 페이지 (http://docs.jquery.com/Plugins/Authoring)에 따르면, JQuery와 및 jQuery.fn 네임 스페이스를 진흙하지 않는 것이 좋습니다. 그들은이 방법을 제안한다 :

(function( $ ){

    var methods = {
        init : function(options) {

        },
        show : function( ) {    },// IS
        hide : function( ) {  },// GOOD
        update : function( content ) {  }// !!!
    };

    $.fn.tooltip = function(methodOrOptions) {
        if ( methods[methodOrOptions] ) {
            return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
            // Default to "init"
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  methodOrOptions + ' does not exist on jQuery.tooltip' );
        }    
    };


})( jQuery );

전달 된 매개 변수가 기본 메소드 매개 변수가 객체 (또는 null) 인 경우 ( "초기화"여기)에 복귀, 문자열의 경우 기본적으로 당신은 항목에 대한 (포장의 기능 범위) 배열 및 검사에 기능을 저장합니다.

그런 다음 방법과 같이 호출 할 수 있습니다 ...

$('div').tooltip(); // calls the init method
$('div').tooltip({  // calls the init method
  foo : 'bar'
});
$('div').tooltip('hide'); // calls the hide method
$('div').tooltip('update', 'This is the new tooltip content!'); // calls the update method

이 함수 매개 변수의 임의의 길이와 함께 작동 그래서 자바 스크립트는 "인수"변수는 전달 된 모든 인수의 배열입니다.

2.여기에 추가 방법과 플러그인을 만드는 데 사용했던 패턴입니다. 당신은 그것을 같이 사용합니다 :

여기에 추가 방법과 플러그인을 만드는 데 사용했던 패턴입니다. 당신은 그것을 같이 사용합니다 :

$('selector').myplugin( { key: 'value' } );

또는 직접 메소드를 호출하려면

$('selector').myplugin( 'mymethod1', 'argument' );

예:

;(function($) {

    $.fn.extend({
        myplugin: function(options,arg) {
            if (options && typeof(options) == 'object') {
                options = $.extend( {}, $.myplugin.defaults, options );
            }

            // this creates a plugin for each element in
            // the selector or runs the function once per
            // selector.  To have it do so for just the
            // first element (once), return false after
            // creating the plugin to stop the each iteration 
            this.each(function() {
                new $.myplugin(this, options, arg );
            });
            return;
        }
    });

    $.myplugin = function( elem, options, arg ) {

        if (options && typeof(options) == 'string') {
           if (options == 'mymethod1') {
               myplugin_method1( arg );
           }
           else if (options == 'mymethod2') {
               myplugin_method2( arg );
           }
           return;
        }

        ...normal plugin actions...

        function myplugin_method1(arg)
        {
            ...do method1 with this and arg
        }

        function myplugin_method2(arg)
        {
            ...do method2 with this and arg
        }

    };

    $.myplugin.defaults = {
       ...
    };

})(jQuery);

3.이 방법에 대한 무엇 :

이 방법에 대한 무엇 :

jQuery.fn.messagePlugin = function(){
    var selectedObjects = this;
    return {
             saySomething : function(message){
                              $(selectedObjects).each(function(){
                                $(this).html(message);
                              });
                              return selectedObjects; // Preserve the jQuery chainability 
                            },
             anotherAction : function(){
                               //...
                               return selectedObjects;
                             }
           };
}
// Usage:
$('p').messagePlugin().saySomething('I am a Paragraph').css('color', 'red');

선택된 객체는 messagePlugin 폐쇄에 저장되고, 그 기능은 플러그인과 관련된 기능, 각 기능에 현재 선택한 객체에 원하는 작업을 수행 할 수 있습니다 포함 된 개체를 반환합니다.

테스트하고 여기에 코드를 재생할 수 있습니다.

편집 : 업데이트 된 코드의 jQuery chainability의 힘을 유지한다.

4.현재 선택한 답에 대한 문제는 당신이하고있는 생각처럼 당신이 실제로 당신이 실제로 단 하나의 인스턴스를 생성하고 전달하고 ... 선택기의 모든 요소에 대한 사용자 정의 플러그인의 새로운 인스턴스를 생성하지 않을 것입니다 범위로 선택 자체.

현재 선택한 답에 대한 문제는 당신이하고있는 생각처럼 당신이 실제로 당신이 실제로 단 하나의 인스턴스를 생성하고 전달하고 ... 선택기의 모든 요소에 대한 사용자 정의 플러그인의 새로운 인스턴스를 생성하지 않을 것입니다 범위로 선택 자체.

더 깊은 설명이 바이올린을 볼 수 있습니다.

대신 jQuery.each를 사용하여 선택을 통해 루프 필요 선택기의 모든 요소에 대한 사용자 정의 플러그인의 새 인스턴스를 초기화합니다.

방법은 다음과 같습니다

(function($) {

    var CustomPlugin = function($el, options) {

        this._defaults = {
            randomizer: Math.random()
        };

        this._options = $.extend(true, {}, this._defaults, options);

        this.options = function(options) {
            return (options) ?
                $.extend(true, this._options, options) :
                this._options;
        };

        this.move = function() {
            $el.css('margin-left', this._options.randomizer * 100);
        };

    };

    $.fn.customPlugin = function(methodOrOptions) {

        var method = (typeof methodOrOptions === 'string') ? methodOrOptions : undefined;

        if (method) {
            var customPlugins = [];

            function getCustomPlugin() {
                var $el          = $(this);
                var customPlugin = $el.data('customPlugin');

                customPlugins.push(customPlugin);
            }

            this.each(getCustomPlugin);

            var args    = (arguments.length > 1) ? Array.prototype.slice.call(arguments, 1) : undefined;
            var results = [];

            function applyMethod(index) {
                var customPlugin = customPlugins[index];

                if (!customPlugin) {
                    console.warn('$.customPlugin not instantiated yet');
                    console.info(this);
                    results.push(undefined);
                    return;
                }

                if (typeof customPlugin[method] === 'function') {
                    var result = customPlugin[method].apply(customPlugin, args);
                    results.push(result);
                } else {
                    console.warn('Method \'' + method + '\' not defined in $.customPlugin');
                }
            }

            this.each(applyMethod);

            return (results.length > 1) ? results : results[0];
        } else {
            var options = (typeof methodOrOptions === 'object') ? methodOrOptions : undefined;

            function init() {
                var $el          = $(this);
                var customPlugin = new CustomPlugin($el, options);

                $el.data('customPlugin', customPlugin);
            }

            return this.each(init);
        }

    };

})(jQuery);

그리고 작업 바이올린.

첫 번째 바이올린에, 모든 div가 항상 오른쪽으로 픽셀의 숫자를 정확하게 이동하는 방법을 알 수 있습니다. 하나의 옵션 개체 선택기의 모든 요소가 존재하기 때문이다.

위의 기록 기술을 사용하여, 당신은 (그것의 랜덤 항상 라인 89에 1로 설정되어 바와 같이, 제 1 사업부 제외) 두 번째 바이올린에, 각 사업부가 정렬되지 않고 무작위로 이동하는 것을 알 수 있습니다. 우리가 지금 제대로 선택의 모든 요소에 대해 새로운 사용자 정의 플러그인 인스턴스를 인스턴스화되기 때문이다. 모든 요소는 자신의 옵션 개체를 가지고 있으며, 선택에 저장되지 않고, 사용자 정의의 인스턴스 자체 플러그인.

첫 번째 바이올린에있을 것입니다 당신이 새의 jQuery 선택기에서 DOM의 특정 요소를 인스턴스화 사용자 정의 플러그인의 방법에 액세스 할 수있을거야이 수단은 그들을 캐시하도록 강요하지 않습니다.

예를 들어,이 제 바이올린의 기술을 사용하여 모든 옵션 오브젝트의 배열을 반환 할 것이다. 그것은 처음에 정의되지 않은 반환합니다.

$('div').customPlugin();
$('div').customPlugin('options'); // would return an array of all options objects

이것은 첫 번째 바이올린의 옵션 개체에 액세스해야하고, 단 하나의 객체가 아닌 이들의 배열을 반환하는 방법입니다 :

var divs = $('div').customPlugin();
divs.customPlugin('options'); // would return a single options object

$('div').customPlugin('options');
// would return undefined, since it's not a cached selector

나는 위의 기술, 현재 선택한 응답에서 안 하나를 사용하는 것이 좋습니다 것입니다.

5.jQuery를 위젯 공장의 도입으로 쉽게 이것을 많이했다.

jQuery를 위젯 공장의 도입으로 쉽게 이것을 많이했다.

예:

$.widget( "myNamespace.myPlugin", {

    options: {
        // Default options
    },

    _create: function() {
        // Initialization logic here
    },

    // Create a public method.
    myPublicMethod: function( argument ) {
        // ...
    },

    // Create a private method.
    _myPrivateMethod: function( argument ) {
        // ...
    }

});

초기화 :

$('#my-element').myPlugin();
$('#my-element').myPlugin( {defaultValue:10} );

메소드 호출 :

$('#my-element').myPlugin('myPublicMethod', 20);

(이것은 jQuery를 UI 라이브러리를 구축하는 방법입니다.)

6.더 간단한 방법은 중첩 된 기능을 사용하는 것입니다. 그럼 당신은 객체 지향 방식을 체인 수 있습니다. 예:

더 간단한 방법은 중첩 된 기능을 사용하는 것입니다. 그럼 당신은 객체 지향 방식을 체인 수 있습니다. 예:
```
jQuery.fn.MyPlugin = function()
{
  var _this = this;
  var a = 1;

  jQuery.fn.MyPlugin.DoSomething = function()
  {
    var b = a;
    var c = 2;

    jQuery.fn.MyPlugin.DoSomething.DoEvenMore = function()
    {
      var d = a;
      var e = c;
      var f = 3;
      return _this;
    };

    return _this;
  };

  return this;
};
```
그리고 여기를 호출하는 방법은 다음과 같습니다
```
var pluginContainer = $("#divSomeContainer");
pluginContainer.MyPlugin();
pluginContainer.MyPlugin.DoSomething();
pluginContainer.MyPlugin.DoSomething.DoEvenMore();
```
하지만주의해야합니다. 이 생성 될 때까지 당신은 중첩 된 함수를 호출 할 수 없습니다. 당신은이 작업을 수행 할 수 있습니다 :
```
var pluginContainer = $("#divSomeContainer");
pluginContainer.MyPlugin();
pluginContainer.MyPlugin.DoSomething.DoEvenMore();
pluginContainer.MyPlugin.DoSomething();
```
해봐요 기능이 아직 실행되지 않았기 때문에 DoEvenMore 기능도 DoEvenMore 기능을 만들 필요로하는 존재하지 않습니다. 대부분의 jQuery 플러그인의 경우, 당신은 정말 하나 개의 중첩 된 기능의 수준이 아니라이 내가 여기에 표시 한대로이 것입니다. 그냥 당신이 당신이 부모 함수의 다른 코드 전에 부모 함수의 시작 부분에 이러한 기능을 정의하는 것이 중첩 된 함수를 만들 때 실행됩니다 확인하십시오.

마지막으로, "이"멤버 변수에 저장되는 것을 참고 "_this"를 불렀다. 당신이 호출 클라이언트의 인스턴스에 대한 참조를 필요로하는 경우 중첩 된 함수의 경우, 당신은 "_this"를 반환해야합니다. 당신은 "이"중첩 된 함수에서 그는 함수에 대한 참조가 아닌 jQuery를 인스턴스를 반환하기 때문에 반환 할 수 없습니다. JQuery와 참조를 반환하는 반환에 체인 고유의 jQuery 방법에 당신을 수 있습니다.

7.내가 jQuery를 플러그인 상용구에서 그것을 가지고

내가 jQuery를 플러그인 상용구에서 그것을 가지고

또한 jQuery를 플러그인 상용구, 재현부에 기재된

// jQuery Plugin Boilerplate
// A boilerplate for jumpstarting jQuery plugins development
// version 1.1, May 14th, 2011
// by Stefan Gabos

// remember to change every instance of "pluginName" to the name of your plugin!
(function($) {

    // here we go!
    $.pluginName = function(element, options) {

    // plugin's default options
    // this is private property and is accessible only from inside the plugin
    var defaults = {

        foo: 'bar',

        // if your plugin is event-driven, you may provide callback capabilities
        // for its events. execute these functions before or after events of your
        // plugin, so that users may customize those particular events without
        // changing the plugin's code
        onFoo: function() {}

    }

    // to avoid confusions, use "plugin" to reference the
    // current instance of the object
    var plugin = this;

    // this will hold the merged default, and user-provided options
    // plugin's properties will be available through this object like:
    // plugin.settings.propertyName from inside the plugin or
    // element.data('pluginName').settings.propertyName from outside the plugin,
    // where "element" is the element the plugin is attached to;
    plugin.settings = {}

    var $element = $(element), // reference to the jQuery version of DOM element
    element = element; // reference to the actual DOM element

    // the "constructor" method that gets called when the object is created
    plugin.init = function() {

    // the plugin's final properties are the merged default and
    // user-provided options (if any)
    plugin.settings = $.extend({}, defaults, options);

    // code goes here

   }

   // public methods
   // these methods can be called like:
   // plugin.methodName(arg1, arg2, ... argn) from inside the plugin or
   // element.data('pluginName').publicMethod(arg1, arg2, ... argn) from outside
   // the plugin, where "element" is the element the plugin is attached to;

   // a public method. for demonstration purposes only - remove it!
   plugin.foo_public_method = function() {

   // code goes here

    }

     // private methods
     // these methods can be called only from inside the plugin like:
     // methodName(arg1, arg2, ... argn)

     // a private method. for demonstration purposes only - remove it!
     var foo_private_method = function() {

        // code goes here

     }

     // fire up the plugin!
     // call the "constructor" method
     plugin.init();

     }

     // add the plugin to the jQuery.fn object
     $.fn.pluginName = function(options) {

        // iterate through the DOM elements we are attaching the plugin to
        return this.each(function() {

          // if plugin has not already been attached to the element
          if (undefined == $(this).data('pluginName')) {

              // create a new instance of the plugin
              // pass the DOM element and the user-provided options as arguments
              var plugin = new $.pluginName(this, options);

              // in the jQuery version of the element
              // store a reference to the plugin object
              // you can later access the plugin and its methods and properties like
              // element.data('pluginName').publicMethod(arg1, arg2, ... argn) or
              // element.data('pluginName').settings.propertyName
              $(this).data('pluginName', plugin);

           }

        });

    }

})(jQuery);

8.너무 늦었하지만 어쩌면 누군가 일일 수 있습니다.

너무 늦었하지만 어쩌면 누군가 일일 수 있습니다.

나는 몇 가지 방법과 jQuery 플러그인을 만들고, 내가 jQuery를 플러그인 보일러 (https://github.com/acanimal/jQuery-Plugin-Boilerplate)를 만드는 몇 가지 기사와 약간의 타이어를 읽은 후, 같은 같은 상황이었다.

또한, 나는 (https://github.com/acanimal/tagger.js) 태그를 관리 할 수 그것으로 플러그인을 개발하고 단계별에게 jQuery 플러그인 (HTTP의 생성을 설명하는 두 개의 블로그 게시물 작성 : // acuriousanimal합니다. COM / 블로그 / 2013 / 01 / 15 / 일이 - 내가 배운 창출-A-JQuery와 - 플러그인 부분-I를 /).

9.넌 할 수있어:

넌 할 수있어:

(function($) {
  var YourPlugin = function(element, option) {
    var defaults = {
      //default value
    }

    this.option = $.extend({}, defaults, option);
    this.$element = $(element);
    this.init();
  }

  YourPlugin.prototype = {
    init: function() { },
    show: function() { },
    //another functions
  }

  $.fn.yourPlugin = function(option) {
    var arg = arguments,
        options = typeof option == 'object' && option;;
    return this.each(function() {
      var $this = $(this),
          data = $this.data('yourPlugin');

      if (!data) $this.data('yourPlugin', (data = new YourPlugin(this, options)));
      if (typeof option === 'string') {
        if (arg.length > 1) {
          data[option].apply(data, Array.prototype.slice.call(arg, 1));
        } else {
          data[option]();
        }
      }
    });
  };
});

이런 방식으로 플러그인 개체가 요소에 데이터 값으로 저장됩니다.

//Initialization without option
$('#myId').yourPlugin();

//Initialization with option
$('#myId').yourPlugin({
  // your option
});

// call show method
$('#myId').yourPlugin('show');

10.어떤 트리거를 사용하는 방법에 대해? 사람이 그들을 사용하는 단점을 알고 있나요? 이점은 모든 내부 변수는 트리거를 통해 액세스 할 수 있는지, 그리고 코드는 매우 간단합니다.

어떤 트리거를 사용하는 방법에 대해? 사람이 그들을 사용하는 단점을 알고 있나요? 이점은 모든 내부 변수는 트리거를 통해 액세스 할 수 있는지, 그리고 코드는 매우 간단합니다.

jsfiddle을 참조하십시오.

<div id="mydiv">This is the message container...</div>

<script>
    var mp = $("#mydiv").messagePlugin();

    // the plugin returns the element it is called on
    mp.trigger("messagePlugin.saySomething", "hello");

    // so defining the mp variable is not needed...
    $("#mydiv").trigger("messagePlugin.repeatLastMessage");
</script>

jQuery.fn.messagePlugin = function() {

    return this.each(function() {

        var lastmessage,
            $this = $(this);

        $this.on('messagePlugin.saySomething', function(e, message) {
            lastmessage = message;
            saySomething(message);
        });

        $this.on('messagePlugin.repeatLastMessage', function(e) {
            repeatLastMessage();
        });

        function saySomething(message) {
            $this.html("<p>" + message + "</p>");
        }

        function repeatLastMessage() {
            $this.append('<p>Last message was: ' + lastmessage + '</p>');
        }

    });

}

11.저는 여기에 인수 간단한 플러그인을 작성하는 단계를 제안하고자합니다.

저는 여기에 인수 간단한 플러그인을 작성하는 단계를 제안하고자합니다.

(함수 ($) { $ .fn.myFirstPlugin = 기능 (옵션) { // 기본 PARAMS VAR PARAMS = $ .extend ({ 텍스트 : '기본 제목', 글꼴 크기 : 10, }, 옵션); $ (이)는 .text (params.text)을 반환; } } (jQuery를)); $ ( 'CLS-제목입니다.') myFirstPlugin ({텍스트 : '인수 제목'}).; <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">

여기, 우리가 추가 한 기본 객체라고 PARAMS과 기능을 확장하여 옵션의 설정 기본값. 우리가 다음 빈 인수를 전달하는 경우 따라서, 대신, 그렇지 않으면 설정합니다 기본 값을 설정합니다.

더 읽기 : jQuery 플러그인을 만드는 방법

12.이걸로 해봐:

이걸로 해봐:

$.fn.extend({
"calendar":function(){
    console.log(this);
    var methods = {
            "add":function(){console.log("add"); return this;},
            "init":function(){console.log("init"); return this;},
            "sample":function(){console.log("sample"); return this;}
    };

    methods.init(); // you can call any method inside
    return methods;
}}); 
$.fn.calendar() // caller or 
$.fn.calendar().sample().add().sample() ......; // call methods

13.다음은이 내 베어 본 버전입니다. 사람과 마찬가지로 당신이 같이 부를 것이다, 전에 게시 :

다음은이 내 베어 본 버전입니다. 사람과 마찬가지로 당신이 같이 부를 것이다, 전에 게시 :

$('#myDiv').MessagePlugin({ yourSettings: 'here' })
           .MessagePlugin('saySomething','Hello World!');

- 또는 액세스 직접 인스턴스 @ plugin_MessagePlugin

$elem = $('#myDiv').MessagePlugin();
var instance = $elem.data('plugin_MessagePlugin');
instance.saySomething('Hello World!');

MessagePlugin.js

;(function($){

    function MessagePlugin(element,settings){ // The Plugin
        this.$elem = element;
        this._settings = settings;
        this.settings = $.extend(this._default,settings);
    }

    MessagePlugin.prototype = { // The Plugin prototype
        _default: {
            message: 'Generic message'
        },
        initialize: function(){},
        saySomething: function(message){
            message = message || this._default.message;
            return this.$elem.html(message);
        }
    };

    $.fn.MessagePlugin = function(settings){ // The Plugin call

        var instance = this.data('plugin_MessagePlugin'); // Get instance

        if(instance===undefined){ // Do instantiate if undefined
            settings = settings || {};
            this.data('plugin_MessagePlugin',new MessagePlugin(this,settings));
            return this;
        }

        if($.isFunction(MessagePlugin.prototype[settings])){ // Call method if argument is name of method
            var args = Array.prototype.slice.call(arguments); // Get the arguments as Array
            args.shift(); // Remove first argument (name of method)
            return MessagePlugin.prototype[settings].apply(instance, args); // Call the method
        }

        // Do error handling

        return this;
    }

})(jQuery);

14.(-chainability jQuery를 보존하면서) 방식이 내부 - 플러그인 방식 / -settings에 공용 인터페이스를 제공 - 다음 - 플러그인 구조 JQuery와 데이터 ()를 이용

(-chainability jQuery를 보존하면서) 방식이 내부 - 플러그인 방식 / -settings에 공용 인터페이스를 제공 - 다음 - 플러그인 구조 JQuery와 데이터 ()를 이용

(function($, window, undefined) { 
  const defaults = {
    elementId   : null,
    shape       : "square",
    color       : "aqua",
    borderWidth : "10px",
    borderColor : "DarkGray"
  };

  $.fn.myPlugin = function(options) {
    // settings, e.g.:  
    var settings = $.extend({}, defaults, options);

    // private methods, e.g.:
    var setBorder = function(color, width) {        
      settings.borderColor = color;
      settings.borderWidth = width;          
      drawShape();
    };

    var drawShape = function() {         
      $('#' + settings.elementId).attr('class', settings.shape + " " + "center"); 
      $('#' + settings.elementId).css({
        'background-color': settings.color,
        'border': settings.borderWidth + ' solid ' + settings.borderColor      
      });
      $('#' + settings.elementId).html(settings.color + " " + settings.shape);            
    };

    return this.each(function() { // jQuery chainability     
      // set stuff on ini, e.g.:
      settings.elementId = $(this).attr('id'); 
      drawShape();

      // PUBLIC INTERFACE 
      // gives us stuff like: 
      //
      //    $("#...").data('myPlugin').myPublicPluginMethod();
      //
      var myPlugin = {
        element: $(this),
        // access private plugin methods, e.g.: 
        setBorder: function(color, width) {        
          setBorder(color, width);
          return this.element; // To ensure jQuery chainability 
        },
        // access plugin settings, e.g.: 
        color: function() {
          return settings.color;
        },        
        // access setting "shape" 
        shape: function() {
          return settings.shape;
        },     
        // inspect settings 
        inspectSettings: function() {
          msg = "inspecting settings for element '" + settings.elementId + "':";   
          msg += "\n--- shape: '" + settings.shape + "'";
          msg += "\n--- color: '" + settings.color + "'";
          msg += "\n--- border: '" + settings.borderWidth + ' solid ' + settings.borderColor + "'";
          return msg;
        },               
        // do stuff on element, e.g.:  
        change: function(shape, color) {        
          settings.shape = shape;
          settings.color = color;
          drawShape();   
          return this.element; // To ensure jQuery chainability 
        }
      };
      $(this).data("myPlugin", myPlugin);
    }); // return this.each 
  }; // myPlugin
}(jQuery));

지금 당신은 액세스 내부 플러그인 - 메소드를 호출하거나 데이터 또는 구문을 사용하여 관련 요소를 플러그인 수정할 수 있습니다 :

$("#...").data('myPlugin').myPublicPluginMethod();

만큼 당신이 myPublicPluginMethod (의 구현 내부에서 현재의 요소 (이)을 반환으로) jQuery를-chainability 보존됩니다 - 다음 작품 있도록 :

$("#...").data('myPlugin').myPublicPluginMethod().css("color", "red").html("....");

다음은 몇 가지 예 (자세한 내용은이 바이올린을 체크 아웃에 대한)입니다 :

// initialize plugin on elements, e.g.:
$("#shape1").myPlugin({shape: 'square', color: 'blue', borderColor: 'SteelBlue'});
$("#shape2").myPlugin({shape: 'rectangle', color: 'red', borderColor: '#ff4d4d'});
$("#shape3").myPlugin({shape: 'circle', color: 'green', borderColor: 'LimeGreen'});

// calling plugin methods to read element specific plugin settings:
console.log($("#shape1").data('myPlugin').inspectSettings());    
console.log($("#shape2").data('myPlugin').inspectSettings());    
console.log($("#shape3").data('myPlugin').inspectSettings());      

// calling plugin methods to modify elements, e.g.:
// (OMG! And they are chainable too!) 
$("#shape1").data('myPlugin').change("circle", "green").fadeOut(2000).fadeIn(2000);      
$("#shape1").data('myPlugin').setBorder('LimeGreen', '30px');

$("#shape2").data('myPlugin').change("rectangle", "red"); 
$("#shape2").data('myPlugin').setBorder('#ff4d4d', '40px').css({
  'width': '350px',
  'font-size': '2em' 
}).slideUp(2000).slideDown(2000);              

$("#shape3").data('myPlugin').change("square", "blue").fadeOut(2000).fadeIn(2000);   
$("#shape3").data('myPlugin').setBorder('SteelBlue', '30px');

// etc. ...

15.이것은 실제로 defineProperty를 사용하여 "좋은"방법으로 작업을 할 수 있습니다. 어디에서 얻을 사용 ()을 가진 네임 스페이스를 플러그인이나 문자열로 함수 이름을 전달하지 않고 "좋은"를 의미한다.

이것은 실제로 defineProperty를 사용하여 "좋은"방법으로 작업을 할 수 있습니다. 어디에서 얻을 사용 ()을 가진 네임 스페이스를 플러그인이나 문자열로 함수 이름을 전달하지 않고 "좋은"를 의미한다.

호환성 니트 : defineProperty는 아래 IE8과 같은 고대의 브라우저에서 작동하지 않습니다. 경고 : $ .fn.color.blue.apply (foo는, 인수가) 작동하지 않습니다, 당신은 foo.color.blue.apply (foo는, 인수)를 사용합니다.
```
function $_color(color)
{
    return this.css('color', color);
}

function $_color_blue()
{
    return this.css('color', 'blue');
}

Object.defineProperty($.fn, 'color',
{
    enumerable: true,
    get: function()
    {
        var self = this;

        var ret = function() { return $_color.apply(self, arguments); }
        ret.blue = function() { return $_color_blue.apply(self, arguments); }

        return ret;
    }
});

$('#foo').color('#f00');
$('#bar').color.blue();
```
JSFiddle 링크

16.JQuery와 표준에 따라 당신은 다음과 같이 플러그인을 만들 수 있습니다 :

JQuery와 표준에 따라 당신은 다음과 같이 플러그인을 만들 수 있습니다 :

(function($) {

    //methods starts here....
    var methods = {
        init : function(method,options) {
             this.loadKeywords.settings = $.extend({}, this.loadKeywords.defaults, options);
             methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
             $loadkeywordbase=$(this);
        },
        show : function() {
            //your code here.................
        },
        getData : function() {
           //your code here.................
        }

    } // do not put semi colon here otherwise it will not work in ie7
    //end of methods

    //main plugin function starts here...
    $.fn.loadKeywords = function(options,method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(
                    arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not ecw-Keywords');
        }
    };
    $.fn.loadKeywords.defaults = {
            keyName:     'Messages',
            Options:     '1',
            callback: '',
    };
    $.fn.loadKeywords.settings = {};
    //end of plugin keyword function.

})(jQuery);

어떻게이 플러그인을 호출?

1.$('your element').loadKeywords('show',{'callback':callbackdata,'keyName':'myKey'}); // show() will be called

참조 : 링크

17.내가 당신을 도울 것 같아요 ...

내가 당신을 도울 것 같아요 ...

(함수 ($) { $ .fn.highlight = 기능 (옵션) { //이 기본 옵션이 할 수있는 가장 쉬운 방법입니다. VAR 설정 = $ .extend ({ // 다음은 기본값입니다. 색상 : "# 000", 의 backgroundColor : "노란색" }, 옵션); // 설정 변수를 기반으로 컬렉션을 선택합니다. {(this.css 반환 색상 : settings.color, backgroundColor로 : settings.backgroundColor }); }; } (jQuery를));

위의 예에서 나는 plugin.I 내가 사전에 기본에서 자신의 jQuery를 플러그인을 만드는 방법에 대해 논의했다있는 기사를 공유 한 간단한 JQuery와 하이라이트를 만들었다. 나는 당신이 그것을 확인해야한다고 생각 ... http://mycodingtricks.com/jquery/how-to-create-your-own-jquery-plugin/

18.다음은 디버깅을위한 작은 가지고 플러그인 경고 방법이다. jquery.debug.js 파일에이 코드를 유지 : JS :

다음은 디버깅을위한 작은 가지고 플러그인 경고 방법이다. jquery.debug.js 파일에이 코드를 유지 : JS :

jQuery.fn.warning = function() {
   return this.each(function() {
      alert('Tag Name:"' + $(this).prop("tagName") + '".');
   });
};

HTML :

<html>
   <head>
      <title>The jQuery Example</title>

      <script type = "text/javascript" 
         src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

      <script src = "jquery.debug.js" type = "text/javascript"></script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").warning();
            $("p").warning();
         });
      </script> 
   </head>

   <body>
      <p>This is paragraph</p>
      <div>This is division</div>
   </body>

</html>

19.여기에 내가 그것을 할 방법입니다 :

여기에 내가 그것을 할 방법입니다 :

(function ( $ ) {

$.fn.gridview = function( options ) {

    ..........
    ..........


    var factory = new htmlFactory();
    factory.header(...);

    ........

};

}( jQuery ));


var htmlFactory = function(){

    //header
     this.header = function(object){
       console.log(object);
  }
 }

20.당신이 한 일은 기본적으로 새로운 방법으로 jQuery.fn.messagePlugin 객체를 확장하고 있습니다. 어떤 유용하지만 귀하의 경우입니다.

당신이 한 일은 기본적으로 새로운 방법으로 jQuery.fn.messagePlugin 객체를 확장하고 있습니다. 어떤 유용하지만 귀하의 경우입니다.

이 기술을 사용해야
```
function methodA(args){ this // refers to object... }
function saySomething(message){ this.html(message);  to first function }

jQuery.fn.messagePlugin = function(opts) {
  if(opts=='methodA') methodA.call(this);
  if(opts=='saySomething') saySomething.call(this, arguments[0]); // arguments is an array of passed parameters
  return this.each(function(){
    alert(this);
  });

};
```
하지만 당신은 내가 할 수있는 방법이 의미 원하는 것을 달성 할 수 $ ( "#의 mydiv") messagePlugin () saySomething ( "안녕하세요")..; 내 친구는 그가 lugins 어떻게 여기 기능의 당신의 chainf로를 확장하는 방법에 대해 자신의 블로그에 링크되어 쓰기 시작

from https://stackoverflow.com/questions/1117086/how-to-create-a-jquery-plugin-with-methods by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 어떻게 jQuery를 UI 대화 상자에서 닫기 버튼을 제거하려면? (0)	2020.10.18
[JQUERY] jQuery를 사용하여 폼 입력 필드를 얻? (0)	2020.10.18
[JQUERY] 무료있는 jqGrid에 remapColumnsByName와 remapColums를 교체하는 방법 (0)	2020.10.18
[JQUERY] VueJS 및 jQuery를 플레이 멋진합니다 (0)	2020.10.18
[JQUERY] 어떻게 응답을 반환하기 전에 렌더링 할 페이지 기다릴 AJAX를 GET 요청을 얻으려면? (0)	2020.10.18

복붙노트

[JQUERY] 어떻게 방법과 jQuery 플러그인을 만드는 방법?

어떻게 방법과 jQuery 플러그인을 만드는 방법?

해결법

1.JQuery와 플러그인 제작 페이지 (http://docs.jquery.com/Plugins/Authoring)에 따르면, JQuery와 및 jQuery.fn 네임 스페이스를 진흙하지 않는 것이 좋습니다. 그들은이 방법을 제안한다 :

2.여기에 추가 방법과 플러그인을 만드는 데 사용했던 패턴입니다. 당신은 그것을 같이 사용합니다 :

3.이 방법에 대한 무엇 :

5.jQuery를 위젯 공장의 도입으로 쉽게 이것을 많이했다.

6.더 간단한 방법은 중첩 된 기능을 사용하는 것입니다. 그럼 당신은 객체 지향 방식을 체인 수 있습니다. 예:

7.내가 jQuery를 플러그인 상용구에서 그것을 가지고

8.너무 늦었하지만 어쩌면 누군가 일일 수 있습니다.

9.넌 할 수있어:

10.어떤 트리거를 사용하는 방법에 대해? 사람이 그들을 사용하는 단점을 알고 있나요? 이점은 모든 내부 변수는 트리거를 통해 액세스 할 수 있는지, 그리고 코드는 매우 간단합니다.

11.저는 여기에 인수 간단한 플러그인을 작성하는 단계를 제안하고자합니다.

여기, 우리가 추가 한 기본 객체라고 PARAMS과 기능을 확장하여 옵션의 설정 기본값. 우리가 다음 빈 인수를 전달하는 경우 따라서, 대신, 그렇지 않으면 설정합니다 기본 값을 설정합니다.

더 읽기 : jQuery 플러그인을 만드는 방법

12.이걸로 해봐:

13.다음은이 내 베어 본 버전입니다. 사람과 마찬가지로 당신이 같이 부를 것이다, 전에 게시 :

14.(-chainability jQuery를 보존하면서) 방식이 내부 - 플러그인 방식 / -settings에 공용 인터페이스를 제공 - 다음 - 플러그인 구조 JQuery와 데이터 ()를 이용

15.이것은 실제로 defineProperty를 사용하여 "좋은"방법으로 작업을 할 수 있습니다. 어디에서 얻을 사용 ()을 가진 네임 스페이스를 플러그인이나 문자열로 함수 이름을 전달하지 않고 "좋은"를 의미한다.

16.JQuery와 표준에 따라 당신은 다음과 같이 플러그인을 만들 수 있습니다 :

17.내가 당신을 도울 것 같아요 ...

18.다음은 디버깅을위한 작은 가지고 플러그인 경고 방법이다. jquery.debug.js 파일에이 코드를 유지 : JS :

19.여기에 내가 그것을 할 방법입니다 :

20.당신이 한 일은 기본적으로 새로운 방법으로 jQuery.fn.messagePlugin 객체를 확장하고 있습니다. 어떤 유용하지만 귀하의 경우입니다.

'JQUERY' 카테고리의 다른 글

티스토리툴바

어떻게 방법과 jQuery 플러그인을 만드는 방법?

해결법

1.JQuery와 플러그인 제작 페이지 (http://docs.jquery.com/Plugins/Authoring)에 따르면, JQuery와 및 jQuery.fn 네임 스페이스를 진흙하지 않는 것이 좋습니다. 그들은이 방법을 제안한다 :

2.여기에 추가 방법과 플러그인을 만드는 데 사용했던 패턴입니다. 당신은 그것을 같이 사용합니다 :

3.이 방법에 대한 무엇 :

5.jQuery를 위젯 공장의 도입으로 쉽게 이것을 많이했다.

6.더 간단한 방법은 중첩 된 기능을 사용하는 것입니다. 그럼 당신은 객체 지향 방식을 체인 수 있습니다. 예:

7.내가 jQuery를 플러그인 상용구에서 그것을 가지고

8.너무 늦었하지만 어쩌면 누군가 일일 수 있습니다.

9.넌 할 수있어:

10.어떤 트리거를 사용하는 방법에 대해? 사람이 그들을 사용하는 단점을 알고 있나요? 이점은 모든 내부 변수는 트리거를 통해 액세스 할 수 있는지, 그리고 코드는 매우 간단합니다.

11.저는 여기에 인수 간단한 플러그인을 작성하는 단계를 제안하고자합니다.

여기, 우리가 추가 한 기본 객체라고 PARAMS과 기능을 확장하여 옵션의 설정 기본값. 우리가 다음 빈 인수를 전달하는 경우 따라서, 대신, 그렇지 않으면 설정합니다 기본 값을 설정합니다. 더 읽기 : jQuery 플러그인을 만드는 방법

12.이걸로 해봐:

13.다음은이 내 베어 본 버전입니다. 사람과 마찬가지로 당신이 같이 부를 것이다, 전에 게시 :

14.(-chainability jQuery를 보존하면서) 방식이 내부 - 플러그인 방식 / -settings에 공용 인터페이스를 제공 - 다음 - 플러그인 구조 JQuery와 데이터 ()를 이용

15.이것은 실제로 defineProperty를 사용하여 "좋은"방법으로 작업을 할 수 있습니다. 어디에서 얻을 사용 ()을 가진 네임 스페이스를 플러그인이나 문자열로 함수 이름을 전달하지 않고 "좋은"를 의미한다.

16.JQuery와 표준에 따라 당신은 다음과 같이 플러그인을 만들 수 있습니다 :

17.내가 당신을 도울 것 같아요 ...

18.다음은 디버깅을위한 작은 가지고 플러그인 경고 방법이다. jquery.debug.js 파일에이 코드를 유지 : JS :

19.여기에 내가 그것을 할 방법입니다 :

20.당신이 한 일은 기본적으로 새로운 방법으로 jQuery.fn.messagePlugin 객체를 확장하고 있습니다. 어떤 유용하지만 귀하의 경우입니다.

'JQUERY' 카테고리의 다른 글

티스토리툴바