Archive for October, 2011

JQuery UI Widget Boilerplate

I’m always writing this stuff out again and again so I thought I’d save the most useful stuff for copying and pasting.

The widget

$.widget("ui.aWidgetName", {
    options: {
        requiredOptionOne: null,
        requiredOptionTwo: null,
		optionalOptionOne: null,
        $thisElement: null
    _init: function () {
        var self = this,
            $thisElement = $(self.element); //NOTE: Useful for refining JQuery selectors ie. $(".something", $thisElement)

        if (!!self.options.optionOne && !!self.options.optionTwo) {
            //NOTE: do widgety stuff, but only if required options have been set
        } else {

Accessing an option after init

//NOTE: get
$(".widgetElementSelector").aWidgetName("options", "optionalOptionOne") //NOTE: note the 's' on 'options'
//NOTE: set
$(".widgetElementSelector").aWidgetName("options", "optionalOptionOne", "aValue") 

Custom callbacks

//NOTE: a point where you want to trigger event

//NOTE: when creating a widget
	anEventName: function (event) {
		//NOTE: stuff to do when the event happens

//NOTE: binding after widget init
//NOTE: the concatinated widget/event name is converted to lower case
$(":data(aWidgetName)").bind("awidgetnameaneventname", function () { 
    $(".marketing-video-container object").css({ "width": "0", "height": "0" });

UiDev mode

Nice way to include JavaScript or CSS only for testing or debug purposes. This uses Combres, but you could just use a standard

@Html.Raw(ConfigurationManager.AppSettings["UiDevCodeEnabled"] == "true" ? Url.CombresLink("debugJs") : "")