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

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

Пожалуй эта цитата лучше всего характеризует то, что я сегодня вам приготовил. А подготовка материала как показала практика дело очень интимное. Я пару раз просил читателей сказать о чем они хотели бы почитать, но ни разу не написал, ни на одну из предложенных тем. Зато могу бросить все и начать писать о том, что мне пришло в голову как шальная мысль. Так и в этот раз, просматривая очередную заметку "100500 типс энд трикс для жуквери" я решил, что меня утомил один из этих типсов.

Самая простая вещь которая может быть это вынос за пределы цикла и отложенная работа с DOM деревом.

var lis = [1,2,3,4,5,6];
$(lis).each(function(i, e){
	$("ul#my").append("<li>"+e+"</li>")
});

Превращаеться в

var lis = [1,2,3,4,5,6], html = "";
$(lis).each(function(i, e){
	html = "<li>"+e+"</li>";
});
$("ul#my").html(html);

Кароче самая тривиальная и банальная вещь из существующих. Но писать append внутри цикла как-то логичнее и приятнее ну, по крайней мере, для меня. И решил я захачить жуквери так что бы можно было писать как хочеться а работало как надо. Вот тут собственно и уместно предисловие, пишем append внутри each и каждая миллисекунда на счету.

После дня ковыряния у меня родился вот такой код:

(function($){

/*
 * @author CTAPbIu_MABP
 * @email CTAPbIuMABP@gmail.com
 * @link http://mabp.kiev.ua/2010/08/31/delayed-dom-manipulations/
 * @license GPL
 */

	var data = {},	// тут список всех элементов и отложенных операций над ними
		isOuterLoop = true, // определяет самый внешний вложенный цикл
		supportedFunctions = [ // список переопределяемых методов
			"append",
			"prepend",
			"before",
			"after"
		];
	
	/**
	 * Складывает аргументы оригинальных методов в data
	 * @param funcName {String} имя оригинального метода 
	 * @param args {array-like object} аргументы оригинального метода
	 * @return {jQuery} возвращяет jQuery для продолжения цепочки
	 */
	function delay (funcName, args){
		var i = $.inArray(this, data[funcName].elt),
			args = $(args).toArray(); // приводим аргументы к массиву
		if (i > -1){
			data[funcName].tmp[i] = data[funcName].tmp[i].concat(args);
		}else{
			data[funcName].elt.push(this);
			data[funcName].tmp.push(args)
		}
		return this;
	}
	
	// создаем место для хранения данных
	// и обертки ко всем поддерживаемым методам 
	$(supportedFunctions).each(function(i, funcName){
		data[funcName] = {tmp : [], elt : []};
		$.fn[funcName+"Delayed"] = function(){
			return delay.call(this, funcName, arguments)
		}
	});
	
	// создаем обертку для each
	$.fn.eachDelayed = function(){
		var ret, isOuter = isOuterLoop;
		isOuterLoop = false;
		ret = $.fn.each.apply(this, arguments); // выполняем оригинальный each
		if (isOuter){ // после самого вернего вложенного цикла
			$.each(data, function(funcName, funcParam){ // обходим все данные
				$(funcParam.elt).each(function(i){ // и выполняем все оригинальные методы
					$.fn[funcName].apply(funcParam.elt[i], funcParam.tmp[i]);
				});
				data[funcName] = {tmp : [], elt : []}; // обнуляем данные 
			})
			isOuterLoop = true;
		}
		return ret;
	}
	
})(jQuery);

Ну что ж погнали, посмотрим что он делает. А делает он обертку для методов из массива supportedFunctions, грубо говоря AOP. На самом деле переопределенные методы не выполняют вставку в DOM дерево, а только вызывают функцию delayed которая складывает аргументы оригинальных методов в массив data. После конца цикла все накопленные данные проверяются и выполняются все отложенные методы.

Насколько я проверил это все прекрасно работает с несколькими вставками одновременно, во вложенных циклах и несколькими аргументами, а так же со всем этим вместе.

Теперь я думаю надо объяснить на чем основан хак. Так сложилось что все четыре метода из массива supportedFunctions используют метод domManip (line 4263) -> buildFragment (line 4355) -> clean (line 4417) передавая все свои аргументы, для построения DocumentFragment одним махом. Вот этим-то я и воспользовался, в самом внешнем цикле я один раз вызываю оригинальный метод с кучей параметров.

Еще два слова о том как пользоваться этим чудом

$(document).ready(function(){
	var lis = [1,2,3,4,5,6],
            ul1 = $("ul#my1"),
            ul2 = $("ul#my2");
	
	$(lis).eachDelayed(function(i, e){
		ul1.beforeDelayed("<div>"+e+"</div>");
		ul1.appendDelayed("<li>"+e+"</li>");
		ul2.prependDelayed("<li>1+"+e+"</li>", "<li>e+"+e+"</li>");
		$(lis).eachDelayed(function(i, e){
			ul2.appendDelayed("<li>2+"+e+"</li>");
		});
	});
	
});

Результат выполнения кода приводить не буду, там ничего красивого, зато работает. Все методы before, append и prepend выполняются по одному разу при окончании внешнего цикла.

Хотел еще сделать поддержку для всяких wrap, но что-то там как-то грустно все, они не используют domManip.

Скачать можно тут DOWNLOAD LINK

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

Итак что же вышло?

(function($) {

    var Plugin = function (elt, obj) {
        var element = $(elt);
        for (var prop in obj){
            (function(self,obj,prop){
                if ($.isFunction(obj[prop])){
                    self[prop] = function(){
                        var result, eventName = prop.charAt(0).toUpperCase() + prop.substr(1);
                        element.trigger("onBefore" + eventName, [self, arguments]);
                        result = obj[prop].apply(self, arguments);
                        element.trigger("onAfter" + eventName, [self, arguments, result]);
                    };
                    element.bind(prop, $.proxy(function(){
                        self[prop].apply(self, Array.prototype.slice.call(arguments, 1));
                    }, self));
                }else{
                    self[prop] = obj[prop];
                }
            })(this,obj,prop);
        }
    };

    $.fn.plugin = function(obj) {
        this.each(function() {
            new Plugin(this, obj);
        });
        return this;
    };

})(jQuery);

Использовать можно примерно так

$(document).ready(function(){
    $("#qwerty").bind("onBeforeMethod1 onAfterMethod1 onBeforeMethod2 onAfterMethod2", function(e){
        console.log(e.type, arguments);
    }).plugin({
        method1 : function (){
            console.log("method1",this);
            this.method2(1,2,3);
        },
        method2 : function (){
            console.log("method2",this);
            console.log("method2",arguments);
            return arguments;
        }
    }).trigger("method1").trigger("method2",[1,2,3])
});

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

Итак для построения таблицы нужны данные, я придумал вот такую JSON рыбу, она статичная так что вам ничего добавить не получиться :P

{"total":1,"records":7,"page":1,
	"rows":[
		{"id":1,"cell":[1,"Москва",55.755786,37.617633,"Yes",["A","B","C"]]},
		{"id":2,"cell":[2,"Киев",50.440951,30.527181,"Yes",["A","B"]]},
		{"id":3,"cell":[3,"Минск",53.905117,27.561184,"Yes",["A","C"]]},
		{"id":4,"cell":[4,"Сан Франциско",37.77493,-122.419416,"No",["B","C"]]},
		{"id":5,"cell":[5,"Нью Йорк",40.714269,-74.005973,"No",["A"]]},
		{"id":6,"cell":[6,"Лондон",51.51333,-0.088947,"Yes",["B"]]},
		{"id":7,"cell":[7,"Наироби",0.878872,37.924805,"Yes",["C"]]}
	]
}

Тут каждая строка описывает имя города, широту, долготу, флажок является ли город столицей и какие-то буквы имитирующие список.

Есть еще словарик

[
{value:"a",name:"A"},
{value:"b",name:"B"},
{value:"c",name:"C"},
{value:"d",name:"D"},
{value:"e",name:"E"}
]

и ответ о успешном добавлении

{"message":"","id":8}

Ну и перед самым интересным еще HTML разметка, она совсем простая и требует задания всего одной таблицы и одного дива.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example from CTAPbIu_MABP's BLOG</title>

<link rel="stylesheet" type="text/css" media="screen" href="ui-lightness/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jqGrid/css/ui.jqgrid.css" />

 
<script src="jquery-1.4.min.js" type="text/javascript"></script>
<-- 
я подключил jquery-ui потому что он и так есть у меня на сайте
его можно не подключать а использовать плагины jqModal и jqDnR
которые можно скачать вместе с jqGrid, подключать и то и то НЕЛЬЗЯ
 -->
<script src="jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
    
<script src="jqGrid/js/i18n/grid.locale-ru.js" type="text/javascript"></script>
<script src="jqGrid/jquery.jqGrid.js" type="text/javascript"></script>
<script src="setup.js" type="text/javascript"></script>

</head>
<body>

<table id="table"></table>
<div id="pager"></div>

</body>
</html>

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

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

	/**
	 * функция для построения select'a из моих данных
	 * тут даже тип ответа нельзя задать
	 * надо все парсить и клеить самому
	 * @param response ответ ajax'a
	 */
	function build(response) {
		// а вот и статья про шаблонизатор пригодилась
		// http://mabp.kiev.ua/2010/01/16/javascript-template-engine/
		var html = '', template = '<option value="[value]">[name]</option>';
		$(eval("("+response.responseText+")")).each(function(i, val){
			html += template.replace(/(\[([^\[\]]+)\])/g, function($0, $1, $2){
			   return val[$2] || "";
			});
		});
		return '<select>' + html + '</select>';
	}

	/**
	 * Эта функция формирует пост запрос и для массивов сформирует
	 * переменную вида letters=a,b,c,d,e
	 * я переделываю это все в letters[]=a,letters[]=b итд
	 * заодно экранирую всякую ересь вроде &<>
	 * @param data массив всех данных формы
	 */
	function serialize(data){
		var str = [];
		if(data.letters)
			data.letters = data.letters.split(",");
		for (var i in data) {
			if ($.isArray(data[i])) {
				for (var j in data[i]) {
					str.push(i + "[]=" + encodeURI(data[i][j]));
				}
			} else {
				str.push(i + "=" + encodeURI(data[i]));
			}
		}
		return str.join("&");
	}


	$("#table").jqGrid({
		autowidth:true,
		colNames:["ID","Name","Latitude","Longitude","Capital","Letters"],
		colModel:[
			// запрещаю редактировать id и искать по нему, по остальным - можно
			{name:"id",			index:"id",				width:40,	editable:false, search:false},
			// тип поля ввода textarea/text/checkbox/select а так же все остальные типы поля input
			{name:"name",		index:"name",			width:100,	editable: true,	edittype:"textarea"},
			// можно так же указать maxlength для инпутов и multiple для селектов
			{name:"latitude",	index:"title",			width:100,	editable: true,	edittype:"text",editoptions:{maxlength:16}},
			{name:"longitude",	index:"description",	width:100,	editable: true,	edittype:"text",editoptions:{maxlength:16}},
			// значения для чекбоксов задаються вот так
			{name:"capital",	index:"capital",		width:100,	editable: true,	edittype:"checkbox",editoptions:{value:"Yes:No"}},
			{name:"letters",	index:"letters",		width:100,	editable: true,
				// для селектов тоже можно задать формат инлайн, но я выбрал кастомный формат
				edittype:"select", editoptions:{multiple:true,dataUrl:"/content/polygon/jqgrid.backend-dict.json",buildSelect:build},
				// и для поиска можно сделать селект
				stype:"select", searchoptions:{dataUrl:"/content/polygon/jqgrid.backend-dict.json", buildSelect:build}
				}
		],
		pager:"#pager",
		datatype:"json",
		viewrecords:true,
		url:"/content/polygon/jqgrid.backend-data.json",
		ajaxGridOptions:{ // <-- передаеться прямо в $.ajax
			type : "GET",
			dataType : "json" // <-- странно но эта опция не перекрывает параметр datatype
		},
		/**
		 * Если пользователь запросил страницу номер которой больше чем максимальное 
		 * количество страниц, или меньше чем 1, эта функция вернет его обратно 
		 * в позволенные рамки
		 */
		onPaging: function(pgButton) {
			var curPage = grid.jqGrid('getGridParam','page');
			var lastPage = grid.jqGrid('getGridParam','lastpage');
				if (curPage < 1) {
			this.p.page = 1;
			}
			if (curPage > lastPage) {
				this.p.page = lastPage;
			}
		}
	}).jqGrid("navGrid","#pager",
		{}, // показать/скрыть кнопки добавить/редактировать/удалить/поиск/обновить
		{  // опции для редактирования
			modal:true, // диалог модальный
			url:"/content/polygon/jqgrid.backend-save.json", // бэкэнд
			closeAfterEdit:true, // закрыть диплог после редактирования
			reloadAfterSubmit:false, // перезагрузить таблицу после добавления
			mtype:"GET", // тип запроса, перекрывает все предыдущие настройки
			/**
			 * с помощью этой функции можно показать ошибки заполнения формы
			 * а так же вставить новый ряд с id который пришел с сервера
			 * error - {"message":"Epic Fail!"}
			 * succes - {"message":""}
			 * @param response
			 */
			afterSubmit:function(response){
				var json = eval("("+response.responseText+")");
				return [!!!json.message,json.message];
			},
			/**
			 * тут я делаю магию: я не хочу что бы можно было редактировать поле letters
			 * поэтому я его дизейблю, но поскольку форма еще не есть частью документа
			 * нельзя сделать выборку $("select")
			 * @param form форма
			 */
			afterShowForm:function(form){
				$("select",form).attr({disabled:"disabled"})
			},
			serializeEditData : serialize // описание функции в начале
		},
		{  // опции для добавления, все так же как и прошлый раз
			modal:true,
			url:"/content/polygon/jqgrid.backend-save.json",
			closeAfterAdd:true, // закрыть диплог после добавления
			reloadAfterSubmit:false,
			mtype:"GET",
			afterSubmit:function(response){
				var json = eval("("+response.responseText+")");
				return [!!!json.message,json.message,json.id];
			},
			/**
			 * Отменяем магию которую сотворила эта же функция при редактировании
			 * @param form форма
			 */
			afterShowForm:function(form){
				$("select",form).removeAttr("disabled");
			},
			serializeEditData : serialize
		},
		{ // опции для удаления
			modal:true,
			url:"/content/polygon/jqgrid.backend-save.json",
			reloadAfterSubmit:false,
			mtype:"GET",
			afterSubmit:function(response){
				var json = eval("("+response.responseText+")");
				return [!!!json.message,json.message];
			},
			serializeDelData : serialize
		},
		{ // опции поиска
			sopt:['eq', 'ne', 'in', 'cn'], // ограничиваю критерии
			multipleSearch:true, // можно искать по нескольким полям
			closeAfterSearch:true // закрыть после поиска
		}
	);
});

Играемся!

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

А накопал я много чего интересного. Оказывается, сам по себе плагин составляет три с половиной строки кода вокруг объекта Mapifies

(function($){
	$.fn.jmap = function(method, options, callback) {
		return this.each(function(){
			if (method == 'init' && typeof options == 'undefined') {
				new Mapifies.Initialise(this, {}, null);
			} else if (method == 'init' && typeof options == 'object') {
				new Mapifies.Initialise(this, options, callback);
			} else if (method == 'init' && typeof options == 'function') {
				new Mapifies.Initialise(this, {}, options);
			} else if (typeof method == 'object' || method == null) {
				new Mapifies.Initialise(this, method, options);
			} else {
				try {
					new Mapifies[method](this, options, callback);
				} catch(err) {
					throw Error('Mapifies Function Does Not Exist');
				}
			}
		});
	}
})(jQuery);

Что сказать, хорошо сделанная обертка, кроме одной меленькой детали. Все методы объекта Mapifies за редким исключением получают три параметра element (карта), options (опции), callback (функция), а возвращает результат работы callback(map). И вот как вы думаете как вы получите результат работы хоть какой-нибудь функции если обертка не предполагает возврата данных?!

Уже только по этому я решил отказаться от использования обертки и дальше работал с Mapifies напрямую. Документация по плагину крайне бедная, но код очень хорошо документирован, поэтому не составляет труда в нем разобраться. Продемонстрирую несколько простейших функций:

Создание резиновой карты, растягивается за нижний правый угол. Осторожно если сильно потянуть вправо то потом ее обратно уже не сжать, зато в любой момент можно растянуть вниз на практически любую длину.

jQuery(document).ready(function($){
    var $map = $("#map1"),
    GMap = Mapifies.Initialise(
         $map.get(0),  {
            // описание всех параметров смотрите в коде плагина
            // http://github.com/digitalspaghetti/jmaps/blob/master/dist/jquery.jmap.js#L100
            language: 'en',
            mapType: G_HYBRID_MAP,
            mapCenter: [50.440951,30.527181],
            mapZoom: 10,
            mapControl: 'large',
            mapEnableDragging: true,
            mapEnableScrollZoom: true,
            mapShowjMapsIcon: false
        }, function(thisMap){
            return thisMap;
    });

    $map.resizable({
        stop: function(event, ui) {
            Mapifies.CheckResize($map);
        }
    });
});

Теперь покажу как добавить маркер

jQuery(document).ready(function($){
    var $map = $("#map2");
    Mapifies.Initialise(
         $map.get(0),  {
            // описание всех параметров смотрите в коде плагина
            // http://github.com/digitalspaghetti/jmaps/blob/master/dist/jquery.jmap.js#L100
            language: 'en',
            mapType: G_HYBRID_MAP,
            mapCenter: [50.440951,30.527181],
            mapZoom: 10,
            mapControl: 'large',
            mapEnableDragging: true,
            mapEnableScrollZoom: true,
            mapShowjMapsIcon: false
    });
    Mapifies.CreateMarkerManager($map,{markerManager: 'MarkerManager'});
    Mapifies.AddMarker($map,{
        // описание всех параметров смотрите в коде плагина
        // http://github.com/digitalspaghetti/jmaps/blob/master/dist/jquery.jmap.js#L704
        pointTitle : 'Tooltip',
        pointLatLng: [50.440951,30.527181],
        pointHTML: '<strong>description</strong>',
        pointOpenHTMLEvent: 'click',
        pointIsDraggable: true,
        pointMinZoom: 0,
        pointMaxZoom: 17,
        pointIcon:Mapifies.createIcon({
            // описание картинок смотрите в моей прошлой статье
            // http://mabp.kiev.ua/2010/01/12/google-map-markers/
            iconImage: 'http://maps.google.com/mapfiles/arrow.png',
            iconShadow: 'http://maps.google.com/mapfiles/arrowshadow.png',
            iconSize: new GSize(39,34),
            iconShadowSize: new GSize(39,34),
            iconPrintImage: 'http://maps.google.com/mapfiles/arrowie.png',
            iconMozPrintImage: 'http://maps.google.com/mapfiles/arrowff.png',
            iconTransparent: 'http://maps.google.com/mapfiles/arrowtransparent.png'
        })
    });
});

С этим примером тоже почти все хорошо кроме двух вещей.

Первая это нельзя заменить крест под маркером (во время перетаскивания). Он немного не по размеру этому маркеру (чуть чуть левее чем надо), но чтобы заменить его нужно отказаться от метода createIcon и создать маркер вручную.

Вторая... Если посмотреть код страницы видно что я подключил скрипт markermanager.js, он помогает при работе с маркерами, довольно неплохая вещь. Плагин умеет его использовать и если он подключен создает маркеры с его помощью. Но создавать создает а удалять забыват ;( Тоесть чтобы удалить маркер нужно вместо

    $("#remove1").click(function(){
        var manager = Mapifies.MapObjects.Get($map).MarkerManager;
        Mapifies.RemoveMarker($map,manager.getMarker(50.440951,30.527181,1))
    });

Написать

    $("#remove2").click(function(){
        var manager =  Mapifies.MapObjects.Get($map).MarkerManager;
        manager.removeMarker(manager.getMarker(50.440951,30.527181,1));
    });

Ага, вот сейчас вы нажали первую кнопку и подумали что я вас обманываю, нет попробуйте позумить, маркер никуда не пропал. Зато если нажать на вторую кнопку маркер пропадает начисто.

Я думаю на сегодня все. кто знает что-то об авторе, свежих версиях, документации и тд и тп пишите в каменты.

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

Модель данных взята от фонаря три шага налево...

var model = [
{id : 0, amount : 100, units : "meters", value : 13, color : "#00f", path : "M 250 73 L 250 73"},
{id : 1, amount : 200, units : "meters", value : 22, color : "#0f0", path : "M 327 67 L 327 67"},
{id : 2, amount : 300, units : "meters", value : 36, color : "#f00", path : "M 185 172 L 185"},
{id : 3, amount : 400, units : "meters", value : 18, color : "#00f", path : "M 216 231 L 216"},
{id : 4, amount : 150, units : "meters", value : 23, color : "#f00", path : "M 274 171 L 274 171"},
{id : 5, amount : 360, units : "liters", value : 36, color : "#00f", path : "M 308 176 L 308 176"},
{id : 6, amount : 170, units : "liters", value : 12, color : "#0f0", path : "M 358 113 L 358 113"},
{id : 7, amount : 180, units : "liters", value : 24, color : "#f00", path : "M 201 109 L 201 109"},
{id : 8, amount : 292, units : "liters", value : 37, color : "#00f", path : "M 228 114 L 228 114"},
{id : 9, amount : 182, units : "kgrams", value : 43, color : "#0f0", path : "M 357 245 L 357 245"},
{id : 10,amount : 273, units : "kgrams", value : 53, color : "#f00", path : "M 346 172 L 346 172"},
{id : 11,amount : 164, units : "kgrams", value : 61, color : "#00f", path : "M 386 179 L 386 179"},
{id : 12,amount : 254, units : "kgrams", value : 27, color : "#0f0", path : "M 218 178 L 218 178"}
];

Загадочная надпись M 250 73 L 250 73 это начало линии в формате SVG, дословно она означает Move To 250 px OX 73 px OY Line To 250 px OX 73 px OY, если в конце написать "z" то начало и конец линии замкнуться. В примере я укоротил запись в исходниках все по честному.

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

(function($) {

    /**
     * author: CTAPbIu_MABP
     * email: ctapbiumabp@gmail.com
     * site: http://mabp.kiev.ua/
     * last update: 08.12.2009
     * version: 0.2
     */

    var Paint = function (node, options) {
        $.extend(this, options);
        this.init(node);
    };


    Paint.prototype = {

        // private
        raphael : null,
        isStarted : false,
        node : null,
        offset : null,

        // public
        color : "#f00",
        defaultColor : "#000",

        // callbacks
        onInit : function() {
        },
        onLineClick : function() {
        },
        onLineDblClick : function() {
        },
        onLineDelete : function() {
        },
        onStart : function() {
        },
        onStop : function() {
        },
        onMove : function() {
        },

        init : function (raw_img) {

            var img = $(raw_img).hide(),
                    self = this,
                    width = img.width(),
                    height = img.height();

            this.node = img.wrap("<div/>").parent().addClass("plot").css({width:width,height:height});
            this.raphael = new Raphael(this.node.get(0), width, height);
            this.raphael.image(img.attr("src"), 0, 0, width, height);

            this.unselectable(this.node.get(0));
            this.node.mouseover(function() {
                //this.style.cursor = 'pointer';
                //$(this).css({'cursor':'url("pencil.cur")'});
            }).mousedown(function(e) {
                self.start(e);
            }).mouseup(function(e) {
                self.stop(e);
            }).mousemove(function(e) {
                self.move(e);
            });

            this.node.bind("drawLine setColor deleteLine", function(e, param) {
                self[e.type](param);
            });

            var model = this.model;
            this.model = [];

            for (var i = 0,j = model.length; i < j; i++) {
                this.setColor(model[i].color);
                this.drawLine(model[i].path);
            }

            this.onInit.apply(this, [raw_img]);
        },

        setColor : function(color) {
            this.color = /^#([a-f0-9]{3}){1,2}$/i.test(color) ? color : this.defaultColor;
        },

        start: function(e) {
            //console.log("start");
            e.preventDefault(); // prevent drag image
            if (this.isStarted)
                return;

            this.offset = this.node.offset();

            this.model.push({
                line : "M " + (e.pageX - this.offset.left) + " " + (e.pageY - this.offset.top),
                color : this.color,
                path : null
            });

            this.isStarted = true;
            this.onStart.apply(this, [e]);
        },

        move: function(e) {
            //console.log("move");
            if (!this.isStarted) return;

            var model = this.model.pop();
            model.path && model.path.remove();
            delete model.path,model;

            this.drawLine(model.line + " L " + (e.pageX - this.offset.left) + " " + (e.pageY - this.offset.top));
            this.onMove.apply(this, [e]);
        },

        stop: function(e) {
            //console.log("finish");
            this.isStarted = false;

            var model = this.model.pop();
            e.isClick = !model.path; // was it line or just click on image

            model.path && this.model.push(model) || delete model;

            this.onStop.apply(this, [e]);
        },

        drawLine : function(line) {
            var path = this.raphael.path(line)
                    .attr({stroke:this.color,'stroke-width':5,'stroke-linejoin':'round'});

            var self = this;

            $(path.node)
                .click((function(c) {return function() {self.onLineClick.apply(self, [c]);}})(self.model.length))
                .dblclick((function(c) {return function() {self.onLineDblClick.apply(self, [c]);}})(self.model.length))
                .mouseover(function() {this.style.cursor = 'crosshair';});

            this.model.push({line:line,path:path,color:this.color});
        },

        deleteLine : function(index) {
            var model = this.model[index];
            model.path && model.path.remove();
            delete model.path, model;

            this.onLineDelete.apply(this, [index])
        },

        unselectable: function(element) {
            // http://ajaxcookbook.org/disable-text-selection/
            element.onselectstart = function() {
                return false;
            };
            element.unselectable = "on";
            element.style.MozUserSelect = "none";
        }
    };


    $.fn.paint = function(options) {
        this.each(function() {
            new Paint(this, options);
        });
        return this;
    };

})(jQuery);

Простите, но комментариев к коду пока нет, будут в следующей версии, наверное, сильно не обольщайтесь. Да и скачать этот код можно отсюда.

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

$("#plot").paint({
    model : model,
    // текущий подсвеченный элемент
    hightlited : null, // it may be zero
    hightlitedColor : "#fff",

    // обработчик двойного клика на линию
    // удаляет подсветку
    // удаляет линию с рисунка
    // удаляет ряд из таблицы
    onLineDblClick : function(index){
        this.hightlited = null;
        this.deleteLine(index);
        $("#grid").jqGrid('delRowData',index+1); 
    },

    // обработчик клика на линию
    onLineClick : function (index) {
        // снимает прошлуб подсветку если была
        if (this.hightlited != null){
            var prev = this.model[this.hightlited];
            prev.path.attr({stroke:prev.color});
        }

        // добавляет новую
        this.model[index].path.attr({stroke:this.hightlitedColor});
        // подсвечивает ряд в таблице
        $("#grid").jqGrid('setSelection',index+1);
        this.hightlited = index;
    },

    // call-back на событие остановки рисования линии
    onStop : function(e){
        // удаляет старую подсветку если была
        if (this.hightlited != null){
            var prev = this.model[this.hightlited];
            prev.path.attr({stroke:prev.color});
        }

        // если это не случайный клик
        if (!e.isClick){
            // подсвечивает свежесозданную линию
            var index = this.model.length-1;
            this.model[index].path.attr({stroke:"#fff"});
            this.hightlited = index;
            // добавляет ряд в таблицу
            $("#grid").jqGrid('addRowData',index+1,this.model[index]);
        }
    },

    // пока не забыл надо в самом начале определить 
    // событие которое будет вызвано когда в таблице
    // поменяется выделенная строка
    onInit : function(){
        var self = this;
        this.node.bind("hightliteLine", function(e, index) {
            // убирает старую подсветку
            if (self.hightlited != null){
                var prev = self.model[self.hightlited];
                prev.path.attr({stroke:prev.color});
            }

            // подсвечивает новую линию
            self.model[index].path.attr({stroke:self.hightlitedColor});
            self.hightlited = index;
        });
    }
});

Теперь надо привязать выбор цвета, для этого создается небольшая функция инициализирующая colorpicker, когда colorpicker меняет цвет срабатывает событие у рисовалки, и она меняет цвет линии.

$('#colorpicker').ColorPicker({
    flat: true,
    // начальный цвет
    color: '#00ff00',
    // вся магия тут
    onChange: function(hsb, hex, rgb) {
        $("#plot").trigger("setColor","#"+hex);
    }
});

Еще немного магии для инициализации data grid'а :

$("#grid").jqGrid({
    datatype: "local",
    height: 250,
    colNames:['No','Amount','Units','Value'],
    colModel:[
        {name:'id',index:'id',width:100, sorttype:"int"},
        {name:'amount',index:'amount', width:100, sorttype:"int", align:"right"},
        {name:'units',index:'units', width:100, sorttype:"float"},
        {name:'value',index:'value', width:100, sorttype:"int", align:"right"}
    ],
    caption: "Lines Data",
    onSelectRow : function (id){
        $("#plot").trigger("hightliteLine", id-1);
    }
});

for(var i=0, j=model.length;i<=j;i++)
    $("#grid").jqGrid('addRowData',i+1,model[i]);

Тут, помимо общих настроек и установки модели, есть чудо метод который вызовет событие подсветки линии когда измениться текущий ряд в таблице.

Я думаю, я в ближайшее время не заброшу этот плагин так что ждите новую версию, возможно даже с документацией, пишите свои каменты, не забывайте читать мои бредни ;)

Смысл простой до нельзя - надо на стандартном календаре выделять определенные дни. Стандартными средствами этого естественно сделать нельзя. Хачить 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:{}
	}
});

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

Что же первое приходит в голову, когда видишь слово "comet", правильно - чистящее средство, потом комета, а оно почему-то означает технологию (хотя это, наверное, громко сказано, скорее паттерн) постоянного соединения с сервером. Все же в толстых книжках читали, что после того как сервер получил запрос и отдал ответ браузеру, он забывает, что к нему вообще кто-то обращался. А тут поседели умные люди и стали седыми. Нет, посидели и придумали идею, как заставить передавать браузеру информацию, изменившуюся на сервере.

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

И так с чего же начать, начать надо с того что выберем серверным языком php а клиентским как это не странно — javascript. Для того чтобы соединение не разрывалось, php скрипт должен все время работать, но тут мы встречаем два ограничения. Первое вполне логичное у нас нет бесконечного скрипта который бы все время что-то делал, да это и не надо, достаточно включить в код бесконечный цикл. А вот собственно второе ограничение уже куда более неприятное: по умолчанию php скрипт может выполняться только 30 секунд, после чего сервер выдает ошибку о зависании скрипта. С этим мы будем бороться, но об этом потом.

Теперь когда мы имеем серверную часть нужно придумать как она будет контактировать с клиентской. Для этого нужно написать еще какую-то функцию на javascript, которую бы мог вызвать сервер, причем это должно работать параллельным потоком относительно основной страницы. Для реализации параллельного запроса идеально подходит AJAX, но, к сожалению IE и Opera, не умеют корректно обрабатывать событие onreadystatechange==3 , поэтому для реализации параллельного потока в них используют iframe, а я буду использовать его и для остальных браузеров.

В общем пора переходить к делу. Для реализации порционного отдавания контента на php нужно использовать буферизацию, а то php будет хранить все у себя, аж пока не закончит работу скрипта, чего мы собственно пытаемся избежать. Дальше я приведу пример скрипта, который каждую секунду отдает браузеру команду обновить часы и текущее время.

// устанавливаем неограниченное время выполнения скрипта
ini_set('max_execution_time', 0);

// начинаем буферизацию
ob_start();
// ставим флаг отдавать буфер каждый раз как он больше не нужен
ob_implicit_flush(true);

// отдаем заголовки, чтобы избежать кэширования
header('Expires: Sut, 01 Jan 2000 00:00:00 GMT');
header('Last-Modified: '.gmdate('D, d M Y H:i:s').' GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Cache-Control: post-check=0, pre-check=0', false);
header('Pragma: no-cache');

// выбрасываем в поток килобайт пробелов, 
// это нужно из-за того, что php первый раз меньше отдавать не хочет
echo str_repeat(chr(32), 1024);
ob_get_clean();   

// в бесконечном цикле описываем то передачу информации в браузер
while(true){
	echo ""
		."<script type='text/javascript'>\n"
		."parent.$(parent.document).trigger('comet".$_GET['sid']."',['".date("D, d M Y H:i:s O")."']);\n"
		."</script>\n";
	ob_get_clean();
	// ждем 1 секунду до следующего обновления
	sleep(1);
}

А вот и пример работы этого скрипта находиться сразу под кодом.

Теперь давайте разберем, клиентскую часть, она тоже весьма не большая. Как я уже говорил, ее задача в основном создать iframe и приаттачить нужные события. Событий может быть всего два: обновление с новыми данными и разрыв соединения с сервером. Оба события необязательные, потому что сервер и сам вполне может отдавать готовый javascript код, а разорванное соединение можно восстанавливать, а можно предположить, что все обновления с сервера уже пришли и новых больше не будет.

(function($) {

	// конструктор объекта
	var comets = function(options){
		this.init(options);
	}
	
	// собственно сам объект
	comets.prototype = {
		comets : [], // итератор соединений
		options : { // массив функций по умолчанию
			connect:function(sid){
				// функция, выполняющаяся при разрыве соединения с сервером
			},
			update:function(data){
				// функция, вызываемая сервером с новыми данными
			},
			url:"", // адрес бэкэнда
		},
		init : function(options){
			var self = this, 
				comet = {},
				sid = self.comets.push([]); // i++

			// создаем реальный массив параметров
			$.extend(comet,self.options,options)
			
			// создаем iframe и соединение
			$("<iframe/>")
				.appendTo("body")
				.attr({src:comet.url+sid})
				.bind("load", function(){comet.connect.apply(this,[sid]);})
				
			// аттачим события, к ифрейму аттачить нельзя, так как он еще не загрузился
			$(document).bind("comet"+sid, function(event,data){comet.update.apply(this,[data])})
		}
	}

	$.fn.comets = function(options){
		// создаем новый comet
		new comets(options);
		
		// не нарушаем цепочку
		return this;
	}
})(jQuery);

Теперь надо передать в этот плагин (да я как всегда все делаю плагином под jQuery) наши функции.

$().comets({
	// функция которая обновит такст часов
	update:function(data){
		$("#clock").text(data);
	},
	// функция которая востановит соединение с сервером
	connect:function(sid){
		$(this).attr({src:"clock.php?sid="+sid});
	},
	// адресс бэкэнда
	url:"clock.php?sid="
});

Как я говорил в начале я расскажу как бороться с временем выполнения скрипта если вам недоступна функция ini_set(); Для этого надо узнать сколько времени может выполняться скрипт и прерывать его работу незадолго до этого времени. Если передать браузеру команду восстановить соединение, то этого можно не указывать в параметрах в javascript. Вносим правки в алгоритм работы скрипта:

// узнаем время рабы и отнимаем 5 секунд запаса
$metime = ini_get('max_execution_time') - 5;

// узнаем время начала и конца работы скрипта
$start = $stop = array_sum(explode(" ",microtime()));

ob_start();
ob_implicit_flush(true);
header('Expires: Sut, 01 Jan 2000 00:00:00 GMT');
header('Last-Modified: '.gmdate('D, d M Y H:i:s').' GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Cache-Control: post-check=0, pre-check=0', false);
header('Pragma: no-cache');

echo str_repeat(chr(32), 1024);
ob_get_clean();   

// по условию, что время начала больше чем время конца минус время исполнения прерываем процедуру
while($start > $stop-$metime){
	echo ""
		."<script type='text/javascript'>\n"
		."parent.$(parent.document).trigger('comet".$_GET['sid']."',['".date("D, d M Y H:i:s O")."']);\n"
		."</script>\n";
	ob_get_clean();
	$stop = array_sum(explode(" ",microtime()));
	sleep(1);
}

// echo "<script type='text/javascript'>window.location='".$_SERVER['PHP_SELF']."?sid=".$_GET['sid']."';</script>n";

Вот пример работы этого кода, только для наглядности я поставил обрыв соединения каждые 10 секунд.

Вот такие вот у меня получились простые комёты ;) , возможно, я их немного доделаю и опубликую, свежую версию, но это не сейчас.