Довольно давно я задумался о решении такой задачки: необходимо при помощи ява-скрипта поворачивать картинку на заданный угол. Сейчас нашел её решение — плагин wilq32 для jQuery, позволяющий как просто поворачивать картинки, так и создавать анимированное вращение:
Инструкция по установке и настройке плагина Tagnetic Tagnetic — плагин для библиотеки jQuery, который переделывает стандартное облако тэгов в холодильник с налепленными на него магнитами-тэгами. Скрипт полностью работает на стороне клиента и в случае если в браузере отключена поддержка Java-script, то пользователю будет показано стандартное облако тэгов.
Работая над очередной задачей, столкнулся с проблемой, решить которую помог Гугл. Суть проблемы заключается в том, что в библиотеке jQuery 1.2.6 некорректно работают функции width() и height() в третьем Firefox’е, а также браузерах, работающих на движке WebKit — Safari и Google Chrome. Удивительно, но даже в шестом IE, с которым обычно больше всего проблем, этого глюка нет. Природа проблемы осталась мне неясной, но известно, что она проявляется только тогда, когда в html-коде подключены сначала JS-файлы, а затем CSS-файлы и пропадает если сделать наоборот — сначала подключить все CSS-файлы, а затем все JS-файлы. В новом релизе jQuery этот баг обещают исправить.
При разработке модуля Inner poll возникла задача динамического добавления элементов к форме. С помощью библиотеки jQuery эта задача решается в два счета.
Для начала пишем функцию:
function addInput() {
/* default-id — скрытый элемент формы, из которого берется id для первого создаваемого элемента */
var id = document.getElementById("default-id").value;
id++;
/* в форму с именем testform добавляем новый элемент */
$("form[name=testform]").append('<div id="div-' + id + '"><input name="input-' + id + '" id="input-' + id + '" value="' + id + '"><a href="javascript:{}" onclick="removeInput(\'' + id + '\')">Удалить</a></div>');
/* увеличиваем счетчик элементов */
document.getElementById("default-id").value = id;
}
Затем создаем форму:
<form name="testform" action="test.php" method="POST">
<input type="hidden" id="default-id" value="0">
<input type="submit" value="Отправить!">
</form>
<a href="javascript:{}" onclick="addInput()">Добавить текстовое поле</a><br>
Вот и всё. Здесь размещен работающий пример. Кроме добавления элементов, также приведен пример их удаления.
В журнале Smashing Magazine наткнулся на скрипт (плагин для jQuery), позволяющий автоматически рядом с ссылками указывать размер файла, на который указывает эта ссылка. Оказалось, что этот скрипт в своей работе использует полезный сервис, под названием json-head, который на входе принимает любой URL, а на выходе в формате JSON отдает заголовки, которые получил от сервера.
Анализируя эти заголовки можно на стороне клиента придумать много полезных фишек, кроме указания размера документа, на который ведет ссылка, можно, например, подсвечивать ссылки на недавно обновленные страницы (заголовок “Last-Modified”) или нерабочие ссылки (анализ переменной “status_code”).
Все те же действия можно проделывать и не используя сторонние сервисы, но в таком случае опрос удаленных серверов и анализ заголовков придется реализовать на стороне своего сервера, со всеми вытекающими отсюда достоинствами (независимость от сторонних сервисов и того, включена на стороне клиента поддержка Java-script или нет) и недостатками (в случае большого количества запросов забанят ip вашего сервера, а не ip сервера http://json-head.appspot.com ну и необходимость разработки собственного решения).
Кстати, с помощью этого сервиса, совершенно случайно выяснил, что Гугл работает с использованием веб-сервера собственной разработки — gws, по данным из Википедии на этом ПО работает 9,3% всех сайтов в интернете, то есть Гугл — это и есть почти 10% интернета!
Наткнулся на еще один очень интересный плагин Columnizer для библиотеки jQuery, который позволяет автоматически форматировать текст в “газетном” стиле, то есть разбивать его на несколько колонок.
В своем модуле “Адаптивное меню” я использовал очень удобный плагин для библиотеки jQuery, который позволяет сортировать ячейки таблиц, перетаскивая их мышью. Сейчас я хочу подробнее рассказать о возможностях этого плагина.
Для работы необходимо скачать последнюю версию библиотеки jQuery, последнюю версию плагина Table DnD. Также можно ознакомиться с официальной документацией к плагину.
Столкнулся со странной проблемой, на решение которой убил пол дня. Один и тот же скрипт в Firefox’e работает корректно, а в IE – нет. Дальше приведено решение проблемы.
Разработать веб-страницу, позволяющую обмениваться данными и закачивать файлы на сервер без перезагрузки страницы.
Frontend (клиентская часть) – библиотека jQuery версии 1.1.4 и плагин к ней ajaxUpload;
Backend (серверная часть) – Apache (любой версии), PHP 5.2.3, MySQL. В PHP 5.2.0 появились встроенные средства для работы с данными в формате JSON, которые используются в этом примере, если на вашем хостинге установлена более старая версия PHP, то эти функции придется написать самостоятельно.