----Factory method for custom plugins in jquery (Factory Widget)

jquery gives us a powerful plugin customization feature that can be used as our arsenal, applied to all Web pages, using a more interesting syntax, here are some of the discussion.

Follow the following guidelines:

1 Iife Create a scope for jquery

(function($) {} (JQuery))

2 namespace to be unique.

$.widget (' custom.colorize ')

Custom is the namespace, Colorize is the plugin name

3 default Options

Options:{red:255,green:0,blue:0,change:null, random:null}

Three attributes (Red,green,blue), two methods (Change,random) initialization

4 extensible option, using the factory method automatically detects input parameters and extensions. For example,

$ (' #div1 '). Colorize ({    green:+,    random:function(event, UI) {         return ui.green >;    }})

option will be extended to:

option = {    red:255,    Green:+,    blue:0, change    : NULL ,    random:function(event, UI) {        return ui.green >;    }}

The $.extend ({},default, Options) method should be used in essence

5 Adding Private methods:

(function($) {$.widget ("Custom.colorize", {options:{red:255, Green:0, Blue:0, change:NULL, Random:NULL        },        //Constructor_create:function() {             This. Element. addclass ("Custom-colorize");  This. Changer = $ (' <button> ', {text: ' Change ', ' class ': ' Custom-colorize-changer ')}). AppendTo ( This. Element). button (); //bind a fixed-point event on the button             This. _on ( This. Charger, {click:"Random"            });  This. _refresh (); },        //Update, Render_refresh:function() {             This. Element.css (' Background-color ', ' RGB (${ This. options.red},${ This. options.green},${ This. Options.blue})            `); //Trigger callback function Change             This. _trigger (' Change '); },        //destroyed_destroy:function() {             This. Changer.remove ();  This. Element. Removeclass (' Custom-colorize '). EnableSelection (). CSS (' Background-color ', ' Transparent '); },        //settings, including all parameter merges_setoptions:function(){             This. _superapply (arguments);  This. _refresh (); },        //settings, partial parameters_setoption:function(key,value) {if(/ref|green|blue/.test (key) && (Value < 0 | | value > 255)) {                return; }             This. _super (Key,value); }    });} (jQuery))

6 Public methods, add a random method

(function($) {$.widget ("Custom.colorize",{        //public method that can be accessed by colorize (' random ')Randomfunction() {Let color={Red:Math.floor (Math.random ()* 256), Green:Math.floor (Math.random ()* 256), Blue:Math.floor (Math.random ()* 256)            }; if( This. _trigger ("random", event,colors)!==false) {                 This. Option (colors);  }        }    }); 

Then take a look at how to use this plugin:

//Initialize default parameters$ (' #my-widget1 '). Colorize ();//initialized with Parameters$ (' #my-widget2 '). Colorize ({green:128, Random:function(event, UI) {returnUi.green > 128; }});//Click Enable or disable$ (' #disable '). On (' click ',function(){    if($ (': Custom-colorize '). Colorize (' option ', ' disabled '))) {        $(': Custom-colorize '). Colorize (' Enable ')); } Else {        $(': Custom-colorize '). Colorize (' disable ')); }});//Click Set after run parameters$ (' #grenn '). On (' click ',function() {    $(': Custom-colorize '). Colorize (' option '), {red:64, Green:250, Blue:8    });});

It is worth noting that:

1 built-in plugin selector, if you are using a factory method to create a plugin, you can use $ (': plug-in name ') to get all instances of the plugin applied (instance),

2 using "Enable" and "Disable" as parameters to operate the plug-in is valid

3 The UI in Random is a jquery UI object, see https://jqueryui.com/for details.

Code from jquery Official document: http://jqueryui.com/widget/

Hope to help you!

----Factory method for custom plugins in jquery (Factory Widget)