Deerua about Coding -> Заметки с тегом «framework»

После 1.4 сразу выходит 1.4.1 и скоро будет 1.4.2 :)
Такая активность подтолкнула много других людишек, и было создано много полезных ресурсов и обновлено старых:

• jQuery souse viewer — каждую функцию теперь быстро и удобно можно найти
 
• jQuery API — теперь в удобном формате
• jQuery UI — скоро 1.8 и новые плюшки
 
• jQuery Documentation — теперь с человеческим лицом
• jQuery Meetups Ukraine — милости просим, вопросы, предложения. Когда будет много людишек, можно будет организовать конференцию

ps: больше инфы о новом Jq тут

Всем привет :)

По нужде добавил обработчики мыши (клик, влёт, вылет) и функцию обработки селектора — в простонародье each(). Рание немного модифицировал селектор + расширил обработку параметров, что бы можно было работать с each ;)

Работает each() вот так:

u$("#chars td").each(function(){
	u$(arguments[0]).onmouseover(function(){
		alert(arguments[0].tagName);
	});
});

Обращаться к передаваемому обжекту пока через arguments[0], в планах сделать через this, но там нужно сделать хитрые манипуляции + свой собственный eval() через добавление к заголовку джаваскрипта с контентом самой функции ;)

Для примера прикрутил к предыдущей статье ZeroClipboard, что бы при клике Копировать содержимое ячейки ;) Там всё просто:

• создаём объект типа ZeroClipboard.Client()
• через each() вешаем на onmouseover() обработчик
• дальше уже ZeroClipboard вешает свой флешовый click() по срабатыванию которого и происходит копи-в-буфер

• Посмотреть Пример
• Почитать о minijQuery
• Скачать minijQuery 0.0.2.0a

О, делал УТФ8 проектик, а тут мои скриптики перестали работать + некоторые крохотные правочки.

• Посмотреть minijQuery
• Посмотреть habraAlert

Сделал их в юникс кодировочке, а не дос ;)

ps: новый Джиквери 1.4 шикарен, скорость фантастическая… Вот ещё материальчики

• Много инфы о новом jquery 1.4 (инглиш)
• 15 фенечек нового jQuery

Появилось много нового и интересного.
Главная особенность, он стал ещё быстрее (куда уж больше ;)

Посмотреть списочек нового, можно прям на его сайте.

Почитать удобную шпаргалку по 1.4 можно здесь
Перенёс её себе, а то вдруг сайт помрёт ;)

• Посмотреть шпору

ps: так же, в честь дня рождения и выхода новой версии стартанул проект посвящённый последней, читать здесь

Как и обещал

• декрементные циклы
• лёгкая оптимизация
• добавить простейшую рекурсию, для более вложенных запросов (запросы через запятую — селектор отдельной функцией);
• добавить методы / выкинуть второй параметр ( chains );
• расширить функционал изменением стилей;

Ограничения (поддерживает только двухуровневый запрос):

• .класс
• тэг.класс
• #конетйнер .класс
• #конетйнер тэг.класс
• #конетйнер тэг
• допустимый запрос, допустимый запрос
• всё остальное идёт боком ;)

Планы на будующее:

• расширение функционала селектора tinyCSSSelector (inputs, сложные многоуровневые)
• Подключение других селекторов (yass, sizzle)
• добавить новых функций разных (самые часто используемые мной в джиквери)
• добавить простейшие обработчики событий (click, mouse)
• добавить поддержку частных(custom) функций
• сделать each
• добавить простейшую анимацию (по определённым свойствам)
• кеширование о_О

• Начало пути
• Посмотреть демо
• Скачать minijQuery.js

Есть много проектов, где функционал Джиквери слишком излишен, и используется от сили 1% возможностей? Зачем тогда тянуть 55кб? Если тот проект вместе с графикой в два раза меньше ;)

Недолго подумав, решил начать писать нечто кастомное. Название всплыло само собой minijQuery. Сразу скажу, для работы использует $ и addLoadEvent, что бы сразу было кроссбраузерно и красиво ;)

minijQuery = function(pattern, action) {
	// пустой патерн, уходим, возможно скоро закоментируется
	if (typeof pattern != "string" || pattern.length < 1) return;
	// объявляем дефолтный выбор
		var _target = document.body; // контейнер всё боди
		var _select = "*"; // выбераем все теги
		var _class = false; // класс
	// разбиваем на части запросик
	var selector = pattern.split(" ");
	var parts = selector.length;
	// дальше по сценарию
	switch (parts){
		case 1: //если всего один, подразумеваем тег.класс
			var sel = selector[0].split("."); 
			_select = sel[0]; 
			_class = sel[1];
			break;
		default: // если больше, значит есть ещё и #контейнер
			var sel = selector[0].split("#");
			_target = $(sel[1]);
			var sel = selector[1].split(".");
			_select = sel[0]; 
			_class = sel[1];
	}
	// дальше просто перебераем в контейнере, все нужные тэги
	var tag_s = _target.getElementsByTagName(_select);
	for(var i=0; i < tag_s.length; i++) {
		if (tag_s[i].className == _class || !_class) {
			// совпал класс, или не задан выполняем действие
			// пока только элементарные
			// скоро они преврятятся в методы 
			switch (action) {
				case "hide": tag_s[i].style.display = 'none'; break;
				case "show": tag_s[i].style.display = 'inline'; break;
				case "toggle": 
					var _display = tag_s[i].style.display;
					tag_s[i].style.display = 
						_display != 'none' || _display.length < 1
						 ? 'none' : 'inline'; 
					break;
			}
		}
	}
	// возвращаем список выбраных элементов
	return tag_s;
}

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

Ограничения (поддерживает только двухуровневый запрос):

• .класс
• тэг.класс
• #конетйнер .класс
• #конетйнер тэг.класс
• #конетйнер тэг
• всё остальное идёт боком ;)

В планах:

• добавить простейшую рекурсию, для более вложенных запросов;
• расширить функционал изменением стилей;
• добавить методы / выкинуть второй параметр;

• Посмотреть Пример
• Скачать minijQuery.js

Для закругления уголков, есть замечательная либа Rocon от Сергея Чикуёнка (надеюсь правильно написал).

rocon дожидается загрузки DOM-дерева документа и ищет все элементы с классом rcN, где N — радиус скругления, и добавляет им скругленные уголки.

Что же она делает? :) Для Мозилки и ВебКита эта либа, приделывает цсс-свойства уголков, если конечно данная версия браузера поддерживает эти свойства (дальше SVG). Для Жоперы и ИЕ используется канвас.

Работает на отлично, просто подключаете в шапке, и не забываете о классе rcN, где N от 1 до Границ вашей фантазии ;)

• Посмотреть Пример на сайте производителя

Всё время забываю, что да как, потихоньку отучаюсь от алертов :)

// ***** Переменные *****
$(id); // getElementById
$$(selector); // css-css3 selectors
$x(selector); // xpath selector
keys(Object); // Массив названий всех свойств объекта
values(Object); // Массив значений всех свойств объекта


// ***** Вывод в консоль *****
console.log('Вывод в консоль');
console.debug('показывает справа файл и строку из которой был вызван %s', string);
console.info("зелёный месседж %i", integer);
console.warn("жёлтый месседж %f", float);
console.error("красный месседж %o", object);
console.group("Груповые сообщения");
	console.log("сообщение");
	console.log("сообщение");
console.groupEnd();
// А что в нашем объекте?
console.dir({a: 'test', b: function() {return true;}});
// А что в нашем элементе?
console.dirxml($$('.class'));
// true or false message ;) Проверка булей
console.assert(1 === true);
// Что же за функции у нас вызывались? о_О
console.trace();
// Вставляем любой цикл внутрь и меряем ;)
console.time("Цикл");
console.timeEnd("Цикл");
// Очистим консоль
clear(); 


// ***** Отладка *****
debug(function); // Установить breakpoint
undebug(function); // Снять breakpoint
monitor(function); // Установить logger вызова функции
unmonitor(function); // Снять logger вызова функции
monitorEvents(Object); // Установить logger вызова events
unmonitorEvents(Object); // Снять logger вызова events
// Список событий:
// mouse, key, composition, contextmenu, drag, focus, form, 
// key, load, mouse, mutation, paint, scroll, text, ui, xul

Перерыл пол интернета в поисках этого «пнгфикса», вариаций более-менее достойных было с 10, но на сложной вёрстке они убивали дизайн полностью, и фиксили не до конца, кроме одного!

Представляю, это DD_belatedPNG (сейчас версия 0.0.7альфа но он уже может всё!) и как они говорят, это «Medicine for your IE6/PNG headache!»

• Скачать DD_belatedPNG

Что же он может:

• фиксить все png, как просто картинки (<img>) так и динамически вставляемые;
• фиксить все фоновые png (как одиночные так и повторяющиеся) для любых тегов, при этом нормально обрабатывается background-position and background-repeat;
• фиксить инпут в виде картинки (<INPUT type=«image»/>);
• Автоматически добавляет позишон:релейтив (для ИЕ6 очень важно);
• не использует картинки (blank1px.gif) для фиксов и технологию ДиректИкса (filter:progid:DXImageTransform.Microsoft.AlphaImageLoader), то есть нужен только джаваскрипт! Использует технологию MS, что называется VML (//Vector Markup Language//);
• после фикса, у всех элементов сохраняется кликабельность;
• не нужно уродовать css с помощью **behavior: url**
• + он фиксит :hover для ИЕ6!

Есть одно но! К тегам <TR> и <TD> лучше не применять ;) да и вообще кому нужна вёрстка на таблицах ;)

Рецепт:
Скачайте Джаваскрипт, положите в корень сайта например и подключаете

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
  /* EXAMPLE */
  DD_belatedPNG.fix('.png_bg');
  
  /* string argument can be any CSS selector */
  /* .png_bg example is unnecessary */
  /* change it to what suits you! */
</script>
<![endif]-->

Подключаете только для ИЕ6, и только для нужных элементов! Оптимизирован для ИЕ6! Может выбирать как по классам, так и по айди, так и просто по тегам, кому как удобно! Например я использовал такое подключение %) DD_belatedPNG.fix(’img, div, li, a’);, так как дизайн был полностью из пнгшек!

зы: DD_belatedPNG is free software under the MIT License.
ззы: Кто не хочет нагружать страницу каким-либо джаваскриптом, для того есть ещё один метод, и называется он

• PNG8 с альфа каналом.

Вот тут можно скачать YASS, который поможет быстрее всех выбрать все нужные DOM элементы по маске!
как использовать? :) всё просто:

_('a.link'); // выбрать все теги <a> с class="link"
_('.link span'); //выбрать все теги <span> внутри тега с class="link"
_('p'); //выбрать все теги <p>
_('#p'); //выбрать все теги с id="p" 
_('#p .link'); //выбрать все теги с class="link" внутри тега с id="p"
_('#p #sp1'); //выбрать все теги с id="sp1" внутри тега с id="p"
_('p#p'); //выбрать все теги <p> с id="p"
_('p a'); //выбрать все теги <a> внутри тега <p>
_('.link'); //выбрать все теги с class="link"
_('.link #sp1'); //выбрать все теги с id="sp1" внутри тегов с class="link"
_('img'); //выбрать все теги <img>
_('body p img'); //выбрать все теги <img> внутри тега <p>, что внутри <body>
_('a, img'); // выбрать все теги <a> и <img>

скачать 0.1ю версию для ознакомления с принципом работы 6Kb (русские комментарии)