$.ajax({
	url: "...",
	success: function(){
		$("#myTemplate").tmpl(data).appendTo($("#myContainer").empty());
	}
});

можно удобно писать

$.ajax({
	url: "...",
	context: $("#myContainer").empty(),
	success: function(){
		$("#myTemplate").tmpl(data).appendTo(this);
	}
});

только это все разбивается о рифы реальности, когда аджакс надо повесить на кнопку

$("#myButton").click(function(){
	$.ajax({
		url: "...",
		context: $("#myContainer").empty(),
		success: function(){
			$("#myTemplate").tmpl(data).appendTo(this);
		}
	});
});

При трех быстрых кликах, контейнер три раза обнуляется, потом идет запрос/ответ и шаблон три раза вставляется в контейнер.

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

$("#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 потому что позиционирование выполняется раньше ресайза, как ни странно.

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

	var div = document.createElement("div");
	div.setAttribute("data-attr","1111111111111111111111111111111")
	document.body.appendChild(div);

	console.log("getAttribute", div.getAttribute("data-attr"));
	console.log("jquery.data", $(div).data("attr"));

	div.parentNode.removeChild(div);

});

Потому что в 1.4.4 в строке 1311 есть проверка которая проходит казалось бы правильно, да не очень

data = data === "true" ? true :
data === "false" ? false :
data === "null" ? null :
!jQuery.isNaN( data ) ? parseFloat( data ) : // <- here it is
	rbrace.test( data ) ? jQuery.parseJSON( data ) :
	data;

Пост про дебаг поэтому включите, плз, консольку.

Когда надо затормозить анимацию где-то посередине, я обычно пишу в консоли что-то вроде

setInterval(function(){$(':animated').stop();},500);

Но бывает что этого недостаточно тогда в ход идет такой код

$("#id").animate({/**/},{
	step:function(){
		console.log(arguments)
	}
});

Как он работает можно посмотреть на примере анимаций backgroundColor и borderColor

Вот такая нелепость и хуй пойми почему....

ЗЫ для тех кто читает через ридер - нелепость в том что анимация бэкграунда начинается всегда с текущего цвета, а бордера - с белого :(

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

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

Код такой

<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 повешен не на список а на его родителя.

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

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