А вы что еще не используете GreaseMonkey? Сейчас я расскажу что это и вы сразу его установите.
Greasemonkey — расширение для браузера Mozilla Firefox, которое позволяет пользователю устанавливать скрипты для получения изменений на странице «на лету».
[More]
Не так давно вышли новые версии часто используемых мной программных продуктов, обновились jQuery и Photoshop.
И уже готовы свежие шпаргалки для них, печатаем и на стену, можно и на футболку напечатать или вообще куда угодно:
Перевод статьи Create a Scrolling Menu with CSS and jQuery.
Существует множество прокручивающихся меню и галерей изображений, созданных на Flash, вот яркие тому примеры 1, 2. Но автор захотел создать аналог на CSS и jQuery, конечно без эффектов смазывания картинки при перемещении, но все же. Это решение хорошо работает в большинстве популярных браузеров и при этом сохраняет доступность элементов при отключенном JavaScript.
Посмотреть результат
[More]
Хорошее название топика, правда? А названия топиков очень важны, по ним приходят из поисковиков и по названию человек сразу понимает то ли это что он искал. Теперь по сути.
Как люди в древнее время (когда не было jQuery) сабмитили форму на AJAX’е? Схема не сложна, но очень муторна, нужно составить либо строку из всех инпутов вида ?id=25&bring_me=pianino&verni_mena_na=nebo, либо в формате JSON, который опять же нужно парсить. Потом появились фреймворки и библиотеки умеющие делать это за нас, нужно было только указать что и куда передаем, т.е. типа того что: { id: document.getElementById(’hidden_id’) .value, bring_me: document.getElementById(’bring_me’) .value, …}, не очень удобно.
И тут появляется ОН jQuery, тот кто покорил самого Гугла! И был написан под него плагин jQuery Form Plugin, который делает всю работу по сабмиту формы за нас. Создаем форму используя самую обыкновенную верстку, без особых дополнений:
<form id="myForm" action="comment.php" method="post">
Name: <input type="text" name="name" />
Comment: <textarea name="comment"></textarea>
<input type="submit" value="Submit Comment" />
</form>
Подключаем jQuery, сам Form Plugin и создаем небольшой обработчик для формы:
<head>
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/form.js"></script>
<script type="text/javascript">
// ожидаем загрузки всего документа
$(document).ready(function() {
// назначаем 'myForm' обрабатываемой формой и задаем ей простецкую функцию
$('#myForm').ajaxForm(function() {
alert("Спасибо за комментарий!");
});
});
</script>
</head>
И все дела! Теперь вместо сабмита формы произойдет AJAX запрос на сервер по ссылке из action с данными из нашей формы! Так же плагин поддерживает и AJAX загрузку файлов! Описание плагина и скачать его можно на этом сайте – http://malsup.com/jquery/form/.
Программно позиционировал блок, использовал jQuery, работа была уже готова поэтому пошел проверять в браузерах. В первую очередь IE 6, потом 7, Safari и даже Хром, везде поведение одинаковое, все супер. В Опере возникли проблемы, вместо высоты отображаемой области, считается высота всего документа, вот код:
$(window).height();
Но в Опере 9.5 отрабатывает он аналогично этому:
$(document).height();
А вот так решаются все проблемы с вычислением этой высоты:
document.getElementsByTagName('html')[0].clientHeight;
Разработал плагин для jQuery, он пожалуй тоже относится к клонам lightbox. Теперь я понял почему их так много, изменить любой из существующих гораздо сложнее чем написать свой! Смотрим, оцениваем: ImageBox.
Очень понравилась последняя статья на smashingmagazine о Best Practices для jQuery. Скажу честно у меня пока не хватает сил полностью перейти на подобный стиль маркапа страниц, бикоз потому что это требует изменить привычки по клиентскому программированию. Но это верный путь для JavaScript программиста, вот красочный пример из статьи:
Так делать нельзя:
Никогда не встраивайте JavaScript в элементы как атрибуты. Эта практика должна быть искореннена из вашего мозга.
<a onclick="doSomething()" href="#">Click!</a>
То что надо:
Все Javascript поведения должны быть включены во внешних скриптах связанных с документом тегом <script> в head страницы. Итак, правильный тег будет выглядеть так:
<a href="backuplink.html" class="doSomething">Click!</a>
И Javascript внутри myscript.js файла будет содержать нечто вроде этого:
...
$('a.doSomething').click(function(){
// Do something here!
alert('You did something, woo hoo!');
});
...
Ничего знаменательного, но я просто добрался до их User Interface Demos… это просто фантастично, забудьте Flash! выкиньте на помойку свой Silverlight. За JavaScript будущее, look at this guys.
А я вообще хотел написать что на сайте jQuery новый дизайн, и все.
В web-программировании еще не так много устоявшихся приемов, постоянно что-то меняется, испытываются разные техники. Но сложились уже некоторые устоявшиеся понятия, к примеру серверные «языки»: PHP, ASP.NET, Perl, Python, а среди них самый популярный конечно PHP, т.е. начав свой проект на PHP можно быть уверенным что для него без труда найдутся программисты. Так же существует программирование «client side», то есть на стороне клиента, тут в отличии от серверного у нас нет особого выбора и мы вынуждены использовать HTML и JavaScript, предлагаю не брать в расчет Flash и Silverlight (т.к. это похоже на то как ехать на машине по поезду), но и тут возникает ряд особенностей, а в частности JavaScript библиотеки. Есть масса рейтингов этих библиотек, где действительно заслуженно первое место с большим отрывом занимает jQuery! И не зря, он хорош во всем, размер минимальный, функцонала масса, ведь уже в его ядре есть большинство необходимых эффектов для создания красивой анимации, а еще у него есть плагины, очень много, в них реализовано практически все что нужно под любые задачи.
Ну и мое скромное мнение такое: jQuery скорее всего победит, он уже побеждает в конкурентной борьбе JavaScript фреймворков.