Created
August 2, 2013 18:07
-
-
Save adamboduch/6142014 to your computer and use it in GitHub Desktop.
You can do a lot with the jQuery UI widget factory and inheritance. For example, you can extend the capabilities of the menu widget by defining a new widget that inherits everything implemented in menu. You can do other interesting this like making sure each width has consistent access to application data.
This file contains 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
| (function( $, undefined ) { | |
| // This is just a dummy application. A real one would have many more | |
| // properties and methods, but the same concept applies. It isn't aware | |
| // of any widgets that realize its capabilities. | |
| function Application () { | |
| this.minSize = 0; | |
| this.maxSize = 10; | |
| this.idealMinSize = 3; | |
| this.idealMaxSize = 7; | |
| this.go = function( size ) { | |
| // A real application would call an API, or something... | |
| } | |
| } | |
| // The new data we give to every widget. Each widget now has an app attribute | |
| // and every event triggered by a widget has app and widget properties. | |
| var opts = { | |
| app: new Application(), | |
| _trigger: function( type, event, data ) { | |
| var extended = { app: this.app, widget: this }; | |
| if ( data ) { | |
| data = $.extend( data, extended ); | |
| } else { | |
| data = extended; | |
| } | |
| return this._super( type, event, data ); | |
| } | |
| }; | |
| // Give each widget the new data. | |
| $.widget( "ab.accordion", $.ui.accordion, opts ); | |
| $.widget( "ab.autocomplete", $.ui.autocomplete, opts ); | |
| $.widget( "ab.button", $.ui.button, opts ); | |
| $.widget( "ab.dialog", $.ui.dialog, opts ); | |
| $.widget( "ab.menu", $.ui.menu, opts ); | |
| $.widget( "ab.progressbar", $.ui.progressbar, opts ); | |
| $.widget( "ab.slider", $.ui.slider, opts ); | |
| $.widget( "ab.spinner", $.ui.spinner, opts ); | |
| $.widget( "ab.tabs", $.ui.tabs, opts ); | |
| $.widget( "ab.tooltip", $.ui.tooltip, opts ); | |
| })( jQuery ); |
This file contains 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
| body { | |
| font-size: 0.8em; | |
| margin: 5%; | |
| } | |
| #slider { | |
| width: 40%; | |
| } | |
| .size-label { | |
| margin-bottom: 10px; | |
| } | |
| #go { | |
| margin-top: 10px; | |
| } |
This file contains 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
| <html> | |
| <head> | |
| <title>jQuery UI: Widget Inheritance</title> | |
| <link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"> | |
| <link href="jquery.ui.widget.inheritance.css" rel="stylesheet"> | |
| <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script> | |
| <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script> | |
| <script src="jquery.ab.application.js" type="text/javascript"></script> | |
| <script src="jquery.ui.widget.inheritance.js" type="text/javascript"></script> | |
| </head> | |
| <body> | |
| <div class="size-label ui-widget"> | |
| <span>Size:</span><span id="slider-value"></span> | |
| </div> | |
| <div id="slider"></div> | |
| <button id="go">Go</div> | |
| </body> | |
| </html> |
This file contains 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
| $(function() { | |
| $( "#slider" ).slider({ | |
| // Some cached elements the slider interacts with. | |
| button: $( "#go" ), | |
| label: $( "#slider-value" ), | |
| create: function( e, ui ) { | |
| // The app and the widget come from the ui argument. | |
| var app = ui.app, | |
| widget = ui.widget, | |
| button = widget.options.button, | |
| label = widget.options.label; | |
| // Set options based on the application data. | |
| widget.option( { min: app.minSize, max: app.maxSize } ); | |
| label.text( widget.value() ); | |
| // Listen for go buttons clicks, then interact with the | |
| // application. | |
| widget._on( button, { | |
| click: function( e, ui ) { | |
| app.go( widget.value() ); | |
| } | |
| }); | |
| }, | |
| change: function( e, ui ) { | |
| // Setup local variables using the application, the widget, and | |
| // the event data. | |
| var idealMinSize = ui.app.idealMinSize, | |
| idealMaxSize = ui.app.idealMaxSize, | |
| button = ui.widget.options.button, | |
| label = ui.widget.options.label, | |
| value = ui.value; | |
| // Update the label and enable the go button if the size is ideal. | |
| label.text( value ); | |
| if ( value >= idealMinSize && value <= idealMaxSize ) { | |
| button.button( "enable" ); | |
| } else { | |
| button.button( "disable" ); | |
| } | |
| } | |
| }); | |
| $( "#go" ).button( { disabled: true } ); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment