jQuery UI widget template/snippet for TextMate
Post date: Jun 06, 2012 11:15:33 AM
In a recent project I came to write a couple of jQuery UI widgets to build the user interface of a web API. I thus set up a clean jQuery UI widget snippet for my favorite text editor TextMate to easily create widgets.
Note that you can easily modify the source code to create a template instead a of snippet.
To install the new snippet, simply doucle click on the following tmSnippet file:
jQuery UI widget snippet for TextMate
Note:
The scope selector is source.js.jquery provided by the excellent jQuery TextMate bundle (by K. Swedberg and J. Chaffer), but you could prefer source.js ...
Otherwise, here is the code (for some reasons tabulations do not appear bellow, but the snippet file is fully tabulated):
/*
jQuery UI Widget Plugin
Namespace: ${1:namespace}
Widget: ${2:widgetname}
Version: ${3:version}
Create a widget instance via:
\$( "#something" ).$2()
The plugin instance is accessible via:
\$( "#something" ).data("$2")
Widget public methods accessible via:
\$( "#something" ).$2("SomePublicMethod")
\$( "#something" ).data("$2").SomePublicMethod()
Set-up Widget options via:
\$( "#something" ).$2("option","OptionName",OptionValue)
\$( "#something" ).$2("option",{OptionName: OptionValue, OptionName: OptionValue})
Standard Methods:
\$( "#something" ).$2("destroy")
\$( "#something" ).$2("widget")
Creation date: `date +%Y-%m-%d`
Author: ${TM_SHORT_NAME} (${TM_AFFILL})
Contact: ${TM_COORD}
*/
(function( ) {
\$.widget( "$1.$2", {
/* ------------------------------------
WIDGET DEFAULTS OPTIONS
------------------------------------ */
options: {
OptionName: 'OptionValue', // Standard option with a value
// OptionNameCallBack: {function(){}} // Option with a callback function
},
/* ------------------------------------
WIDGET SET UP METHOD
------------------------------------ */
_create: function() {
var self = this,
options = self.options,
titleId = \$.$1.$2.getTitleId(self.element);
// Simple set-up for the widget container:
self.uiContainer = \$('<div></div>')
.appendTo(document.body) // Append the Widget to the Document
// .appendTo(self.element) // Or Append it to the caller element
.hide()
.attr({
role: '$1-$2',
'aria-labelledby': titleId
});
return self;
},
/* ------------------------------------
WIDGET PRIVATE METHODS
Insert your private methods with an underscore
------------------------------------ */
_PrivateMethod: function(){
var self = this,
options = self.options;
// Code here
return self;
},
/* ------------------------------------
WIDGET PUBLIC METHODS
------------------------------------ */
// Insert your public methods here:
SomePublicMethod: function(){
var self = this,
options = self.options;
// Code here
return self;
},
/* ------------------------------------
OPTIONS HANDLERS (PRIVATE METHODS)
------------------------------------ */
// Use the _setOption method to respond to changes to options
_setOption: function( key, value ) {
switch( key ) {
case "OptionName":
// Handle changes to OptionName
break;
}
// In jQuery UI 1.8, you have to manually invoke the _setOption method from the base widget
\$.Widget.prototype._setOption.apply( this, arguments );
// In jQuery UI 1.9 and above, you use the _super method instead
// this._super( "_setOption", key, value );
},
_setOptions: function( options ) {
var self = this;
\$.each( options, function( key, value ) {
self._setOptiosn( key, value );
});
},
/* ------------------------------------
WIDGET REQUIRED PUBLIC METHODS
------------------------------------ */
// Use the destroy method to clean up any modifications your widget has made to the DOM
destroy: function() {
// In jQuery UI 1.8, you must invoke the destroy method from the base widget
\$.Widget.prototype.destroy.call( this );
// In jQuery UI 1.9 and above, you would define _destroy instead of destroy and not call the base method
},
// Return the widget object:
widget: function() {
// Method to gain access to the widget created container:
return this.uiContainer;
}
});
/* ------------------------------------
WIDGET VERSION
------------------------------------ */
\$.extend(\$.$1.$2, {
version: "$3",
uuid: 0,
getTitleId: function(\$el) {
var id = \$el.attr('id');
if (!id) {
this.uuid += 1;
id = this.uuid;
}
return 'data-$2-id-' + id;
},
});
}( jQuery ) );