Информация о материале

Категория: JavaScript

Опубликовано: 12 марта 2011

Просмотров: 19117

• html5
• uploader
• canvas
• xmlhttprequest

Стандарт HTML5 привносит новое, удивительное API. Если вы соедините это API с элементом <canvas> то вы можете получить супер современный загрузчик изображений. Эта статья расскажет, как это сделать. Все эти советы хорошо работают в Firefox 4. Также будут описываться некоторые альтернативные способы, чтобы убедиться, что они работают на Webkit-браузерах. Большинство из этих API, не работают в IE, но это довольно простой способ в использовании, и вполне годиться в качестве запасного варианта. 

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

Информация о материале

Категория: JavaScript

Опубликовано: 09 марта 2011

Просмотров: 13569

• wysiwyg
• plugin
• ckeditor
• syntaxhighlight

В своем блоге для подсветки кода я использую syntaxhighlight. Удобная штука, для того чтобы подсветить код его нужно заключить в теги

<pre class="brush:php">
</pre>

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

<link href='js/highlight/styles/shCoreDefault.css' rel='stylesheet' type='text/css'/>
<link href='js/highlight/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='js/highlight/scripts/shCore.js' type='text/javascript'></script>
<script src='js/highlight/scripts/shAutoloader.js' type='text/javascript'></script>
<script src='js/highlight/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='js/highlight/scripts//shBrushXml.js' type='text/javascript'></script>
<script src='js/highlight/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='js/highlight/scripts/shBrushPhp.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = false;
SyntaxHighlighter.defaults.toolbar = false;
SyntaxHighlighter.defaults['pad-line-numbers'] = true;
SyntaxHighlighter.all();
</script>

Все бы ничего если бы не одна мелочь, вставлять код в ckeditor страшно неудобно. Приходиться извращаться с исходным текстом, что обычно неминуемо приводит к ошибке в html.

Информация о материале

Категория: JavaScript

Опубликовано: 22 февраля 2011

Просмотров: 21909

• getoffset
• jquery
• ajax
• ondomready
• prototype
• mootools
• getelementsbyclassname
• getbrowser

Так уж сложилось, что в мире кроме JQuery есть еще куча различных библиотек. Самые популярных из них: Prototype, Mootools, ExtJS. К тому же есть тысячи самописных. И web-программистам, то и дело, по роду своей деятельности приходится с ними всеми сталкиваться.

По своей сути все эти библиотеки, как бы они не были хороши, всего лишь надстройки над JS браузера. Это значит, что ничего из ряда вон выходящего они делать априори не умеют. Они лишь абстрагируют программиста от тонкостей реализации работы JavaScript в разных браузерах.

К примеру, сейчас, в большинстве браузеров есть метод document.getElementsByClassName. Но в самых выдающихся (IE), этого метода нет. Что делает программист, когда ему надо найти элемент по его классу?

Каждый раз рождается, что-то вроде этого:

function getElementsByClassName(myclass,node){
	var parent = node || document;
	if(!parent.getElementByClassName){
		var items = parent.getElementByTagName('*');
		var result = [];
		for(var r in items)
			if(items[r].className==myclass)
				result[result.length] = items[r];
	}else result = parent.getElementByClassName(myclass);
	return result;
}

Библиотеки освобождают нас от такой рутины, и сами добавляют в document.prototype нужный метод, если его нет. Но библиотек очень много, а методов, которые нужны каждый день с десяток. Сюда относится уже упомянутый поиск по классу (по CSS селектору), события onload, ondomready, работа с AJAX, нахождение позиции элемента на странице, определение браузера и т.д. Словом, редко в каком веб приложении можно обойтись без этих методов. Разработчики jQuery, похоже, об этом знают, поэтому эта библиотека и в авангарде.

Но, как  я уже сказал, не jQuery единым сыт web-разработчик. Поэтому надо знать элементарный джентльменский набор и из других библиотек. Они могут Вам пригодиться, когда Вы, к примеру, работаете над чужим проектом.

Поводом для написания статьи были постоянные вопросы моего товарища, который работал со старой версией UMICMS, но уже привык к свежей версии. Сейчас UMIперешла на jQuery, а раньше она работала на Prototype.

Также очень популярная Joomla по дефолту работает с Mootools, по этому эту библиотеку я не мог обойти стороной.

Информация о материале

Категория: JavaScript

Опубликовано: 30 января 2011

Просмотров: 9871

• jquery
• ondomready
• addeventlistener

Выдернул из jQuery реализацию обработчика события onDomReady. Для тех, кто не в курсе поясню, что это событие возникает, после того как весь html код страницы будет загружен браузером, но в отличие от  window.load, срабатывает раньше того, как будут загружены все стили, скрипты, картинки и т.д. Т.е. если в своем JS вам надо провести какие-то манипуляции с DOM на странице до ее показа, то вам нужен именно этот метод. Вы, конечно, можете подключать jQuery целиком, и тогда в вашем распоряжении будет этот метод. К примеру при подключенном jQuery установить событие можно так