• timepickr
• widget tutorial
• extending widgets
• flexcal
• googlesearch and ajaxpopup
• textpopup and hebrewkeyboard

And on top of that, chili stopped working with jQuery 1.4 and I haven't fixed it yet. Andrea Ercolino was nice enough to send me an updated version, but I haven't gotten around to installing it yet.

Update: got chili to work!

So much for using my spare time to learn Scheme!

I like Maxime Haineault's timepickr. But I found it was written for jQuery 1.2, and didn't trigger events correctly with the current jQuery. It also had more dependencies than I wanted, to the extent that the minified version is 49k large, and had some CSS quirks in Internet Explorer that I couldn't figure out without dissecting the whole thing. So I dissected it and rebuilt it smaller, updated for jQuery 1.3. I didn't put back a lot of the options that I didn't need, so it's not exactly an improvement. But it works for me.

Download the code.

I also added the ability to use hoverIntent so you can roll the mouse over the intervening buttons without triggering them:

Examples

$('.timepickr-example:eq(0)').timepickr();

<input class="timepickr-example" />

$('.timepickr-example:eq(1)').timepickr({
  convention: 24,
  format: '{h}{m} hours',
  hoverIntent: true
});

<input class="timepickr-example" />

$('.timepickr-example:eq(2)').timepickr({
  trigger: 'nothing',
  handle: $('#clock')
});

<input class="timepickr-example" /> <img id="clock" src="/images/clock.png" />

$('.timepickr-example:eq(3)').timepickr({
  select: function(){
    alert('Time is '+this.value);
  }
});

<input class="timepickr-example" />

Options

top {Number}
Pixel offset of the top left button. Default: 6.
left {Number}
Pixel offset of the top left button. Default: 0.
animSpeed {Number|slow|normal|fast}
Speed to animate showing/hiding the buttons. Default: 0.
trigger {String}
Event to trigger showing the buttons. Default: 'click'.
convention {12|24}
Whether to use a 12-hour or 24-hour clock. Default:  12.
format {String}
String that determines how to display the time. Uses simple formatting: '{h}' is replaced by the hour;
'{m}' is replaced by the minutes; '{suffix}' is replaced by the suffix (used in the 12-hour clock); '{prefix}' is
replaced by the prefix (used in the 24-hour clock). Default: '{h}:{m} {suffix}'
handle {false|String|jQuery object}
Other element that will trigger showing the buttons when clicked. If handle is not false, then
$(handle).click() shows the buttons. Default: false.
prefix {Array(String)}
Strings to use as labels for the 24-hour clock. Displaying all 24 hours is too long to be usable, so we
split them into two halves. Default: ['00-11', '12-23'].
suffix {Array(String)}
Strings to use as AM/PM labels for the 12-hour clock. Default: ['am', 'pm'].
rangeMin {Array(String)}
Values to use for the minutes list. Default: ['00', '15', '30', '45'].
resetOnBlur {Boolean}
True to reset the element to its original value if nothing is clicked; false to keep the value generated
by the mouseover even if not clicked. Default: true.
val {false|String}
If not false, value to assign to the element when the buttons are shown. Default: false.
hoverIntent {Boolean}
True to use the hoverIntent plugin if available. Note that timepickr does not provide any way to
adjust the hoverIntent paramenters. Default: false.
select {undefined|function}
Callback function, called when the time buttons are clicked. Also available as an event
'timepickrselect'

So let's say I want to create elements that match a jQuery UI theme (in my case, I was using a <canvas> element and wanted to copy colors). I could try to parse the CSS file directly, but that runs afoul of the same-origin security problem (I use Google's CDN to get the jQuery UI stylesheets, as in http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/smoothness/jquery-ui.css). I could go through the document stylesheets to find the relevant styles, but there's an easier way; just create an element with the desired classes and query that:

var background = $('<div class="ui-state-default">').css('background-color');

But there's a problem if I'm using Themeswitcher.

<div id="result" style="background: #888; height: 2em;"></div>
<div id="themeswitcher"></div>

function showcolor(){
  var background = $('<div id="tester" class="ui-state-default">').appendTo('body').css('background-color');
  $('#result').text(background).css('color', background);
  $('#tester').remove();
}
$('#themeswitcher').themeswitcher({
  onSelect: showcolor
});

If you play with this, you notice that there's a race condition going on. Themeswitcher adds a <link rel="stylesheet"> element and the new stylesheet is loaded asynchronously. Meanwhile, the onSelect callback is called and the style of the test element is grabbed. But, depending on whether the new stylesheet is in the cache and how fast your internet connection is, the new stylesheet may not be loaded. So the color from the old stylesheet is returned.

Doing It Right (and Failing)

Figuring out what to do is easy. The theme switcher adds stylesheets with class "ui-theme", so the newest stylesheet is always $('link.ui-theme:last'). So all we need to do is tell when that <link> is loaded.

That problem is not easy. One solution is to check whether the stylesheet object associated with the link exists, with $('link.ui-theme:last')[0].sheet.cssRules (see this discussion). But stylesheet objects are subject to the same-origin security rule, so this fails with outside stylesheets.

It is claimed that the onLoad event is fired when stylesheets are loaded, but doesn't work in Firefox or Webkit, which rules out all the browsers I care about.

Trust me, I tried this for a long while and did a lot of searching. There's no way to tell that a stylesheet has been loaded. I could create a loop that polled for changes in the test <div> but that's ugly, inefficient and assumes that the new style always uses a different color.

Hoist the Jolly Roger

If at first you don't succeed, hack it. There's a different element that does let us know when it's been loaded: images. <img src="foo" onerror="func()" /> will try to load the file "foo" and, if that fails, will call func. But there's one catch, a bug? security feature? in Webkit: it will not call the onerror function if the file is in the cache already. It doesn't call onload; it just doesn't do anything. So we test first to see if the onerror trick works, and if it doesn't, we add a random parameter to make sure the file reloads. It means that we don't take advantage of caching the CSS file in Webkit browsers, but the code works:

  <input type="button" value="Better onSelect" id="betteronselect" />

var noCache = function() {return '?'+Math.random()};
var href = $('link.ui-theme:last').attr('href');
$('<img />').attr('src', href).error(function() {
  $.noCache = function() {return '' };
  $(this).remove();
}).appendTo('body');
$('#betteronselect').click(function(){
  $('#themeswitcher').empty().themeswitcher({
     onSelect: function(){
        var href = $('link.ui-theme:last').attr('href')+noCache();
        $('<img />').attr('src', href).error(function() {
          showcolor();
          $(this).remove();
        }).appendTo('body');
    }
  });
});

Of course, my analysis may be wrong and the reason that this works is that it delays the showcolor long enough to lose the race. I don't think so, but it will take some experimenting to make sure.

Unfortunately, control-page up/down if used by Firefox to change its tabs and I can't override that, so I use alt-page up/down to skip years. Alt-left/right arrow changes calendars.

Unfortunately, the tabbing in and out doesn't work in Chrome; after tabbing out when the focus returns to the input element it won't leave. I'm not sure what the problem is. And it uses tabindex=0 which isn't supported by Safari at all. I think I will leave it as is and wait for the browsers to catch up to me.

Slot Machine Transition

Cycle Transitions

OK, one more flexcal transition, inspired by Stefan Petre's jQuery slot machine. I should have been balancing my checkbook, but my kids thought this was cooler.

$('#slots').flexcal({
	transition: function(o){ 
		var pane = o.elements.eq(1-o.currSlide), origTable = pane.find('table');
		o.elements.eq(o.currSlide).css({zIndex: 1}).animate({top: -o.$cont.height()}, 'normal', 'easeInBack');
		pane.css({top: o.$cont.height(), zIndex: 2}).show().animate({top: 0}, 'normal', 'easeInBack', function(){
			// make two identical tables without headers and position them correctly (lined up with the bottom)
			var spinners = tableSpinners (origTable, o.gif);
			var tables = origTable.clone().add(origTable.clone()).appendTo(pane).
				find('caption').remove().end().
				css({bottom: 0 , marginBottom: 0, zIndex: 101}).hide();
			function dropOne(){
				if (spinners.length == 0){
					tables.remove();
					return;
				}
				var spinner = spinners.eq(Math.floor(Math.random()*spinners.length));
				var h = spinner.height();
				var left = spinner.offset().left - origTable.offset().left;
				var right = left + spinner.width();
				spinners = spinners.not(spinner.remove());
				origTable.animate({foo: 0}, { // the {foo:0} seems necessary because we need to animate some property, even if it isn't real
					duration: o.duration,
					easing: 'easeOutElastic',
					step: function(now, fx){
						if (fx.state == 0){
							tables.show();
							fx.start = now = 0; 
							fx.end = 3*h; 
						}
						tables.eq(0).css(offsetColumn(right, left, h, now));
						tables.eq(1).css(offsetColumn(right, left, h, now-h));
					},
					complete: dropOne
				});
			}
			setTimeout (dropOne, o.duration);
		})
	}, 
	position: 'tl',
	speed: 0,
	hideOnOutsideClick: false,
	transitionOptions: {
		duration: 1500,
		gif: '/images/ani-bw.gif'
	}
});
$('#slots').flexcal('around', 'commit', function(d){
	this.d = d;
	this.box().find('td a').removeClass('ui-state-active');
	this.box().find('td a[rel='+$.ui.flexcal.date2string(d)+']').addClass('ui-state-active');
	this.element.val(this.format(d));
	this._trigger('commit', 0, d);
}).flexcal('box').css({position: 'static', 'float': 'left'}).parent().css({position: 'static'}).after('<div style="clear: both"/>');
$('#slots').flexcal('show');

function tableSpinners(t, gif){
	var topRow = t.find('tr:first td, tr:first th'), botRow = t.find('tr:last td'), ret = [];
	for(var i = 0; i < topRow.length; ++i){
		var topCell = topRow.eq(i), botCell = botRow.eq(i);
		ret.push($('<img>').appendTo('body').css(topCell.offset()).
			css({
				paddingTop: '2px',
				paddingBottom: '2px',
				position: 'absolute', 
				width: botCell.outerWidth(true), 
				// hack to avoid Firefox table height bug
				height: t.find('tbody').height()+t.find('thead').height(),
				zIndex: 101
			}).
			attr('src', gif)[0]);
	}
	return $(ret);
}

// create a css object with bottom = b and clip set to rect(0 r h l) pixels, with
// the top and bottom of that rect offset by b so the clip rect is fixed on the screen
// and offsetting b if it is out of the range -h..h
function offsetColumn (r, l, h, b){
	b = b%(2*h)-h; // move b into range
	return {bottom: b, clip: ['rect(',b,'px ',r,'px ',b+h,'px ',l,'px)'].join('')};
}

The code also shows how to make the datepicker "inline".

The alert reader will notice that the parameters for the transition animation for my flexcal widget are the same as that used by Mike Alsup's cycle plugin. My hope was that I could use { transition: $.fn.cycle.next } and be able to use all those cool effects. It turned out to be not so simple; I couldn't jump into the middle of his code and have things work. But I could create a function that set things up correctly and called his transition code:

// largely copied from the $.fn.cycle code
function cycle(opts) {
	var curr = opts.elements.eq(opts.currSlide), next = opts.elements.eq(1-opts.currSlide), fwd = !(opts.rev ^ opts.l10n.isRTL);
	opts.lastSlide = opts.currSlide; // shuffle needs to know this
	opts.slideCount = 2;
	opts.cssAfter = { left: 0, top: 0 , opacity: 1};
	opts.cssBefore = opts.animIn = opts.animOut = {};
	opts.speedIn = opts.speedIn || opts.speed,
	opts.speedOut = opts.speedOut || opts.speed,
	opts.easeIn = opts.easeIn || opts.easing,
	opts.easeOut = opts.easeOut || opts.easing;
	$.fn.cycleW = opts.$cont.width(); $.fn.cycleH = opts.$cont.height(); // hack to fool the cycle transitions
	$.fn.cycle.transitions[opts.fx](opts.$cont, opts.elements, opts); // set up the transition. fx must be a valid transition name
	$.each(opts.before, function(i,o) {
		o.apply(next, [curr, next, opts, fwd]);
	});
  // stage the after callacks
	var after = function() {
		$.each(opts.after, function(i,o) {
			o.apply(next, [curr, next, opts, fwd]);
		});
	};

	if (opts.fxFn){ // fx function provided?
		opts.fxFn(curr, next, opts, after, fwd);
	}else{
		next.css(opts.cssBefore);
		var fn = function() {
			next.animate(opts.animIn, opts.speedIn, opts.easeIn, after)
		};
		curr.animate(opts.animOut, opts.speedOut, opts.easeOut, function() {
			curr.css(opts.cssAfter);
			if (!opts.sync) fn();
		});
		if (opts.sync) fn();
	}
};

Now I can use any of the transitions and easing functions (with some attention paid to the options, since we don't start with the correct defaults):

	<span>Cycle transitions and easing: </span><input id="flexcalcycle"/>

var opts = {
	position: 'bl',
	transition: cycle,
	transitionOptions: {fx: 'fade', sync: true, speed: 1000}
};
$('#flexcalcycle').flexcal(opts);

var easingSelect = $('<select>').insertAfter('#flexcalcycle').bind('change', function(){
	opts.transitionOptions.easing = $(this).val();
	$('#flexcalcycle').flexcal('destroy').flexcal(opts).flexcal('show');	
});
for (var e in $.easing){
	easingSelect.append($('<option>').text(e));
};
var fxSelect = $('<select>').insertAfter('#flexcalcycle').bind('change', function(){
	opts.transitionOptions.fx = $(this).val();
	$('#flexcalcycle').flexcal('destroy').flexcal(opts).flexcal('show');	
});
for (var t in $.fn.cycle.transitions){
	fxSelect.append($('<option>').text(t));
};

This is inelegant, and makes my subclassing code less useful, since the getter list cannot be extended easily, only copied or replaced.

This is due to be improved in jQuery 1.7.2 (or at least it's in the latest nightlies): any method that returns this is a "regular" method that, when used as a plugin, should be chainable. Any method that returns anything else is a "getter" that returns that value when used as a plugin.

Thus, in the widget tutorial, we no longer need the line $.ui.green4.getter = "getLevel"; and getLevel remains unchanged, but setLevel needs to be changed to:

    setLevel: function (x) {
        var greenlevels = this._getData('greenlevels'); 
        var level = Math.floor(Math.min(greenlevels.length-1, Math.max(0,x))); 
        this._setData('level', level); 
        this.element.css({background: greenlevels[level]}); 
        return this; // note new return value
    }, 

I think this will be an improvement, even if it means rewriting all my widgets. I would rather have used a return value of "undefined" as the flag for a chainable method, since that would not require rewriting regular methods, and getters that intentionally return undefined should be few and far between. But no one asked me.

Just what the world needs—another date picker

Download the code.

The current incarnation of the jQuery UI datepicker works fine, but I needed something that could handle the Jewish calendar. This is not the same as localizing datepicker to use Hebrew;that just translates the month and day names but uses the same Gregorian calendar as everyone uses. I needed a calendar that could switch between multiple, completely different calendar systems.

The algorithms for converting dates from Jewish to Gregorian are readily available open-source, so that was easy. textpopup is exactly what I need to create the pop-up box for the calendar, and I had already created my own date picker for my old bililite site (don't look at it too closely; it's ugly and I used an old version of Prototype. I was still learning! It works, though). So the pieces were all there.

And so was born flexcal. In its simplest form, it looks like datepicker:

<span>Using <code>datepicker</code>: </span><input id="date1"/>
<br/>
<span>Using <code>flexcal</code>: </span><input id="date2"/>

$('#date1').datepicker();$('#date2').flexcal();

But it can show multiple calendars and allows localization to different calendar systems:

<span>Jewish/civil calendar: </span><input id="date3"/>

$('#date3').flexcal({
  position: 'bl',
  calendars: ['en', 'jewish', 'he-jewish'],
  'class': 'multicalendar'
});

And it allows animated transitions (which I think is in the works for datepicker as well):

<span>Fading transition: </span><input id="date3-1"/>

$('#date3-1').flexcal({
  position: 'bl',
  transition: function(o){
    o.elements.eq(o.currSlide).fadeOut(o.duration);
    o.elements.eq(1-o.currSlide).fadeIn(o.duration);
  },
  transitionOptions: {duration: 'slow'}	
});

Options

It's a subclass of textpopup, so all the options from textpopup and ajaxpopup are available. The url defaults to /inc/flexcal.html, which contains:

Note that all the required CSS is included in the html file, and that it uses the themeable jQuery classes. Setting the 'class' option to multicalendar makes the date rectangles longer, giving more room for the tab bar.

The flexcal options themselves are:

The localization (l10n for short) object is the key to the whole thing. $.flexcal.l10n contains objects, each of which is a localization object with the following fields (named to match the corresponding fields in $.datepicker.regional):

// default l10n calendar
$.ui.flexcal.prototype.options = {
	name: 'flexcal',
	calendar: function(d){
		var m = d.getMonth(), y = d.getFullYear(), date = d.getDate(), first = new Date (y, m, 1);
		var prev = new Date (y, m-1, date), next = new Date (y, m+1, date);
		if (prev.getDate() != date) prev = new Date (y, m, 0); // adjust for too-short months
		if (next.getDate() != date) next = new Date (y, m+2, 0);
		return {
			first: first,
			last: new Date (y, m+1, 0),
			prev: prev,
			next: next,
			m: m,
			y: y,
			dow: first.getDay()
		};
	},
	monthNames: ['January','February','March','April','May','June',
		'July','August','September','October','November','December'],
	dayNamesMin: ['Su','Mo','Tu','We','Th','Fr','Sa'],
	isRTL: false,
	prevText: 'Previous',
	nextText: 'Next',
	years: function(n) {return n},
	days: function(n) {return n}
};

The plugin comes with three localizations defined (the ones I wanted): $.ui.flexcal.l10n.en (English-language civil calendar), $.ui.flexcal.l10n.jewish (Jewish calendar with English names) and $.ui.flexcal.l10n['jewish-he'] (Jewish calendar with Hebrew names), and two calendar-generating functions: $.ui.flexcal.calendars.gregorian and $.ui.flexcal.calendars.jewish.

The options object that is passed to the transition function was designed to allow drop-in use of Mike Alsup's excellent cycle plugin, with $(selector).flexcal({transition: $.fn.cycle.next}), though I haven't tested this yet.

Examples

French/English calendar. We grab the French localization from the datepicker svn.

<input id="date4"/>

$.getScript('http://dev.jqueryui.com/export/2435/trunk/ui/i18n/ui.datepicker-fr.js', function(){
  $.datepicker.setDefaults($.datepicker.regional['']);
  $.ui.flexcal.l10n.fr = $.datepicker.regional.fr;
  $('#date4').flexcal({
    position: 'rt',
    calendars: ['fr', 'en'],
    calendarNames: ['Français', 'Anglais']
  });
});

The French Revolutionary calendar. This is just to show off how flexible the widget is; 10-day weeks and 5-day months are no problem. View source to see the calendar algorithms.

<input id="date5"/>

$('#date5').flexcal({
  position: 'rt',
  calendars: ['en', 'jacobin']
});

flexcal with fancier transitions and using my scrollIntoView plugin (put the input box at the bottom of the window to see the scrolling effect)

<input id="date6"/>

$('#date6').flexcal({
	position: 'bl',
	calendars: ['en', 'jewish'],
	transition: function(o){
		var dir = o.rev ^ o.l10n.isRTL;
		var first = o.elements.eq(o.currSlide), second = o.elements.eq(1-o.currSlide);
		var h = o.$cont.height(), w = o.$cont.width();
		first.css({zIndex: 1});
		second.css({zIndex: 0}).show();
		first.animate({foo: 0}, { // the {foo:0} seems necessary because we need to animate some property, even if it isn't real
			duration: o.speed,
			step: function(now, fx){
				if (fx.state == 0){
					fx.start = now = dir ? 0 : w;
					fx.end = dir ? w : 0;
				}
				if (dir){
					first.css('clip', 'rect(0px '+w+'px '+h+'px '+now+'px)');
					second.css('clip', 'rect(0px '+now+'px '+h+'px 0px)');
				}else{
					first.css('clip', 'rect(0px '+now+'px '+h+'px 0px)');
					second.css('clip', 'rect(0px '+w+'px '+h+'px '+now+'px)');
				}
			},
			complete: function() {
				// clip is so inconsistently implemented. This way works in FF3, Opera 9, Safari 3,  IE7
				first.hide().css('clip', 'rect(auto)');
				second.css('clip', 'rect(auto)');
			}
		});
	},
	transitionOptions: {speed: 'slow'},
	shown: function() {$(this).flexcal('box').scrollIntoView()}
});

Using draggable. The option cancel: '.ui-state-default' makes sure that clickable elements aren't used as drag handles. Some position values require you have to do some CSS adjusting to keep the size from changing (draggable sets left and top; textpopup may set right and bottom). A real draggable calendar probably should have the cursor change on hover also.

<input id="date7"/>

<input id="date8"/>

$('#date7').flexcal({
  position: 'rt',
  calendars: ['en', 'fr'],
  calendarNames: ['', 'French']
}).flexcal('box').draggable({cancel: '.ui-state-default', cursor: 'move'});

$('#date8').flexcal({
  position: 'lt',
  calendars: ['en', 'fr'],
  calendarNames: ['', 'French']
}).flexcal('box').draggable({
  cancel: '.ui-state-default',
  cursor: 'move',
  start: function(){
    $(this).css({right: 'auto', bottom: 'auto'});
  }
});

Differences from datepicker

I intentionally gave this widget fewer options than datepicker; I just included what I thought I would need. Since it uses my subclass-able widget framework, it can easily be extended to be more capable. One thing that is still definitely lacking is keyboard accessibility; I don't know anything about that and have to start experimenting. To be added in some later version, for sure.

The power of Extending Widgets

Some examples of extending flexcal to be more datepicker-like.

Date formatting

The format for the date that is inserted into the text box is very simple; mm/dd/yyyy. You can subclass flexcal to use datepicker's formatting (as with any subclassing, you should look at the source code to figure out what the code is doing):

<input id="date9"/>

<input id="date10"/>

$.ui.flexcal.subclass('ui.fancyflexcal', {
  format: function(d){
    return $.datepicker.formatDate (this.options.dateFormat, d, $.datepicker.regional['']);
  },
  options: {
    dateFormat: $.datepicker.W3C
  }
});

$('#date9').fancyflexcal();
$('#date10').fancyflexcal({dateFormat: 'D, M d, yy'});

Filtering dates

Filtering dates can be added similarly, or, even better, with aspect-oriented programming:

<input id="date11"/>

// allow weekdays only
$('#date11').flexcal().flexcal('after', '_adjustHTML', function (cal){
  cal.find('a.commit').filter(function(){
    var dow = (new Date(this.rel)).getDay();
    return (dow == 0 || dow == 6);
  }).removeClass('commit')['ui-unclickable']().addClass('ui-state-disabled');
});

Drop-down menus

Creating drop-down menus is a bit more complicated, because we can't assume that all the month names in the monthNames array are present in every year, and the definition of the localization calendar routine does not provide with us with a way to get the alternate calendar date for a given Date. The following routines help:

function option(d, l10n, cal, isMonth, selected){
  return [
    '<option',
    selected ? ' selected="selected"' : '',
    ' value="', $.ui.flexcal.date2string(d), '">',
    isMonth ? l10n.monthNames[cal.m] : l10n.years(cal.y), 
    '</option>'
  ].join('');
}
window.monthSelect = function(currentdate, l10n){
  var f = l10n.calendar;
  var currentcal = f(currentdate), ret = [option(currentdate, l10n, currentcal , true, true)], d = currentdate;
  for (var cal = currentcal; d = cal.prev, cal = f(d), cal.y == currentcal.y; ){
    ret.unshift(option(d, l10n, cal, true, false));
  }
  for (cal = currentcal; d = cal.next, cal = f(d), cal.y == currentcal.y; ){
    ret.push(option(d, l10n, cal, true, false));
  }
  return $('<select>').html(ret.join(''));
};
window.yearSelect = function(currentdate, l10n, n){
  var f = l10n.calendar;
  var currentcal = f(currentdate), ret = [option(currentdate, l10n, currentcal , false, true)], d = currentdate;
  for (var i = 0, cal = currentcal; d = cal.prevYear, cal = f(d), i < n; ++i){
    ret.unshift(option(d, l10n, cal, false, false));
  }
  for (var i = 0, cal = currentcal; d = cal.nextYear, cal = f(d), i < n; ++i){
    ret.push(option(d, l10n, cal, false, false));
  }
  return $('<select>').html(ret.join(''));
};

<input id="date12"/>

$('#date12').flexcal({'class': 'multicalendar', calendars: ['en','he-jewish']}).flexcal('after', '_adjustHTML', function (cal){
  cal.find('.ui-datepicker-month').html(monthSelect(this.d, this.o.l10n));
  cal.find('.ui-datepicker-year').html(yearSelect(this.d, this.o.l10n, 5));
  var self = this;
  cal.find('select').bind('change', function(){self.setDate($(this).val())});
});

Download the code.

Download the textpopup code and the widget subclassing code.

$.ui.googleSearch

So if you have a simple Google search for your site:

<form method="get" action="http://www.google.com/search" >
	<input name="q" type="text"/>
	<input type="submit" value="Search with Google"/>
	<input name="sitesearch" value="http://bililite.com/blog" type="hidden"/>
</form>

You can use the Google AJAX Search API to make it AJAX-y:

<!-- Make sure to include the Google code and use your own Google API key here -->
<script src="http://www.xgoogle.com/jsapi?key=ABQIAAAA-9ImZ-drhltmN0pO3seqMBRffDClpIMT8zovbMirRiSUKbarGBR2yyqzhOxfMfoD2YyJmOkXgk65qw"></script>

<form method="get" action="http://www.google.com/search" >
	<input name="q" type="text" id="searchexample" />
	<input type="submit" value="Search with Google"/>
	<input name="sitesearch" value="http://bililite.com/blog" type="hidden"/>
</form>

<!-- and make sure to style the result (otherwise it's transparent and impossible to read)-->
<style>
.searchresults {
  background: white;
  padding: 5px;
  border: 2px outset black;
  width: 500px;
}
</style>

// load the search code
google.load("search","1");

// create the search widget
$('#searchexample').googleSearch();

It has one option of its own, contents, which is shown in the results while the search is running. It can be anything accepted by $.fn.html. The default is $([]).

It can use all the options from textpopup (it defaults the trigger option to null since you only want to see the search results when the form is submitted), plus the url option from ajaxpopup below; the default is '/inc/search.html' which in this demo contains the following:

<div class="searchresults">
	<h3>Search Results</h3>
	<div class="resultsdiv"></div>
	<a class="moreresults">More Results &raquo;</a>
</div>

The file pointed to by url must have a <div class="resultsdiv"> for the results to be put and a <a class="moreresults"> for the link to the full Google search.

$.ui.ajaxpopup

Both the googleSearch above and the hebrewKeyboard widget use the same strategy for building the popup box: instead of creating a string on the fly (like

$('<div class="searchresults"><h3>Search Results</h3><div class="resultsdiv"></div><a class="moreresults">More Results &raquo;</a></div>').appendTo(box);

I abstracted that into its own widget, ajaxpopup that has one option, url that is the URL of the HTML to be loaded into the popup box. The default value is undefined.

The retrieved HTML is cached, so the AJAX is only called once. Any <style> elements are pulled out and appended to the <head> and the remainder is put in the popup box.

It includes a hack to use data: URL's, even in Internet Explorer, so you can include the HTML inline.

For example, if the file /blog/blogfiles/ajaxpopupexample.html is:

Then you can do:

<input id="ajaxpopup-demo-1"/>

$('#ajaxpopup-demo-1').ajaxpopup({url: "/blog/blogfiles/ajaxpopupexample.html"});

And you can do:

<input id="ajaxpopup-demo-2"/>

$('#ajaxpopup-demo-2').ajaxpopup({url: 'data:,<span style="background:white">Hello, world</span>'});