Штуки-дрюки
Tagnetic — холодильник тэгов
Ромка — Ср, 10/08/2008 - 00:17
В ответ на флэш-скрипт от Ray Tanck, реализующий облако тэгов, стилизованное под доску с магнитами, я написал плагин для jQuery, который создает облако тэгов, стилизованное под холодильник с налепленными на него магнитами :) За графику спасибо моему другу Юре fancy13.
Плагин автоматически заменяет стандартное облако тэгов на холодильник, по этому для его работы, например, в Друпале достаточно просто подключить плагин в теле страницы и указать контейнер, в котором хранится облако. Если у пользователя выключен ява-скрипт, то ему будет показано стандартное облако тэгов.
Пока реализовал еще не все задумки, но уже есть что показать. При желании с той же страницы можно скачать тестовую версию плагина (магнит "Скачать" на холодильнике) — архив весит 1,2 мегабайта, но в нем находится PSD-исходник холодильника, два "скина" и не запакованный плагин. Конечному пользователю, чтобы увидеть холодильник, придется загрузить примерно 200 килобайт графики и плагин, размером в пару килобайт .
К сожалению, из-за использования IE PNG Fix в шестом IE скрипт заметно тормозит, возможно придется заменить пнг на гифы, для устранения этих тормозов.
В планах создание скина, в виде стены/доски с налепленными на нее бумажками-объявлениями, а также холодильника шириной в 300-400 пикселей.
Upd. Добавил прелоадер, скин шириной 400 пикселов и еще пару мелочей.
Еще обн. Выложил небольшую документацию, уже скоро работа над плагином будет завершена.
Третий упд. Запостил информацию о плагине на Хабре. Теперь придется реализовывать все предложенные там мысли :) Уже сделал пример с перетаскиваемыми магнитами.
Динамическое добавление элементов к форме
Ромка — Ср, 09/17/2008 - 17:02
При разработке модуля Inner poll возникла задача динамического добавления элементов к форме. С помощью библиотеки jQuery эта задача решается в два счета.
Для начала пишем функцию:
<?php
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;
}
?>Затем создаем форму:
<?php
<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>
?>Вот и всё. Здесь размещен работающий пример. Кроме добавления элементов, также приведен пример их удаления.
Получение заголовков (HTTP-headers) страницы при помощи Java-script
Ромка — Пнд, 09/15/2008 - 14:48
В журнале Smashing Magazine наткнулся на скрипт (плагин для jQuery), позволяющий автоматически рядом с ссылками указывать размер файла, на который указывает эта ссылка. Оказалось, что этот скрипт в своей работе использует полезный сервис, под названием json-head, который на входе принимает любой URL, а на выходе в формате JSON отдает заголовки, которые получил от сервера.
Анализируя эти заголовки можно на стороне клиента придумать много полезных фишек, кроме указания размера документа, на который ведет ссылка, можно, например, подсвечивать ссылки на недавно обновленные страницы (заголовок "Last-Modified") или нерабочие ссылки (анализ переменной "status_code").
Все те же действия можно проделывать и не используя сторонние сервисы, но в таком случае опрос удаленных серверов и анализ заголовков придется реализовать на стороне своего сервера, со всеми вытекающими отсюда достоинствами (независимость от сторонних сервисов и того, включена на стороне клиента поддержка Java-script или нет) и недостатками (в случае большого количества запросов забанят ip вашего сервера, а не ip сервера http://json-head.appspot.com ну и необходимость разработки собственного решения).
Кстати, с помощью этого сервиса, совершенно случайно выяснил, что Гугл работает с использованием веб-сервера собственной разработки — gws, по данным из Википедии на этом ПО работает 9,3% всех сайтов в интернете, то есть Гугл — это и есть почти 10% интернета!
Автоматическая "газетная" верстка (верстка в несколько колонок)
Ромка — Пт, 09/05/2008 - 14:35
Выглядит это так:
Lorem ipsum ne justo
Bonorum has. His ut cibo quas tantas, vis ut probo adhuc definiebas, has at meis debet vulputate. No sed velit essent suavitate, in pro decore ceteros temporibus, usu in odio offendit theophrastus. Mel labore indoctum cu, ad soleat admodum delicatissimi sed, mei viris tritani ullamcorper eu. Ut vim simul aperiam.
Eu eleifend repudiandae has. Mea eu ridens aliquam. Nisl aeque sit ut, posse dolor utinam cum in. Ad timeam sapientem eos, et eripuit inermis nam. Eos integre voluptaria ne, iriure concludaturque ut eum.
Vis erant intellegat in. Soleat legere no ius, usu ex laoreet molestie. Sit eu sint inermis. Ea zzril scribentur pro.
Tempor essent appetere
Ius mutat commune expetendis in. Nam et quas sensibus reprimique, vix no erat soluta suavitate. At mel eius dictas latine. Corrumpit inciderint reformidans sed no, no usu omnis utinam noluisse.
Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.
Probo debet quaestio an eos, no mel assum iracundia delicatissimi, rebum facete utroque sed ex. Eu melius invidunt repudiandae vix, eu paulo reformidans deterruisset duo, solum voluptaria efficiantur ea mel. Qui summo zzril alienum et. Eu est ferri iuvaret, mazim epicurei sententiae ut cum, modo reque intellegat ex vix. Vim eu tibique accusamus, quot electram at qui.
Ex iisque eleifend periculis has. Sit aeterno virtute partiendo ei, eam nonumy bonorum adolescens ad. Ut nec suas vocent ornatus, cetero legendos constituam mea ea, pri cu delenit iracundia. Mundi decore nec te.
Soleat civibus in pri
In petentium erroribus percipitur per. Takimata accommodare ius ut, eam no postulant urbanitas. Qui ei tantas consectetuer, quis dictas euripidis duo ei. Quaeque democritum concludaturque has ne.
Blandit insolens constituto vix an. Has diam wisi in, eum unum repudiare no. Sit at virtute rationibus, qui vitae explicari cu. Vim ne singulis voluptatum, sed puto accusata salutandi ei. Ad mel civibus adversarium.
Per ne solum vivendo, fabulas dolorem vivendo in pro. Nec duis ignota cotidieque no, an per possit nostrum. Pro detraxit definitionem eu. Vivendo officiis no nam, eu has reque maiestatis percipitur, dolore reprimique accommodare cum ad. No utinam voluptua oportere pri, augue sonet dicant ei sea.
Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.
Перетаскивание строк таблицы. Table drag and drop — плагин для jQuery
Ромка — Пнд, 09/01/2008 - 23:31
Для работы необходимо скачать последнюю версию библиотеки jQuery, последнюю версию плагина Table DnD. Также можно ознакомиться с официальной документацией к плагину.
Свойства "Table drag and drop"
После подключения, плагин добавляет к функционалу jQuery возможность использовать функцию tableDnD(), принимающую следующие параметры :- onDragStyle — CSS-стиль перетаскиваемой строки;
- onDropStyle — стиль строки, после того как ее перетащили;
- onDragClass — по сути то же что и onDragStyle, но вместо стилей указывается класс, содержащий необходимые стили;
- onDrop — функция, выполняемая после того как строчку "бросили";
- onDragStart — функция, выполняемая после того как строчку начали перетаскивать;
- dragHandle — здесь определяется класс ячейки, за которую можно будет перетаскивать строчку. Если параметр не определен, то хватать строку можно будет за любую ячейку;
- scrollAmount — число пикселей, на которое проскроллится страница, в случае если во время перетаскивания курсор дойдет до верхней или нижней границы страницы.
Простой пример работы
| 1 | One | some text |
| 2 | Two | some text |
| 3 | Three | some text |
| 4 | Four | some text |
| 5 | Five | some text |
| 6 | Six | some text |
Разработал модуль "Адаптивное меню" для Drupal 6
Ромка — Чт, 08/28/2008 - 23:20
Модуль позволяет пользователям формировать меню, состоящее из любых ссылок, как внешних, так и внутренних.
Фичи модуля
- достаточно добавить URL, заголовок страницы будет получен автоматически;
- сортировка элементов меню осуществляется простым перетаскиванием;
- все действия пользователя обрабатываются при помощи технологии AJAX, по этому интерфейс не усложнен лишними вопросами или перезагрузками страницы. Все изменения сохраняются "на лету".
В продолжении небольшая демонстрация возможностей модуля.
AJAX. Обмен данными между клиентом и сервером, закачка на сервер файлов без перезагрузки страницы при помощи библиотеки jQuery.
Ромка — Ср, 09/05/2007 - 15:44
Задача: разработать веб-страницу, позволяющую обмениваться данными и закачивать файлы на сервер без перезагрузки страницы. В статье приведен пример решения задачи с использованием библиотеки jQuery.
Всем привет!
Последние комментарии