Первый пришедший в голову вариант был прост как двери

$("#dialog1","#dialog2","#dialog3","#dialog4","#dialog5").dialog("close");

но если хотя бы один диалог не был создан при старте страницы то вылетит Exception. Естественно создавать диалоги при старте бессмысленно. ни один может не понадобиться а ресурсов они отъедают нормально. Второй вариант был таким

for (var i=1,j=5;i<j;i++){
	try{
		$("#dialog"+i).dialog("close");
	}catch(e){
		// do nothing
	}
}

и несколько дней эта конструкция муляла мне глаза. Наконец я переписал это примерно так

for (var i=1,j=5,d;i<j;i++){
	d = $("#dialog"+i);
	if(d.data("dialog")){
		d.dialog("close");
	}
}

стало лучше но еще не совершенно, последним вариантом стало

$("div:data(dialog)").dialog("close");

теперь я доволен, а какие еще есть варианты?

Как обычно примера из официального мануала мне не достаточно поэтому начал хачить. Собственно то что мне надо было находиться в низу страницы, а как я его делал я расскажу сейчас.

Основная идея примера из мануала: чтобы на одной и той же разметке можно было сделать табики и сверху и снизу. Это очень хорошая идея но мне явно не подходила. Вкратце табики выглядят так: общий контейнер, в нем сверху UL с закладками, снизу - DIV с контентом. Это верно как для разметки так и для отображения. Для табиков снизу разметка та же, но табики имеют position:absolute и bottom:0 . Казалось бы все должно работать, НО есть одно НО, и это не IE! Это как не странно WebKit. Все размерности в JQuery UI указаны в EM, что бы все одинаково хорошо смотрелось с любым размером текста, так вот при переходе из EM (да в общем и из остальных относительных величин) в PX, WebKit округляет числа в большую сторону, тогда как все остальные в меньшую, или подгоняют. Об этом еще Resig писал в далеком 2008 году. При таком подходе прижатые к низу табики налазят на текст на 1-2PX. Это совершенно не волнует пример в мануале, потому что текст там не имеет бордера и заранее короче на несколько пикселей, так что между ним и прижатыми табами есть зазор. Ради красоты пришлось пожертвовать первоначальной разметкой, перенеся табики под текст. Хотя по моему вообще это не принципиально, потому что я сделал это скриптом, да и вернуть их тоже не проблема.

Вторая проблема это !important. ежупанятна что универсальность в таком большом CSS framework требует перекрывать что-то, что было написано позже, тем что было написано раньше. Тут кроется проблема всего framework. Я свято уверен что классы типа ui-state-[default|hover|active] не должны определять толщину и тип бордера, а только цвет, потому что потом надо городить огороды. В своем маленьком примере я это поправил.

Ну и последние, надо открывать таб по урлу. Как бы самое обычное дело, но предусмотрено в документации только через куки, а если руками указывать то надо знать индекс таба а не скажем его ID. С этой маленькой гадкой проблемой я тоже очень элегантно справился двумя строками кода.

KISS

Поскольку офицальный пример - гавно, делать все надо самим.

Сначала немного подхачим jQuery UI, вот таким образом

(function(){
	var old_selectDate = $.datepicker.constructor.prototype._selectDate; // forget about this
	
	/* Update the input field with the selected date. */
	$.datepicker.constructor.prototype._selectDate = function(id, dateStr) {
		var target = $(id);
		var inst = this._getInst(target[0]);
		dateStr = (dateStr != null ? dateStr : this._formatDate(inst));
		
		var onSelect = this._get(inst, 'onSelect');
		if (onSelect && false === onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst])){
			return;
		}
		
		if (inst.input){
			inst.input.val(dateStr);
			inst.input.trigger('change'); // fire the change event
		}
		this._updateAlternate(inst);
		
		if (inst.inline)
			this._updateDatepicker(inst);
		else {
			this._hideDatepicker();
			this._lastInput = inst.input[0];
			if (typeof(inst.input[0]) != 'object')
				inst.input.focus(); // restore focus
			this._lastInput = null;
		}
	}

})();

Как видете я добавил небольшую проверку на возврат коллбэка onSelect, теперь если он возвращает false то значение инпуту не присваиваеться. Это не должно мешать обычной работе календаря.

Дальше конфигурируем сам календарь, значение настроек смотрите в мануале

jQuery(document).ready(function($){

	var click = 1, from = new Date, to = new Date;
	$("[name=from], [name=to]").datepicker({
		numberOfMonths: 2,
		minDate : new Date("12/01/2010"),
		maxDate : new Date("01/31/2011"),
		dateFormat: "dd/mm/yy",
		showButtonPanel: true,
		closeText : "Применить",
		onSelect: function( selectedDate ) {
			var format = $(this).data("datepicker").settings.dateFormat || $.datepicker._defaults.dateFormat,
				date = $.datepicker.parseDate(format, selectedDate);
			if (click++%2){
				from = date;
				to = date;
			} else {
				if (date < from){
					from = date;
				} else {
					to = date;
				}
			}
			$(this).datepicker("refresh");
			return false;
		},
		beforeShowDay : function(date){
			if (date >= from && date <= to){
				return [true, "ui-state-highlight"];
			}

			return [true, ""];
		},
		beforeShow : function(input, inst){
			var format = inst.settings.dateFormat || $.datepicker._defaults.dateFormat
			from = $.datepicker.parseDate(format, $("[name=from]").val());
			to = $.datepicker.parseDate(format, $("[name=to]").val());
		},
		onClose: function(dateText, inst) {
			if (inst.dpDiv.find(".ui-datepicker-close").is(".ui-state-hover")){
				var format = inst.settings.dateFormat || $.datepicker._defaults.dateFormat
				$('[name=from]').val($.datepicker.formatDate(format, from));
				$('[name=to]').val($.datepicker.formatDate(format, to));
			}
		}
	});
		
});

А вот и пример

Вот такой небольшой код добавляет новую кнопку в заголовок диалога. При первом нажатии на кнопку диалог разворачивается, при втором - сворачивается до первоначального размера. Ручной ресайз на кнопку никак не влияет.

.ui-dialog .ui-dialog-titlebar-full {
	position: absolute;
	right: 2em;
	top: 50%;
	width: 19px;
	margin: -10px 0 0 0;
	padding: 1px;
	height: 18px;
}

.ui-dialog .ui-dialog-titlebar-full span {
	display: block;
	margin: 1px;
}

.ui-dialog .ui-dialog-titlebar-full:hover,
.ui-dialog .ui-dialog-titlebar-full:focus {
	padding: 0;
}

(function(){
	var old = $.ui.dialog.prototype._create;
	$.ui.dialog.prototype._create = function(d){
		old.call(this, d);
		var self = this,
			options = self.options,
			oldHeight = options.height,
			oldWidth = options.width,
			uiDialogTitlebarFull = $('<a href="#"></a>')
				.addClass(
					'ui-dialog-titlebar-full ' +
					'ui-corner-all'
				)
				.attr('role', 'button')
				.hover(
					function() {
						uiDialogTitlebarFull.addClass('ui-state-hover');
					},
					function() {
						uiDialogTitlebarFull.removeClass('ui-state-hover');
					}
				)
				.toggle(
					function() {
						self._setOptions({
							height : window.innerHeight - 10,
							width : window.innerWidth - 30
						});
						self._position('center');
						return false;
					},
					function() {
						self._setOptions({
							height : oldHeight,
							width : oldWidth
						});
						self._position('center');
						return false;
					}
				)
				.focus(function() {
					uiDialogTitlebarFull.addClass('ui-state-focus');
				})
				.blur(function() {
					uiDialogTitlebarFull.removeClass('ui-state-focus');
				})
				.appendTo(self.uiDialogTitlebar),

			uiDialogTitlebarFullText = $('<span></span>')
				.addClass(
					'ui-icon ' +
					'ui-icon-newwin'
				)
				.text(options.fullText)
				.appendTo(uiDialogTitlebarFull)

	};
})();

Диалог принимает новую опцию options.fullText с текстом кнопки.

И еще для любителей пооптимизировать: _setOptions нельзя совместить с _position потому что позиционирование выполняется раньше ресайза, как ни странно.

Так вот есть у этого плагина большой недостаток - он однострочный и все похожие плагины тоже, тоесть если у меня менюшка в две строки то хрен мне. Надо было срочно исправить недоразумение и я написал свой.

• Один
• Два
• Три
• Четыре
• Пять
• Шесть
• Семь

Код такой

<ul id="lavalamp" class="ui-corner-all">
<li style="top:60px;left:20px" class="active"><span class="text">Один</span></span></li>
<li style="top:40px;left:150px"><span class="text">Два</span></li>
<li style="top:10px;left:50px"><span class="text">Три</span></li>
<li style="top:60px;left:100px"><span class="text">Четыре</span></li>
<li style="top:120px;left:10px"><span class="text">Пять</span></li>
<li style="top:10px;left:150px"><span class="text">Шесть</span></li>
<li style="top:100px;left:100px"><span class="text">Семь</span></li>
</ul>
<div id="lava" class="ui-corner-all"></div>

#lavalamp {
	display: block;
	height: 150px;
	border: 5px solid #FF7F04;
	background: #ff7f04; /* old browsers */
	background: -moz-linear-gradient(top, #ff7f04 0%, #ffb76b 99%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff7f04), color-stop(99%,#ffb76b)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7f04', endColorstr='#ffb76b',GradientType=0 ); /* ie */
}

    #lavalamp li {
		color: #808080;
		cursor: pointer;
		display: block;
		float: left;
		height: 25px;
		position: relative;
		z-index: auto;
		padding: 0;
    }

        #lavalamp li span {
			display: block;
			font-size: 14px;
			font-weight: bold;
			line-height: 25px;
			position: relative;
			text-decoration: none;
			z-index: 200;
			padding: 0 5px;
        }

#lava {
	background-color: #e57807;
	position:absolute;
	left:0;
	top:0;
	height:0;
	width:0;
	z-index:100;
}

Градиент сделан при помощи тулзы Ultimate CSS Gradient Generator

jQuery(document).ready(function($){
	$("#lavalamp")
		.delegate("li","mouseenter",null,function(){
			var self = $(this);
			$("#lava").stop().animate({
				top : self.offset().top,
				left : self.offset().left,
				width : self.outerWidth(true),
				height : self.outerHeight(true)
			})
		})
		.delegate("li","click",null,function(){
			alert($(this).text());
		})
		.bind("mouseleave",null,function(){
			$(".active",this).eq(0).trigger("mouseover");
		})
		.trigger("mouseout");
});

]]> http://mabp.kiev.ua/2010/11/27/lavalamp/feed/ 1 http://mabp.kiev.ua/2010/11/23/lightweight-list/ http://mabp.kiev.ua/2010/11/23/lightweight-list/#comments Tue, 23 Nov 2010 19:26:17 +0000 CTAPbIu_MABP http://mabp.kiev.ua/?p=1302 Давно я не писал ничего полезного, от части потому что не было реальных заданий от части потому, что последние время их было слишком много. А сегодня я расскажу как сделать красивый и "легкий" список.

Для списка я использовал jQueryUI, а вы можете написать все стили руками, если есть желание. Итак сначала пример, а потом разбор кода.

Итак в разметке ничего страшного нет, это простой список и две кнопочки: "редактировать", "удалить".

<div class="container ui-widget ui-widget-content ui-corner-all">
	<ul id="list">
		<li value="1">Один</li>
		<li value="2">Два</li>
		<li value="3">Три</li>
		<li value="4">Четыре</li>
		<li value="5">Пять</li>
	</ul>
	<div class="controls">
		<span class="ui-state-default ui-corner-all" title=""><span class="ui-icon ui-icon-pencil"></span></span>
		<span class="ui-state-default ui-corner-all" title=""><span class="ui-icon ui-icon-close"></span></span>
	</div>
</div>

.container {
	width: 300px;
	position:relative;
}
#list {
	padding: 10px;
}
#list li {
	line-height: 18px;
	list-style: none outside none;
	padding: 1px;
	border: 1px solid transparent;
}
.controls {
	cursor:pointer;
	display:none;
	position:absolute;
	right: 10px;
	font-size: 1px;
	padding: 2px;
}
.controls span {
	display: block;
	float : left;
	width : 16px;
	height  : 16px;
	line-height: 0 !important; /*перекрываю стили вордпресса */
}

CSS тоже достаточно просто, кроме того что я даю контейнеру position:relative, это позволяет задать контролам right: 10px и не высчитывать положение по левой стороне, более того это еще удобно тем что в таком случаи контролов может быть разное количество для разных элементов списка.

А теперь самое интересное.

$(document).ready(function(){

	function doSomething(){
		alert("I'm dummy function");
	}
	
	$("#list")
		.delegate("li","mouseenter",null,function(){
			var self = $(this);
			id = self.attr("value")
			self.addClass("ui-state-hover").siblings(".ui-state-hover").removeClass("ui-state-hover");
			self.parent().siblings(".controls").show().css({top:self.position().top});
		})
		.delegate("li","click",null,function(){
			var self = $(this);
			doSomething(self.attr("value"));
		})
		.parent()
		.bind("mouseleave",null,function(){
			var self = $(this);
			self.find("li.ui-state-hover").removeClass("ui-state-hover");
			self.find(".controls").hide();
		})
		.find(".ui-state-default")
		.bind("mouseenter",null,function(){
			$(this).addClass("ui-state-hover");
		})
		.bind("mouseleave",null,function(){
			$(this).removeClass("ui-state-hover");
		})
		.end()
		.find(".ui-icon-close")
		.bind("click",null,function(){
			doSomething(id);
		})
		.end()
		.find(".ui-icon-pencil")
		.bind("click",null,function(){
			doSomething(id);
		});
})

Сначала делегируем списку событие появления курсора над конкретным элементом, это дает возможность подсветить его (элемент), и пододвинуть к нему контролы. mouseover тут использовать нельзя потому что при наведении на котнролы они получат mouseover и пропадет подсветка на элементе и получиться мигание. По этой же причине mouseleave повешен не на список а на его родителя.

Дальше все предельно просто - навешены события на раскрашивание и подсвечивание контролов.

ЗЫ если остался вопрос почему список легкий - потому что события навешиваються не на каждый элмент а дедегируються родителю. Вторая причина это то, что используеться только две кнопки для создания контролов, вместо того чтобы при наведении на каждый элемент динамически создавать новые и добавлять их в дом дерево, или делать видимыми уже существующие.

Вот давече нашел каких-то noname канадцев, склепал им демку, но договориться не удалось.

Собственно особенности демки: jqGrid, jsTree, Layouts. Без особой фантазии скреплено друг с другом - обычное бизнес приложение. Такие кстати на ExtJS, наверное, лучше делать. Самым примечательным является D&D между таблицей и деревом и изменение размеров аккордеона и таблицы при изменении размеров панели. Тыкайтесь :)

А ну и к случаю обновил пару статей: jqGrid, Paint, UI.Layout. И соответствующие библиотеки до последних версий.

В двух словах - редкостная хуета! Дальше кодом... А забыл описать задачу. Нужен плеер в попапе, плейлист на странице в виде html (но если надо пара секунд переделать под ajax), у плеера есть две кнопки (вперед, назад) с превьюшками видео. Погнали.

Пример разметки одного элемента списка

<div style="float:left; text-align:center; margin:5px;">
	<a class="progress" href="${video_link}.flv" title="${title}">
		<img src="${thrumbnail_link}" alt="${title}">
	</a>
	<a class="progress" href="${video_link}.png" title="${title}">
		${title}
	</a>
</div>

Конфигурация плеера с комментариями

$(document).ready(function(){

	// конфигурация плеера
	var player = $f("player", 
	{
		// сам плеер 
		src : "/content/source/flowplayer/flowplayer-3.2.4.swf", 
		// и дополнительные параметры
		wmode: 'transparent'
	}, 
	{
		//debug : true,
		
		// стандартный клип
		clip : {
			// можно не указывать если полный путь прописан в html
			baseUrl: 'http://blip.tv/file/get/',
			// сразу при запуске не играем
			autoPlay: false,
			// но закачиваем
			autoBuffering: true,
			// растягиваем видео
			scaling : 'scale',
			// перед проигрыванием
			onBeforeBegin : function(clip){
				// если вместо видео картинка контролы не показываем
				if  (clip.type == "image"){
					this.getControls().hide();
				}
				
				// вычисляем позицию в списке воспроизведения
				var clip = this.getClip(),
					list = this.getPlaylist(),
					current = $.inArray(clip, list),
					left = current - 1  >= 0 ? current - 1 : list.length - 1,
					right = current + 1 <= list.length - 1 ? current + 1 : 0;
				
				// обновляем кнопки вперед-назад
				this.getPlugin("leftButton")
					.setHtml("<p>"+list[left].title+"</p>")
					.css({
						background : "transparent url("+list[left].thumbnail+") no-repeat 20 20",
					});
					
				this.getPlugin("rightButton")
					.setHtml("<p>"+list[right].title+"</p>")
					.css({
						background : "transparent url("+list[right].thumbnail+") no-repeat 20 20",
					});
			}
		},
		
		// список у нас береться из html
		// поэтому тут пусто
		playlist: [	],
		
		// рисуем кнопки
		// поскольку плеер очень убогий, для рисования кнопки
		// которая сначала видна чуть-чуть а при наведении мышьки 
		// расширяется и становиться видно превьюшку следующего видео
		// надо рисовать две кнопки одна маленькая, видна всегда и не меняется,
		// а вторая находиться поверх нее и собственно все события висят на ней
		plugins:  {
			
			// левая маленькая кнопка
			leftFake : {
				url: '/content/source/flowplayer/flowplayer.content-3.2.0.swf',
				top: 130,
				right : 0,
				width : 20,
				height : 100,
				zIndex : 1,
				opacity : 1,
				borderRadius : 0,
				background : "url(/content/source/flowplayer/mp_leftArrow.png) no-repeat 0 0"
			},
			
			// правая маленькая кнопка
			rightFake : {
				url: '/content/source/flowplayer/flowplayer.content-3.2.0.swf',
				top: 130,
				left : 0,
				width : 20,
				height : 100,
				zIndex : 1,
				opacity : 1,
				borderRadius : 0,
				background : "url(/content/source/flowplayer/mp_rightArrow.png) no-repeat 0 0"
			},
			
			controls: {
				//playlist: true,
		
				// ссылка на плагин
				url: '/content/source/flowplayer/flowplayer.controls-3.2.2.swf', 
				// показывать все элементы управления
				all: false,
				// играть
				play: false,
				// ползунок
				scrubber: true,
				// громкость
				volume: true,   
				// тонкая настройка ползунка и громкости
				scrubberHeightRatio: 0.3,
				scrubberBarHeightRatio: 0.2,
				volumeSliderHeightRatio: 0.2,
				// убирать с экрана при бездействии
				autoHide: 'always',
				// еще раз прячем контролы если смотрим на картинку,
				// потому что он (контрол) тупой и с первого раза не понял
				onBeforeShowed : function(){
					if (this.getPlayer().getClip().type == "image"){
						return false;
					}
				},
				onBeforeHidden : function(){
					if (this.getPlayer().getClip().type == "image"){
						return false;
					}
				}
			},

			// рисуем настоящую большую кнопку
			leftButton : {
				// ссылка на плагин
				url:'/content/source/flowplayer/flowplayer.content-3.2.0.swf',
				// какойто CSS
				top: 130,
				left:0,
				width: 20,
				height: 100,
				zIndex : 5,
				opacity: 1,
				padding : 20,
				borderRadius : 10,
				style: {
					p : {
						fontSize:14,
						fontWeight:"bold",
						color:"#000000"
					}
				},
				// задаем анимацию при наведении мыши
				onMouseOver: function() {
					this.animate({width:140}, 500);
				},
				onMouseOut: function() {
					this.animate({width:20}, 500); 
				},
				// играем следующий клип при клике
				onClick : function(){
					var clip = this.getPlayer().getClip(),
						list = this.getPlayer().getPlaylist(),
						current = $.inArray(clip, list),
						index = current - 1  >= 0 ? current - 1 : list.length - 1;
					
					this.getPlayer().play(index);
				}
			},
			
			// тут все тоже самое только для правой кнопки
			rightButton : {
				url: '/content/source/flowplayer/flowplayer.content-3.2.0.swf',
				top: 130,
				right: 0,
				width: 20,
				height: 100,
				zIndex : 5,
				opacity: 1,
				padding : 20,
				borderRadius : 10,
				style: {
					p : {
						fontSize:14,
						fontWeight:"bold",
						color:"#000000"
					}
				},
				onMouseOver: function() {
					this.animate({width:140}, 500);
				},
				onMouseOut: function() {
					this.animate({width:20}, 500); 
				},
				onClick : function(){
					var clip = this.getPlayer().getClip(),
						list = this.getPlayer().getPlaylist(),
						current = $.inArray(clip, list),
						index = current + 1 <= list.length - 1 ? current + 1 : 0;
			
					this.getPlayer().play(index)
				}, 
			},
		},
		
		// при наведении мыши на плеер показываем все кноки
		onMouseOver : function(){
			var plugins = ["leftButton","rightButton","leftFake","rightFake"];
			for(var i in plugins){
				this.getPlugin(plugins[i]).show();
			}
		},
		
		// а при бездействии - убираем
		onMouseOut : function(){
			var plugins = ["leftButton","rightButton","leftFake","rightFake"];
			for(var i in plugins){
				this.getPlugin(plugins[i]).hide();
			}
		},
		
		// ну и еще пара проверок при загрузке
		onLoad : function(){
			var list = this.getPlaylist(),
				left = list.length - 1,
				right = 1;
			
			// если короткий список воспроизведения не показываем кнопуки
			if (list.length<2){
				this.getPlugin("leftButton").hide();
				this.getPlugin("rightButton").hide();
			}else{
				this.getPlugin("leftButton")
					.setHtml("<p>"+list[left].title+"</p>")
					.css({
						background : "transparent url("+list[left].thumbnail+") no-repeat 20 20",
					});
					
				this.getPlugin("rightButton")
					.setHtml("<p>"+list[right].title+"</p>")
					.css({
						background : "transparent url("+list[right].thumbnail+") no-repeat 20 20",
					});
			}
		}		
	}),
	
	// обычный JUI диалог
	dialog = $("#videoDialog").dialog({
		//modal:true,
		title:"dialog title",
		resizable:false,
		bgiframe:true,
		draggable:true,
		autoOpen: false,
		width:600,
		height:400,
		minHeight:0,
		open:function(){
			// при открытии диалога загружаем плеер
			player.load();
			// и меняем плейлист
			// для вызова события onPlaylistReplace
			player.play(list);
		},
		close:function(){
			player.unload();
		}
	}),
	
	list = [],
	index = 0;
	
	// вызываеться при смене списка воспроизведения
	// например ajax'ом новый подгрузили
	player.onPlaylistReplace(function(list) {
		// чтото без таймаута не пашет :(
		setTimeout(function(){
			player.play(index);
		},100);
	});
	
	// при старте клипа меняем заголовок диалога
	player.onStart(function() {
		dialog.prev().find(".ui-dialog-title").text(this.getClip().title)
	});
	
	// меняет список воспроизведения
	function getNewPlaylist(){
		list = [];
		// парсит html
		$("#playlist").children().each(function(){
			var self = $(":first",this);
			list.push({
				"url": self.attr("href"),
				"title": self.attr("title"),
				"thumbnail" : self.find("img").attr("src")
			});
		});
		
		// гасим ссылки
		$("#playlist a").click(function(){
			$(this).parent().click();
			return false;
		});
		
		// открываем плеер и играем нужное видео
		$("#playlist").children().click(function(){
			if (!dialog.dialog("isOpen")){
				dialog.dialog("open");
			}
			index = $(this).index();
		});
		
	}
	
	// загружаем список в плеер
	getNewPlaylist();

});

И немного пощупать что получилось

Palm trees and the sun

Happy feet in a car

People jogging in park

Смысл простой до нельзя - надо на стандартном календаре выделять определенные дни. Стандартными средствами этого естественно сделать нельзя. Хачить ui.datepicker.js тоже нельзя, при этом желательно еще передавать список дней прямо в конструктор календаря. Нужно выкрутится, ну в общем как всегда.

Начинаем кое-как обживаемся в тех узких рамках в которые себя загнали - используем замыкания и делегацию и прочие малоиспользуемых плюшки типа функции apply и регулярных выражений.

(function($) {

	/**
	 * autor: CTAPbIu_MABP
	 * email: ctapbiumabp@gmail.com
	 * site: http://mabp.kiev.ua/2009/08/11/customized-datepicker/
	 * license: MIT & GPL
	 * last update: 11.08.2009
	 * version: 1.0
	 */
     
	// сохраняем старые функции
	var old_datepicker =  $.fn.datepicker;
	var old_generateHTML = $.datepicker._generateHTML;

	// и делигируем их новым
	$.datepicker._generateHTML = function(inst) {
		// получаем календарь ввиде raw-html
		var _generateHTML = old_generateHTML.apply(this, arguments),
		// выгребаем даты для этого календаря
		dates = inst.settings.hightlight.values;
		titles = inst.settings.hightlight.titles;
		
		// и начинаем расскрашивать
		for (var i in dates){
			if (dates[i].getFullYear() == inst.drawYear && dates[i].getMonth() == inst.drawMonth){
				_generateHTML = _generateHTML.replace(
				// магия регулярок
				new RegExp('<a class="([^"]+)" href="#">' + dates[i].getDate() + '</a>','i'),
				function(link, classes){
					// еще больше магии
					return link.replace(classes, classes + ' ui-state-custom' + 
						(titles[i] ? '" title="'+ titles[i] : ''));
				});
			}
		}
		return _generateHTML;
	};
	
	// делегируем конструктор
	$.fn.datepicker = function(options){
		// новые опции преобразовываем к объекту
		options.hightlight = $.extend(
			{format:$.datepicker._defaults.dateFormat, values:[], titles:[], settings:{}},
			options.hightlight
		);
		
		// сразу превращаем даты в объекты типа Date для того чтобы сохранить 
		options.hightlight.values = $.map(options.hightlight.values, function(value){
			return $.datepicker.parseDate(options.hightlight.format, value, options.hightlight.settings);
		});
		
		return old_datepicker.apply(this, [options]);
	};
})(jQuery);

Сначала очень долго думал как же для каждого инстанса календаря сделать свою функцию generateHTML с замкнутыми датами, но потом обнаружил что разработчики тоже сильно не парились и все совали в $.data и я тоже решил этим воспользоваться. Как никак уже готовое решение и переиспользование кода.

Пока писал, обнаружил еще одно забавное недокументированую (кажется) функцию, оказывается есть отдельный CSS класс для выходных, к которому нет реализации. Вот я ее в пример и добавил.

Используется это все вот так.

.ui-datepicker-week-end .ui-state-default{
       border: 1px solid #ffa1a1;
}
.ui-state-custom {
       border: 1px solid #f0f !important;
}

$("#datepicker").datepicker({
	firstDay: 1 , 
	hightlight : {
		format:"dd/mm/yy",
		values:["1/08/2009","5/08/2009","15/08/2009"],
		titles:["Рас","Два","Три"],
		settings:{}
	}
});

Проще не бывает, а скачать можно тут

jQuery также дает возможность создавать пользовательские события, чем я и воспользуюсь, создав собственное событие с помощью которого буду обновлять ползунок из Modal Dialog и Progress Bar. Практическая польза от этого скрипта нулевая, но для демонстрации самое то что доктор прописал. На самом деле весь код описанный в событии можно перенести в стандартный callback 'change'. Итак задача: обновлять ползунок при помощи пользовательского события, при срабатывании события ползунок увеличивается и меняет цвет.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<title>Progress Bar with custom event</title>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="ui/ui.core.js" type="text/javascript"></script>
<script src="ui/ui.resizable.js" type="text/javascript"></script>
<script src="ui/ui.draggable.js" type="text/javascript"></script>
<script src="ui/ui.dialog.js" type="text/javascript"></script>
<script src="ui/ui.progressbar.js" type="text/javascript"></script>

<link href="themes/smoothness/ui.core.css" type="text/css" rel="stylesheet" />
<link href="themes/smoothness/ui.theme.css" type="text/css" rel="stylesheet" />
<link href="themes/smoothness/ui.resizable.css" type="text/css" rel="stylesheet" />
<link href="themes/smoothness/ui.dialog.css" type="text/css" rel="stylesheet" />
<link href="themes/smoothness/ui.progressbar.css" type="text/css" rel="stylesheet" />

<style>
.ui-progressbar-indicator{
	line-height:40px;
	position:absolute;
	text-indent:-20px;
	left:50%;
}
</style>

<script type="text/javascript">
jQuery().ready(function($){

	var counter = 0, 
	dialog = $("<div/>")
		.dialog({modal:true,title:"Заголовок",overlay:{backgroundColor:'#000',opacity: 0.5}})
		.parent().find(".ui-dialog-titlebar-close").hide().end().end(),
	indicator = $("<div/>").addClass("ui-progressbar-indicator").text("0").appendTo(dialog),
	// создаю пользовательское событие myEvent
	// вторым параметром можно передавать null потому что он не используеться в примере
	// но я предпочитаю передавать this, тут this является контекстом функцией переданой параметром в jQuery().ready
	// тоесть window, но если этот объект не window то это единственный способ получить к нему доступ.
	// пример такого использования можно посмотреть в плагине autocomplete
	progressbar = $("<div/>").bind("myEvent", this, function(event,data){
			// event.data хранит данные переданые при создании события
			// тоесть event.data == window
			// data хранит данные переданые при срабатывании события 
			// тоесть data == {counter:counter}
			var 	c = data.counter,
				// процет цвета который заполняет ползунок
				seed = Math.round(255*c/100),
				// в HEX
				green = seed.toString(16),
				// форматируем до двух знаков
				green = green.length == 1 ? "0"+green : green,
				// процент цвета который покидает ползунок
				red = (255 - seed).toString(16),
				// его тоже форматируем
				red = red.length == 1 ? "0"+red : red;
			// увеличиваез значение индикатора
			indicator.text(c+"%");
			// удлиняем ползунок
			$(this).progressbar("value",counter);
			// закрашиваем ползунок новым цветом
			$("div",this).css({background:"#"+red+green+"00"});
		})
		.progressbar({value:0})
		.appendTo(dialog),
	// имитируем длительный процесс
	interval = setInterval(function () {
		counter+=1;
		progressbar.trigger("myEvent",{counter:counter});
		if (counter == 100) {
			clearInterval(interval);
			setTimeout(function(){
				progressbar.progressbar("destroy");
				dialog.dialog("destroy");
				indicator.remove();
			},50);
		}
	}, 50);
});
</script>
</head>
<body>

</body>
</html>

Более подробные комментарии можно посмотреть в Modal Dialog и Progress Bar