CTAPbIu_MABP's BLOG » YUI

-moz-box-shadow & -moz-transform

CTAPbIu_MABP — Tue, 17 Aug 2010 12:14:38 +0000

Ребята из YUI сделали песочницу для CSS3. А я поковырял и нашел косяки в FF 3.6/7.x. Смотреть в остальных браузерах не имеет смысла.


-moz-box-shadow:50px 50px 50px #FF4500;
-moz-transform:rotate(90deg);

background:none repeat scroll 0 0 #DDDDDD;
height:100px;
left:200px;
padding:10px;
position:absolute;
top:100px;
width:300px;

А вот и баг нашелся

Возвращаяюсь к началу...

CTAPbIu_MABP — Sun, 23 Mar 2008 13:32:55 +0000

	Это все про старый движок.

Я вот что подумал: я отвлекся от темы. На самом деле блог задумывался как описание того «как написать движок сайта на php», собственно на примере самого блога.

Так вот движок был написан где-то в январе-феврале 2007 года, за две с небольшим недели. Больше я к движку не прикасался. Связано это было не с тем что я закончил его писать и/или остался доволен результатами свое работы, а с тем что у меня закончился отпуск. В то время я работал в Servus Sistems Integration разработчиком пользовательских интерфейсов на JavaScript и к PHP вернулся только благодаря небольшому проекту от Alfa банка которому нужен был онлайновый калькулятор ипотеки. Этот калькулятор и реализовали на php+oracle. После его написания меня накрыло давнее (с времен работы на promsat) желание написать собственное движло.

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

Архитектура движка была выбрана фреймворковая то есть основой должно быть генерация страниц (страниц и списков) и раздача прав пользователям. Так например комментарии к страницам выполнены в виде модуля "цепляющегося" к самой странице.

С базой тоже все было не гладко надо было выбирать что использовать nested sets или adjustment lists и я выбрал nested sets. Для этого у человека по имени Кузьма Феськов была выклянчена свежая (v3.0) версия (которую я так до сих пор нигде не видел) библиотеки DbTree, хотя к сожалению не смотря на это она так и не вошла в движок.

Интерфейс сайта я сначала собирался сделать с помощью YUI, как раз примерно в это время появилась библиотека ExtJS тогда еще yui-ext и я с радостью начал в ней ковыряться, удачно сперев коментарии с блога Jack Slocum'a. Потом уже я отказался от этой идеи из-за убогости моего исполненя и того что автор перекраивал свое творение изо дня в день, а мне не хватало элементарно познания JavaScript, чтобы за ним хоть как-то угнаться. Так вот дизайн я решил взять портированый под Seditio c движка Joomla, а точнее спертый с сайта Rocket Theme моим другом Asmo.

Так вот я решил реанимировать движок и дописать спустя почти год. По памяти поставив apache+php+mysql всего за 40 минут (неутешительный результат), я запустил сайт локально (странно заработал с первого раза, подозреваю грандиозный подвох) и открыв код удивился как это все вообще работает. Сейчас я собираюсь как следует подрихтовать это чудовище на предмет навигации, а также дописать авторизацию и сделать нормальные коментарии.

YUI: extention

CTAPbIu_MABP — Mon, 11 Dec 2006 13:16:40 +0000

Автор Jack Locum предлагает верстать с помощью этой либы сайты. на самом деле это очень красиво но совершенно не удобно! сейчас я это докажу

Предположим что у нас есть localhost и у него по адресу /yui/ лежит YUI а по адресу /yui-ext/ собственно сама библиотека

Тогда создаем простой html код




...


...

В хедере мы разместим наш скрипт

Теперь представим, что мы хотим создать класическую трехполосную ленту, с шапкой и футером. в левой полосе прсто коллонка, по центру две закладки, две, а справа коллонка поделена на три части горизонтально; подвал по умолчанию отключен

для всего этого мы в body положим основной контейнер

...

а в него по очереди все блоки которые нам понадобятся


west
north
autoTabs
center2
center1
  
content1
content2
content3
  
inner1
inner2
inner3
sqldebug
gpcdebug

Теперь приспупаем писать инициализатор


        // определяем функцию которая будет стартовать наш скрипт
	Example = function(){
	        // в теле пусто 
	        return {
	            // зато она возвращает объект с одним свойством init
	            init : function(){
	               // определяем новый layout.
	               // кажждый объект BorderLayout имеет 5 свойств north west east south center
	               var layout = new YAHOO.ext.BorderLayout(document.body, {
	                    hideOnLayout: true,
	                    // говорим что north
	                    north: {
	                        // не resizable
	                        split:false,
	                        // с шириной 100
	                        initialSize: 100,
	                        // без титлбара
	                        titlebar: false
	                    },
	                    // west 
	                    west: {
	                        // resizable
	                        split:true,
	                        // появляется с размером 200
	                        initialSize: 200,
	                        // минимум при растягивании 175 
	                        minSize: 175,
	                        // максимум 400
	                        maxSize: 400,
	                        // с титл баром
	                        titlebar: true,
	                        // с кнопкой закрыть
	                        collapsible: true,
	                        // анимированный 
                            animate: true
	                    },
	                    east: {
	                        split:false,
	                        initialSize: 200,
	                        minSize: 175,
	                        maxSize: 400,
	                        titlebar: true,
	                        collapsible: true,
                            animate: true
	                    },
	                    south: {
	                        split:true,
	                        initialSize: 100,
	                        minSize: 100,
	                        maxSize: 200,
	                        titlebar: true,
	                        collapsible: true,
                            animate: true,
	                    // с скролбаром если надо
                            autoScroll:true
	                    },
	                    center: {
	                        // закладки сверху
	                        tabPosition: 'top',
	                        autoScroll:true
	                    }
	                });
	                // начинаем создавать елементы слоя
	                layout.beginUpdate();
	                // северный (хедер)
	                layout.add('north', new YAHOO.ext.ContentPanel('north', 'North'));
	                // западный с надписью в титлбаре Navigation Panel
			layout.add('west', new YAHOO.ext.ContentPanel('west', {title: 'Navigation Panel'}));
	                // перввая закладка центра
	                layout.add('center', new YAHOO.ext.ContentPanel('center1', {title: 'Main block', closable: false}));
	                // вторая закладка центра
	                layout.add('center', new YAHOO.ext.ContentPanel('center2', {title: 'Center Panel', closable: false}));
	                // по умолчанию открыта первая закладка
	                layout.getRegion('center').showPanel('center1');
	                
	                /*
	                Теперь рилическое отступление по поводу того чем неудобна эта либа
	                нельзя создать 5 блоков друг под другом можно только 3
	                но можно в каждом из трех еще по три и в каждом следующем еще по три
	                */

	                // создаем внутренний слой правого столбца
	                var innerLayout = new YAHOO.ext.BorderLayout('content1', {
	                    // нижняя часть
	                    south: {
	                        //split:true,
	                        initialSize: 100,
	                        collapsible:true,
	                        titlebar: true
	                    },
	                    // центр пуст
	                    center: { }
	                });
	                // создаем нутренний елемент внутреннего елемента 'юг'
	                var southInnerLayout  = new YAHOO.ext.BorderLayout('content2', {
	                    // только центр
	                    center: { }
	                });
	                
	                // добавляем во нутренний елемент внутреннего елемента 'юг' центральный блок
	                /*
	                вот тут былобы неплохо осознавать обектную модель 	                
	                происходящего потому что словами это обьяснять очень сложно
	                */

	                southInnerLayout.add('center', new YAHOO.ext.ContentPanel('inner1', {title:'More Information', closable:true}));

	                // создаем нутренний елемент внутреннего елемента 'центер'
	                var centerInnerLayout  = new YAHOO.ext.BorderLayout('content3', {
	                    south: {
	                        //split:true,
	                        initialSize: 100,
	                        collapsible:true,
	                        titlebar: true
	                    },
	                    center: { }
	                });
	                
	                // добавляем во нутренний елемент внутреннего елемента 'центер' центральный блок
	                centerInnerLayout.add('center', new YAHOO.ext.ContentPanel('inner2', {title:'More Information', closable:true}));
	                // добавляем во нутренний елемент внутреннего елемента 'центер' нижний блок
	                centerInnerLayout.add('south', new YAHOO.ext.ContentPanel('inner3', {title:'More Information', closable:true}));
	                // закрепляем к внутреннему елементу его 'детей' к блоку 'юг'
	                innerLayout.add('south', new YAHOO.ext.NestedLayoutPanel(southInnerLayout, {title:'More Information', closable:true}));
	                // закрепляем к внутреннему елементу его 'детей' к блоку 'центер'
	                innerLayout.add('center', new YAHOO.ext.NestedLayoutPanel(centerInnerLayout, {title:'More Information', closable:true}));

	                // закрепляем за елементов east (оноже левая коллонка) все то что мы токачто насоздавали, заголовок More Information, и кнопка закрыть
	                layout.add('east', new YAHOO.ext.NestedLayoutPanel(innerLayout, {title:'More Information', closable:true}));
	                // вот тут по вашему желанию подвал
	                if (false)
	                {
	                        // первая закладка
	                	layout.add('south', new YAHOO.ext.ContentPanel('sqldebug', {title: 'SQL-Debug', closable: true}));
	                        // и вторая
	                	layout.add('south', new YAHOO.ext.ContentPanel('gpcdebug', {title: 'GPC-Debug', closable: true}));
	                        // показываем вторую
	                	layout.getRegion('south').showPanel('gpcdebug');
	                }
	                // закрепляем елементы слоя
	                layout.endUpdate();
	           }
	     }
	       
	}();// конец функции  Example
       // стартуем Example при полной загрузке страницы 
	YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);

Теперь еще одна поправка: смотрите (кто сделал конечно) вся левая коллонка отезжает на лево, вся правая - на право.

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

а и вот еще при скрытии/закрытии блока используется комманда


Example.layout.getRegion('center').hidePanel('center1');

где center и center1 координаты (id) радителей блока, также его можно и показать прилепив функцию на ссылку или кнопку


Example.layout.getRegion('center').showPanel('center1');

PS ну вот и все ребята, пример рабочий можете пробовать, писем, пожеланий, комментов и апллодисментов конечноже не надо!!!

PSS спасибо всем кто читал!!!

YUI: autocomplete

CTAPbIu_MABP — Tue, 28 Nov 2006 14:25:06 +0000

Что такое AJAX, наверное, уже знают все. (кто не знает, идет гуглить), А что такое YUI я рассказывал в прошлой статье

Итак, автокомплит это технология, по которой данные взятые, например из аджакса (это совершенно не обязательно) предлагаются пользователю для быстрого заполнения полей формы. Например, пользователь пишет в поле "город" несколько букв - "Сан" ему будут предложены варианты "Санкт-Петербург", "Сан-Франциско" и "Сан Ремо" и пользователь быстро может выбрать мышкой или с клавиатуры то что ему нравится.

Проблема один - AJAX. Надо писать frontend (javascript) приложение, для клиента основанное на классе JsHttpRequest и backend (например, на php) приложение с запросом к БД

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

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

подключаем либу

и css


#ysearchmod {position:relative;padding:1em;}
#firstname_root {z-index:3000;} /* for IE z-index of absolute divs inside relative divs issue */
#secondname_root {z-index:2000;} /* for IE z-index of absolute divs inside relative divs issue */
#lastname_root {z-index:1000;} /* for IE z-index of absolute divs inside relative divs issue */
.yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
.ysearchquery {position:absolute;right:10px;color:#808080;z-index:10;}
.yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
ul {padding:5px 0;width:100%;}
li {padding:0 5px;cursor:default;white-space:nowrap;}
li.yui-ac-highlight {background:#a0a0a0;}
li.yui-ac-prehighlight {background:pink;}

Для тех кто заметил что этот css сильно отличается от предлагаемого YAHOO объясняю - так как они описывают каждый элемент уже при трех полях на ajaxe css станет пухлым и дохлым поэтому я вынес его в JavaScript

И еще на заметку я буду предлагать заполнять ФИО

Последний штрих рисуем HTML



А теперь в тегах <_script>...<_/script> описываем загрузчик, он же frontend приложение


// определяем именное пространство
YAHOO.namespace("AutoComplete");
/*
Грубо говоря если вы определите YAHOO.namespace("XXX");
то следующая строчка будет выглядеть так
YAHOO.XXX = function(input){
*/

// конструктор
YAHOO.AutoComplete = function(input){
var oACDS;
var oAutoComp;
var oDiv = null;

	// CSS, вот сюда то я и вынес все излишнее свойства
	if (oDiv=document.getElementById(input))
	{
		var rDiv = document.getElementById(input+'_root');
		var cDiv = document.getElementById(input+'_conteiner');
		oDiv.style.position = "absolute";
		oDiv.style.width = "100%";
		rDiv.style.height = "2em";
		rDiv.style.position = "relative";
		rDiv.style.margin_bottom = "1.5em";
		rDiv.style.width = "100%";
		cDiv.style.position = "absolute";
		cDiv.style.top = "1.7em";
		cDiv.style.width = "100%";
	}


    // заполняем первый объект oACDS, он у нас отвечает за AJAX
    // адресс backend'a с параметрами
    oACDS = new YAHOO.widget.DS_XHR("/backend.php", ["n", "t"]);
    // вид ответа - простой текст - по одному варианту на строку
    oACDS.responseType = YAHOO.widget.DS_XHR.TYPE_FLAT;
    // кеширование
   oACDS.queryMatchSubset = true;
    // время кеширования 60 сек
    oACDS.maxCacheEntries = 60;

    // этот параметр отвечает за дополнительные параметры в url, который запрашивается
    //тоесть вместо /backend.php данные будут посланы на /backend.php?active=имя_поля
    oACDS.scriptQueryAppend = '&active=' + input;

    //заполняем второй объект отвечающий за autocomplete, ему по большому счету нужно только имя поля в
    //котором должен работать скрипт
    oAutoComp = new YAHOO.widget.AutoComplete(input,input+'_conteiner', oACDS);
    // разделитель (по умолчанию дописывает в конце выбранного варианта ';')
    oAutoComp.delimChar = "";
    // задержка в секундах до отправки запроса
    oAutoComp.queryDelay = 0;
    // минимальная длина строки перед поиском
    oAutoComp.minQueryLength=1;
    // имя класса для выделенного варианта ответа
    oAutoComp.prehighlightClassName = "yui-ac-prehighlight";
    // отключает автокомплит в браузере чтоб он не мешал
    oAutoComp.allowBrowserAutocomplete = false;
    // можно еще поизвращаться с анимацией, но это вы сделаете сами

};
//ну и собственно стартуем скрипт по разу на каждое поле
YAHOO.AutoComplete('firstname')


Теперь backend надо написать, да?!


// я полностью писать не буду, просто объясню. Данные из аджакса приходят в кодировке UCS-2BE поэтому 
// ее надо перекодировать в win-1251

// таблица символов
$unicode_to_cp1251_tbl = array(
	0x0402 => "x80",	0x0403 => "x81",	0x201A => "x82",	0x0453 => "x83",
	0x201E => "x84",	0x2026 => "x85",	0x2020 => "x86",	0x2021 => "x87",
	0x20AC => "x88",	0x2030 => "x89",	0x0409 => "x8A",	0x2039 => "x8B",
	0x040A => "x8C",	0x040C => "x8D",	0x040B => "x8E",	0x040F => "x8F",
	0x0452 => "x90",	0x2018 => "x91",	0x2019 => "x92",	0x201C => "x93",
	0x201D => "x94",	0x2022 => "x95",	0x2013 => "x96",	0x2014 => "x97",
	0x2122 => "x99",	0x0459 => "x9A",	0x203A => "x9B",	0x045A => "x9C",
	0x045C => "x9D",	0x045B => "x9E",	0x045F => "x9F",	0x00A0 => "xA0",
	0x040E => "xA1",	0x045E => "xA2",	0x0408 => "xA3",	0x00A4 => "xA4",
	0x0490 => "xA5",	0x00A6 => "xA6",	0x00A7 => "xA7",	0x0401 => "xA8",
	0x00A9 => "xA9",	0x0404 => "xAA",	0x00AB => "xAB",	0x00AC => "xAC",
	0x00AD => "xAD",	0x00AE => "xAE",	0x0407 => "xAF",	0x00B0 => "xB0",
	0x00B1 => "xB1",	0x0406 => "xB2",	0x0456 => "xB3",	0x0491 => "xB4",
	0x00B5 => "xB5",	0x00B6 => "xB6",	0x00B7 => "xB7",	0x0451 => "xB8",
	0x2116 => "xB9",	0x0454 => "xBA",	0x00BB => "xBB",	0x0458 => "xBC",
	0x0405 => "xBD",	0x0455 => "xBE",	0x0457 => "xBF",	0x0410 => "xC0",
	0x0411 => "xC1",	0x0412 => "xC2",	0x0413 => "xC3",	0x0414 => "xC4",
	0x0415 => "xC5",	0x0416 => "xC6",	0x0417 => "xC7",	0x0418 => "xC8",
	0x0419 => "xC9",	0x041A => "xCA",	0x041B => "xCB",	0x041C => "xCC",
	0x041D => "xCD",	0x041E => "xCE",	0x041F => "xCF",	0x0420 => "xD0",
	0x0421 => "xD1",	0x0422 => "xD2",	0x0423 => "xD3",	0x0424 => "xD4",
	0x0425 => "xD5",	0x0426 => "xD6",	0x0427 => "xD7",	0x0428 => "xD8",
	0x0429 => "xD9",	0x042A => "xDA",	0x042B => "xDB",	0x042C => "xDC",
	0x042D => "xDD",	0x042E => "xDE",	0x042F => "xDF",	0x0430 => "xE0",
	0x0431 => "xE1",	0x0432 => "xE2",	0x0433 => "xE3",	0x0434 => "xE4",
	0x0435 => "xE5",	0x0436 => "xE6",	0x0437 => "xE7",	0x0438 => "xE8",
	0x0439 => "xE9",	0x043A => "xEA",	0x043B => "xEB",	0x043C => "xEC",
	0x043D => "xED",	0x043E => "xEE",	0x043F => "xEF",	0x0440 => "xF0",
	0x0441 => "xF1",	0x0442 => "xF2",	0x0443 => "xF3",	0x0444 => "xF4",
	0x0445 => "xF5",	0x0446 => "xF6",	0x0447 => "xF7",	0x0448 => "xF8",
	0x0449 => "xF9",	0x044A => "xFA",	0x044B => "xFB",	0x044C => "xFC",
	0x044D => "xFD",	0x044E => "xFE",	0x044F => "xFF",
);

// функция поиска по таблице
function utf8_to_cp1251($s) {
	$tbl = $GLOBALS['unicode_to_cp1251_tbl'];
	$uc = 0;
	$bits = 0;
	$r = "";
	for($i = 0, $l = strlen($s); $i < $l; $i++)
	{
		$c = $s{$i};
		$b = ord($c);
		if($b & 0x80) 
		{
			if($b & 0x40)
			{
				if($b & 0x20) 
				{
					$uc = ($b & 0x0F) << 12;
					$bits = 12;
				} else {
					$uc = ($b & 0x1F) << 6;
					$bits = 6;
				}
			} else {
				$bits -= 6;
				if($bits)
				{
					$uc |= ($b & 0x3F) << $bits;
				} else {
					$uc |= $b & 0x3F;
					if($cc = @$tbl[$uc]) 
					{
						$r .= $cc;
					} else {
						$r .= '?';
					}
				}
			}
		} else {
			$r .= $c;
		}
	}
	return $r;
}

// применяем функцию ко всем входящим данным
foreach ($_REQUEST as $key => $value){
    $_REQUEST[$key] = utf8_to_cp1251($value);
}

// из всех данный нужно только 2
$like = $_REQUEST['query'];
$field = $_REQUEST['active'];

// соединяемся с БД
mysql_connect('localhost','user','pass');
mysql_select_db('namedatabase');

//Ну и собственно спрашиваем есть ли похожие имена
$sql = mysql_query("SELECT ".$field." AS suggestion FROM table_name WHERE ".$field." LIKE '$like%' ORDER BY ".$field."LIMIT 50");

// выводим списком ответ
while($result = mysql_fetch_assoc($sql)){
    echo $result['suggestion']."n";
}


Вот, пожалуй, и все. Кстати очень тяжелая (много килобайт весит) либа. Subsys от Котерова намного легче и практичнее, но не имеет автокомплита. Попытки втиснуть его туда насильно увенчались успехом только для FF1.5 и Opera8.0 , IE ругался



YUI: calendar
CTAPbIu_MABP — Mon, 27 Nov 2006 13:15:14 +0000
Для тех, кто не знает что такое YUI ссылка на  мат. часть

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

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

Итак вот такой html







и начинаем подключать библиотеки








и css без него ничего не выйдет





Потом создаем свой скрипт <_script>... Все что я пишу дальше идет именно внутри этого тега


/* 
Задача: нарисовать календарь, который появляется в указанном месте по нажатию на кнопку 
и исчезает после выбора даты, результат выбора попадает в форму в формате YYYY-MM-DD.
Субботу и воскресенье выбирать нельзя, прошедшие дни тоже. 
Ну и я думаю, не стоит заставлять пользователей учить албанский
*/

// создаем новую зону видимости YAHOO.calendar
YAHOO.namespace("calendar");

// создаем загрузчик

function init() {
    // создаем новый объект салендаря с именем cal и загружаем его в div calContainer
    YAHOO.calendar.cal = new YAHOO.widget.Calendar("cal","calContainer", { 
        // средние имена дней (по умолчанию длинные) 
        LOCALE_WEEKDAYS:"medium",
                 // минимальная дата - сегодня
                mindate: new Date(),
                // текущая дата сегодня
                pagedate: new Date() 
        });
	/* 
	массив параметров при создании можно вынести и отдельно как показано ниже но я решил показать оба способа
	*/

	YAHOO.calendar.cal.cfg.setProperty("START_WEEKDAY ",   1); // первый день недели - понедельник а не воскресенье

	// Русифицируем календарь
	YAHOO.calendar.cal.cfg.setProperty("MONTHS_SHORT",   ["янв", "фев", "мар", "апр", "май", "июн", "июл", "авг", "сен", "окт", "ноя", "дек"]); 
	YAHOO.calendar.cal.cfg.setProperty("MONTHS_LONG",    ["январь", "февраль", "март", "апрель", "май", "июнь", "июль", "август", "сентябрь", "октябрь", "ноябрь", "декабрь"]); 
	YAHOO.calendar.cal.cfg.setProperty("WEEKDAYS_MEDIUM",["вск", "пон", "втр", "срд", "чет", "пят", "суб"]); 
	YAHOO.calendar.cal.cfg.setProperty("WEEKDAYS_LONG",  ["воскресенье", "понедельник", "вторник", "среда", "четверг", "пятница", "суббота", "воскресенье"]); 

	// функция которая получает координаты html элемента
	var getAbsPos = function  (p) {
		var s = { x:0, y:0 };
		while (p.offsetParent)
		{
			s.x += p.offsetLeft;
			s.y += p.offsetTop;
			p = p.offsetParent;
		}
		return s;
	}

	// получаем координаты поля куда надо ввести дату и выводим на его месте календарь, можно выводить под или над ним
	var calCon = document.getElementById("calContainer");
	var calBut = document.getElementById("calDate");
	// функцию getAbsPos я обьясню чуть ниже
	calCon.style.top = getAbsPos(calBut).y + 'px';
	calCon.style.left = getAbsPos(calBut).x + 'px';

	// пишем обработчик события выбора дяты
	var handleSelect function (type,args,obj) {
		var year = date[0][0][0], month = date[0][0][1], day = date[0][0][2];
		
		var txtDate1 = document.getElementById("calDate");
		// формат даты YYYY-MM-DD
		txtDate1.value = year + "-" + month + "-" + day;
		
		// прячем календарь
		var txtCon = document.getElementById("calContainer");
		txtCon.style.display = "none";
	}

	// устанавливаем событие при выборе даты
	YAHOO.calendar.cal.selectEvent.subscribe(handleSelect, YAHOO.calendar.cal, true);
	YAHOO.calendar.cal.render();

	// перехват нажатия кнопки - вызов календаря
	YAHOO.util.Event.addListener("calShow", "click", YAHOO.calendar.cal.show, YAHOO.calendar.cal, true);

	// отключаем субботу и воскресенье
	var myCustomRenderer = function(workingDate, cell) { return YAHOO.widget.Calendar.STOP_RENDER; }
	YAHOO.calendar.cal.addWeekdayRenderer(7, myCustomRenderer);
	YAHOO.calendar.cal.addWeekdayRenderer(1, myCustomRenderer);

	YAHOO.calendar.cal.render();
}



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

PS. вопросы не задавать, почту не писать, google вам поможет.
PSS. меня вот спросили чем эта библиотека лучше чем например вот эта - ответ может и не чем, просто она есть!