Created
December 6, 2014 16:48
-
-
Save daihuaye/02f2a0449bc13cd717ff to your computer and use it in GitHub Desktop.
jQuery UI Widget Factory Bridge
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*! | |
| * jQuery UI Widget factory "bridge" plugin boilerplate | |
| * Author: @erichynds | |
| * Further changes, additional comments: @addyosmani | |
| * Licensed under the MIT license | |
| */ | |
| // a "widgetName" object constructor | |
| // required: this must accept two arguments, | |
| // options: an object of configuration options | |
| // element: the DOM element the instance was created on | |
| var widgetName = function( options, element ){ | |
| this.name = "myWidgetName"; | |
| this.options = options; | |
| this.element = element; | |
| this._init(); | |
| } | |
| // the "widgetName" prototype | |
| widgetName.prototype = { | |
| // _create will automatically run the first time this | |
| // widget is called | |
| _create: function(){ | |
| // creation code | |
| }, | |
| // required: initialization logic for the plugin goes into _init | |
| // This fires when your instance is first created and when | |
| // attempting to initialize the widget again (by the bridge) | |
| // after it has already been initialized. | |
| _init: function(){ | |
| // init code | |
| }, | |
| // required: objects to be used with the bridge must contain an | |
| // 'option'. Post-initialization, the logic for changing options | |
| // goes here. | |
| option: function( key, value ){ | |
| // optional: get/change options post initialization | |
| // ignore if you don't require them. | |
| // signature: $('#foo').bar({ cool:false }); | |
| if( $.isPlainObject( key ) ){ | |
| this.options = $.extend( true, this.options, key ); | |
| // signature: $('#foo').option('cool'); - getter | |
| } else if ( key && typeof value === "undefined" ){ | |
| return this.options[ key ]; | |
| // signature: $('#foo').bar('option', 'baz', false); | |
| } else { | |
| this.options[ key ] = value; | |
| } | |
| // required: option must return the current instance. | |
| // When re-initializing an instance on elements, option | |
| // is called first and is then chained to the _init method. | |
| return this; | |
| }, | |
| // notice no underscore is used for public methods | |
| publicFunction: function(){ | |
| console.log('public function'); | |
| }, | |
| // underscores are used for private methods | |
| _privateFunction: function(){ | |
| console.log('private function'); | |
| } | |
| }; | |
| // usage: | |
| // connect the widget obj to jQuery's API under the "foo" namespace | |
| // $.widget.bridge("foo", widgetName); | |
| // create an instance of the widget for use | |
| // var instance = $("#elem").foo({ | |
| // baz: true | |
| // }); | |
| // your widget instance exists in the elem's data | |
| // instance.data("foo").element; // => #elem element | |
| // bridge allows you to call public methods... | |
| // instance.foo("publicFunction"); // => "public method" | |
| // bridge prevents calls to internal methods | |
| // instance.foo("_privateFunction"); // => #elem element |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment