CTAPbIu_MABP's BLOG » jqueryUI

jQuery UI: Customized datepicker

CTAPbIu_MABP — Tue, 11 Aug 2009 19:49:35 +0000

Написать этот код меня подтолкнул комментарий, но идея сделать такую плюшку была давно.

Смысл простой до нельзя - надо на стандартном календаре выделять определенные дни. Стандартными средствами этого естественно сделать нельзя. Хачить 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('' + dates[i].getDate() + '','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 UI: Progress Bar with custom event

CTAPbIu_MABP — Thu, 26 Mar 2009 14:29:21 +0000

Начитался Брэндона Аарона и решил создать небольшое практическое пособие для начинающих по пользовательским событиям (custom events). Напомню что пользовательские события это такие же события как onclick только запускает их не браузер а сам jQuery. Такими событиями являются, например, события "mouseenter", "mouseleave", "ready" и целый набор ajax'овых событий.

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







Progress Bar with custom event

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

jQuery UI: Google Gears local store setup

CTAPbIu_MABP — Wed, 25 Mar 2009 13:31:31 +0000

В одной из прошлых статей я рассказывал как совместить Modal Dialog и Progress Bar, теперь пришло время рассказать как это можно использовать. Есть такая штука как Google Gears это интернет акселератор предназначенный по большому счету для продуктов самого Google, таких как почта, календарь, ридер и т.д. Но Google предоставляет возможность устанавливать акселератор и на сторонние сайты, чем я сейчас и займусь. Самым простым видом акселерации является загрузка в кеш статических файлов, то есть картинок, скриптов и css стилей, хотя теоретически можно загружать и все остальное включая html самой страницы. Я покажу как сделать анимацию загрузки файлов в хранилище Google Gears.

Итак начну с начала, мне понадобиться скрипт который инициализирует Google Gears, он написан самим Google и является единственным официальным способом запустить Google Gears, и jQuery UI для создания модального диалога из прошлой статьи. Скрипт создаёт фабрику объектов с которой я буду работать дальше, хотя там и так подробно описано в комментариях. Дальше логика такая - нужно создать новый "склад" и передать все отобранные для кеширования файлы, обновляя после каждого файла ползунок загрузки. Поехали:







GoogleGears local store setup

Примера к сожалению не будет потому что даже если у когото из вас и установлен Google Gears, то у меня нечего особо кешировать, можете посмотреть как выглядит анимация в статье Modal Dialog и Progress Bar

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

jQuery 1.3.2 + jQueryUI 1.7.1

CTAPbIu_MABP — Fri, 20 Mar 2009 18:48:52 +0000

Вчера вышла новая версия jQueryUI 1.7.1 и я подумал что это хороший повод обновить сайт. Заодно поставил себе jQuery 1.3.2 вместо 1.3.1 и проверил на работоспособность все статьи. Больше всего я переживал что не будут работать DatePicker и Modal Dialog и Progress Bar и их придется равнять напильником, но все обошлось :).

Как я и обещал я держу все статьи на сайте свежими и актуальными!

jQuery UI: Modal Dialog и Progress Bar

CTAPbIu_MABP — Wed, 28 Jan 2009 19:55:02 +0000

Сегодня будет вторая статья из цикла о jQueryUI. На самом деле я не хочу вам рассказывать про Modal Dialog и Progress Bar, просто потому что я готовил эту статью с чувством что меня наебали. Наебали тем что оба эти виджета абсолютны не пригодны к реальному использованию, и если Modal Dialog еще как-то можно простить отсутствие у него свойства closeable, то отсутствие каких либо свойств кроме заполненности у ползунка простить нельзя.

Итак приступим к трепанации. Делаем ползунок на модальном не закрывающемся окошке с отображением процентов. Первый хак касается именно незакрываеймости окошка, поскольку параметрами убрать кнопку "Х" никак нельзя, начинаем стучать в бубен.



// создаем новый див
var dialog = $("")
	// и делаем из него диалог с параметрами
	.dialog({modal:true,title:"Заголовок",resizable:false,
		// делаем недоступной остальные элементы страницы
		overlay:{backgroundColor:'#000',opacity: 0.5,
		// одну кнопку все же добавим чтоб можно было все это безобразие закрыть
		buttons:{OK:function(){$(this).dialog('destroy').remove();}}
	})
	.parent()
	// вот он крестик :)
	.find(".ui-dialog-titlebar-close")
	.hide();

Родительский элемент приходиться брать потому что текущий указывает на тот див из которого мы построили Modal Dialog, а находиться он в самом центра этого самого Modal Dialog'a, чтобы текст этого дива сразу стал сообщением. В принципе удобно, но у нас тут немного другой случай.

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



.ui-progressbar-indicator{
	line-height:40px;
	position:absolute;
	text-indent:-15px;
	left:50%;
}



// это будет цифровой индикатор
var indicator = $("")
	.addClass("ui-progressbar-indicator")
	.text("50%")
	.appendTo(dialog),
// а это - ползунок
progressbar = $("")
	.progressbar({value:50})
	.appendTo(dialog);

Ну вот почти все готово, осталось собрать это все вместе и присоединить к какому то медленному процессу, индикацию которого мы будем показывать. К сожалению самый лакомый процесс загрузки файла мы не можем показать поэтому поставим обновление индикатора просто на таймер, по 10% каждые пол секунды. Когда процесс достигнет 100% модальное окошко просто исчезнет и страницей снова можно будет пользоваться :)







Modal Dialog + Progress Bar

PS: Как выяснилось при подготовке статьи метод "destroy" не до конца разрушает созданый "на лету" div и после него надо еще вызывать метод "remove", чтобы не засорять html.

jQuery UI: DatePicker

CTAPbIu_MABP — Mon, 29 Dec 2008 21:12:01 +0000

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

Давайте обрисуем наши потребности: нам нужен сдвоенный календарик выбора периода, чтобы дата начала периода не была больше даты конца периода и меньше какой-то границы, соответственно дата конца периода не должна быть меньше даты начала и больше сегодняшней. Для этого я набросал вот такой лаконичный код.

c по






Datapicker











c  
по