Wonderlog - Web development life metas and stuff

jQuery.fn репост для памяти

Каждый кто сталкивался с написанием собственных плагинов на jQuery задавал вопрос — "В чем различие между объявлением функций через jQuery и jQuery.fn?".

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

Пример 1.

jQuery.sayHello = function() {
  alert('Привет! Найдено ' + this.length + 'элементов' );
}

$('div').sayHello(); // ничего не происходит

Пример 2.

jQuery.fn.sayHello = function() {
  alert('Привет! Найдено ' + this.length + 'элементов' );
}

$('div').sayHello(); // Выводит "Привет! найдено ХХ элементов", где ХХ - это количество найденных элементов на странице

Если запустить первый пример, то произойдет одно из двух событий — браузер выдаст ошибку (например, если у Вас установлен FireBug) либо не выдаст ничего. А если запустить второй пример, то на экране появится сообщение о количестве найденных элементов.

Прежде чем делать какие-либо выводы, приведу еще один пример:

jQuery.sayHello = function(elem) {
  alert('Привет! Найдено ' + elem.length + 'элементов' );
}

jQuery.sayHello($('div'));

В данном примере, будет выдано сообщение о количестве найденных объектов.

Думаю теперь у нас достаточно информации, чтобы сделать некоторые выводы:

Вывод 1: Если задать функцию через jQuery.fn, то она будет работать с элементами найденными через функцию $(). Контекст этой функции будет содержать выбранные элементы;

Вывод 2: Если задать функцию через jQuery, то к ней можно обратиться только через глобальный объект jQuery. В таком случае контекст функции будет указывать на глобальный объект window.

Таким образом, если нужно написать плагин, который будет работать только с выбранными объектами, то нужно его создавать вjQuery.fn, а если нам неважно какие элементы страницы были выбраны, то лучше создавать функцию через jQuery.

via http://www.ajaxtips.ru/blog/javascript/16.html

Jquery и стильный select box

Пожалуй, это наконец то, что я искал)

http://jquerystyle.com/2009/08/24/jquery-ui-selectmenu

Нормальная реализация под jQuery UI с поддержкой тем и массой хороших вариантов, включая optgroups. Куль)

Кавычки в JSON и особенности jQuery 1.4.x

Не вспомню точно насчет версий до 1.4.7, но сейчас надо очень внимательно подходить к формированию JSON будь то на стороне сервера или еще где-то. Канонический JSON - в двойных кавычках и имя элемента и значение. То есть:

{ name:'value' } // неправильно

а вот так:

{ "name":"value" } // правильно

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

Будьте осторжны - Quotes MEANS!

JSON и русский UTF-8 для тупых))

"а мужики-то не знают"... Все знают, а для меня откровение из изучения материалов по PEAR Services_JSON:

Services_JSON при кодировании конвертит русский UTF-8 в невразумительный набор \uXXXX. Я-то думал,это баг, про русских опять не подумали. Но нет! Так и должно быть. И Javascript понимает эту ботву нормально, расшифровывает и кажет юзеру. То есть получается \uXXXX - кошерно)))

Так что новички - не пугайтесь!

Javascript strip_tags (аналог php strip_tags)

function strip_tags( str ){	// Strip HTML and PHP tags from a string
	// 
	// +   original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
 
	return str.replace(/<\/?[^>]+>/gi, '');
}

Javascript trim (аналог php trim)

function trim( str, charlist ) {	// Strip whitespace (or other characters) from the beginning and end of a string
	// 
	// +   original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
	// +   improved by: mdsjack (http://www.mdsjack.bo.it)
	// +   improved by: Alexander Ermolaev (http://snippets.dzone.com/user/AlexanderErmolaev)
	// +	  input by: Erkekjetter
	// +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
 
	charlist = !charlist ? ' \s\xA0' : charlist.replace(/([\[\]\(\)\.\?\/\*\{\}\+\$\^\:])/g, '\$1');
	var re = new RegExp('^[' + charlist + ']+|[' + charlist + ']+$', 'g');
	return str.replace(re, '');
}

SVG — что, зачем, как, почему на примере конкретной разработки

SVG - сильная вещь, однако почему-то ей мало пользуются. Попросту - это векторная графика в интернете. Применений масса: от градиента на фоне страницы (который в пнг - будет весить 100 кило, а в SVG - это 3 строки текста) до сложных приложений, отрисовки графиков и еще много чего. Часто SVG может заменить полностью или частично Flash.

Поддержка браузерами камень преткновения для всех новых технологий, однако SVG - давно уже не новая технология. Поэтому на данную секунду 28.02.2010 15:41 - Mozilla Firefox, Google Chrome (читай WebKit, читай Safari, например), IE8, IE7, IE6 (за последние два пока не ручаюсь - у меня в песочнице работает, но в реальных условиях пока не пробовал). Использование SVG для Gecko-Webkit и IE - отличается технологически, однако наше счастье в том, что есть люди, которые обо всем уже позаботились - это John Resig (читай jQuery) и Keith Wood (читай плагин jQuery SVG). Сочетание двух этих явлений позволяет свободно работать с SVG в любом браузере.

Собственно задача: создание конструктора спортивной формы для сайт производителя - компании Луч. Так как модели отрисовываются производственными дизайнерами в Corel Draw, а он позволяет напрямую экспортировать векторную графику в SVG - решение использовать Scalable Vector Graphics показалось логичным.

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

Поехали:

Заметка 1. Если Gecko-Webkit нативно поддерживают SVG (открываем Firebug и видим все), то IE - работает по-другому. SVG включается в страницу как объект при помощи тэга embed. И это создает несколько непоняток. Первая - если вы накладываете несколько svg друг на друга, в IE они будут с непрозрачачным белым фоном. Собственно - это особенность реализации через embed, надо всего лишь установить параметр wmode="transparent", однако почему-то Кэйт Вуд забыл про это. Открываем исходник jquery.svg.js строка 113

container.innerHTML = '<embed type="image/svg+xml" width="100%" ' +

Дописываем:

container.innerHTML = '<embed wmode="transparent" type="image/svg+xml" width="100%" ' +

Получаем SVG с прозрачным фоном.

To be continued...

Прелоад картинок|js|css|hellknowswhat…

вечная история. разрабатываешь сайт(приложение|промо|hellknowswhat) как для себя. но у себя-то быстрый инет, а ведь есть еще люди с какими-то чудными тарифами от МГТС по 512 кбпс, есть люди с компами с Win95, есть в конце концов изверги, которые приходят с мобильных модемов и наконец йота (бывает быстро, а бывает хуже GRPS). И все-то у этих людей медленно, все-то не догружается. вечно картинки показываются до того, как они загрузились или вот Cufon срабатывает через 10 секунд после того, как страница отрендерилась.

Ищу прелоадер!!! Без дебилизма, без заглушек для картинок, без лишнего API. Требования к API простые: что загружаем (массив - можно грабить из css картинки, но это не важно), что делаем до того, как отработали, что делаем после.

До сего момента пользовал xLazyLoader - плагинчик для jQuery (offcodehost), однако хрен его знает как он работает под jQuery 1.4 - поэтому решил поискать что-нибудь еще.

Вот товарищ QueryLoader - он прелоадит целую страницу. занятно - попробуем. Смутило то, что при первой загрузке - он прошел до типа процентов 70 и умер. Интересно почему?..

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

if($.browser.msie){

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

В общем - несколько пассов над кодом и вы делаете себе любой прелоадер. Но вот прелоадит он только картинки... Блин. нужно еще несколько пассов, чтобы заставить его прелоадить и js... А так рекомендую. Потом выложу версию customized - везде, где есть // by moro - я правил))

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