Блог #Штуки-дрюки

old-site, Штуки-дрюки, тэги, облако тэгов, холодильник тэгов, тагнетик, tagnetic 8 октября 2008

Tagnetic — холодильник тэгов

Tagnetic В ответ на флэш-скрипт от Ray Tanck, реализующий облако тэгов, стилизованное под доску с магнитами, я написал плагин для jQuery, который создает облако тэгов, стилизованное под холодильник с налепленными на него магнитами :) За графику спасибо моему другу Юре fancy13.

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

Пока реализовал еще не все задумки, но уже есть что показать. При желании с той же страницы можно скачать тестовую версию плагина (магнит “Скачать” на холодильнике) — архив весит 1,2 мегабайта, но в нем находится PSD-исходник холодильника, два “скина” и не запакованный плагин. Конечному пользователю, чтобы увидеть холодильник, придется загрузить примерно 200 килобайт графики и плагин, размером в пару килобайт .

К сожалению, из-за использования IE PNG Fix в шестом IE скрипт заметно тормозит, возможно придется заменить пнг на гифы, для устранения этих тормозов.

В планах создание скина, в виде стены/доски с налепленными на нее бумажками-объявлениями, а также холодильника шириной в 300-400 пикселей.

Upd. Добавил прелоадер, скин шириной 400 пикселов и еще пару мелочей.

Еще обн. Выложил небольшую документацию, уже скоро работа над плагином будет завершена.

Третий упд. Запостил информацию о плагине на Хабре. Теперь придется реализовывать все предложенные там мысли :) Уже сделал пример с перетаскиваемыми магнитами.

old-site, jquery, Штуки-дрюки, Javascript, форма 17 сентября 2008

Динамическое добавление элементов к форме

При разработке модуля 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>

Вот и всё. Здесь размещен работающий пример. Кроме добавления элементов, также приведен пример их удаления.

old-site, jquery, java-script, Штуки-дрюки 15 сентября 2008

Получение заголовков (HTTP-headers) страницы при помощи Java-script

В журнале Smashing Magazine наткнулся на скрипт (плагин для jQuery), позволяющий автоматически рядом с ссылками указывать размер файла, на который указывает эта ссылка. Оказалось, что этот скрипт в своей работе использует полезный сервис, под названием json-head, который на входе принимает любой URL, а на выходе в формате JSON отдает заголовки, которые получил от сервера.

Анализируя эти заголовки можно на стороне клиента придумать много полезных фишек, кроме указания размера документа, на который ведет ссылка, можно, например, подсвечивать ссылки на недавно обновленные страницы (заголовок “Last-Modified”) или нерабочие ссылки (анализ переменной “status_code”).

Все те же действия можно проделывать и не используя сторонние сервисы, но в таком случае опрос удаленных серверов и анализ заголовков придется реализовать на стороне своего сервера, со всеми вытекающими отсюда достоинствами (независимость от сторонних сервисов и того, включена на стороне клиента поддержка Java-script или нет) и недостатками (в случае большого количества запросов забанят ip вашего сервера, а не ip сервера http://json-head.appspot.com ну и необходимость разработки собственного решения).

Кстати, с помощью этого сервиса, совершенно случайно выяснил, что Гугл работает с использованием веб-сервера собственной разработки — gws, по данным из Википедии на этом ПО работает 9,3% всех сайтов в интернете, то есть Гугл — это и есть почти 10% интернета!

Читать дальше ➠
old-site, jquery, Штуки-дрюки, газетная верстка, журнальная верстка, верстка в несколько колонок 5 сентября 2008

Автоматическая "газетная" верстка (верстка в несколько колонок)

Наткнулся на еще один очень интересный плагин Columnizer для библиотеки jQuery, который позволяет автоматически форматировать текст в “газетном” стиле, то есть разбивать его на несколько колонок.

Читать дальше ➠
old-site, jquery, Штуки-дрюки, drag and drop 1 сентября 2008

Перетаскивание строк таблицы. Table drag and drop — плагин для jQuery

В своем модуле “Адаптивное меню” я использовал очень удобный плагин для библиотеки jQuery, который позволяет сортировать ячейки таблиц, перетаскивая их мышью. Сейчас я хочу подробнее рассказать о возможностях этого плагина.

Для работы необходимо скачать последнюю версию библиотеки jQuery, последнюю версию плагина Table DnD. Также можно ознакомиться с официальной документацией к плагину.

Читать дальше ➠
old-site, Работа, drupal, drupal-6, модуль, Штуки-дрюки 28 августа 2008

Разработал модуль "Адаптивное меню" для Drupal 6

Модуль позволяет пользователям формировать меню, состоящее из любых ссылок, как внешних, так и внутренних. Фичи модуля достаточно добавить URL, заголовок страницы будет получен автоматически; сортировка элементов меню осуществляется простым перетаскиванием; все действия пользователя обрабатываются при помощи технологии AJAX, по этому интерфейс не усложнен лишними вопросами или перезагрузками страницы.

Читать дальше ➠
old-site, AJAX, upload, Работа, jquery, java-script, Штуки-дрюки 5 сентября 2007

AJAX. Обмен данными между клиентом и сервером, закачка на сервер файлов без перезагрузки страницы при помощи библиотеки jQuery.

Задача

Разработать веб-страницу, позволяющую обмениваться данными и закачивать файлы на сервер без перезагрузки страницы.

Средства

Frontend (клиентская часть) – библиотека jQuery версии 1.1.4 и плагин к ней ajaxUpload;

Backend (серверная часть) – Apache (любой версии), PHP 5.2.3, MySQL. В PHP 5.2.0 появились встроенные средства для работы с данными в формате JSON, которые используются в этом примере, если на вашем хостинге установлена более старая версия PHP, то эти функции придется написать самостоятельно.

Читать дальше ➠