Архивы за месяц: апреля 2010

Плавающий виджет. Поддержка IE6.

Владимир | | CSS, HTML, JavaScript, Web разработка.

floating panel logo

Приветствую всех!

Некоторое время назад я опубликовал пост, в котором рассказывал о плагине для jQuery, позволяющем создать плавающий виджет.

Но, благодаря читателям этого блога, выяснилось, что протестировал я работу плагина не очень хорошо. За это всем ещё раз огромное спасибо! Очень приятно, что кто-то пользуется моим кодом и помогает делать его лучше.

Но вернёмся к плагину. Проблема возникла в широко известном браузере под названием IE6, о котором уже давно хочется забыть 🙂 … но есть люди, которые им пользуются 🙁
Читать дальше

jQuery + плагины: сортировка и редактирование списка (часть вторая)

Владимир | | Ajax, HTML, JavaScript, PHP, Web разработка.

jquery sortable

В прошлой статье я начал рассказывать о создании редактируемого html списка с возможностью сортировки записей. Мы рассмотрели структуру БД, создали страницу со списком, подключили JS скрипты и разобрали добавление записей.

Осталось немного доделать 😉

Демо-версия находится здесь

Demo

Также вы можете скачать архив с этим примером

Source

Удаление существующих записей
Читать дальше

jQuery + плагины: сортировка и редактирование списка

Владимир | | Ajax, HTML, JavaScript, PHP, Web разработка.

jquery sortable

Довольно давно я написал статью о том, как с помощью библиотек Prototype и Scriptaculous добавить возможность редактирования и удаления записей обычному html списку (вообще-то это был цикл статей 1, 2, 3, 4, 5).

С тех пор несколько читателей просили доработать пример и добавить возможность сортировки записей.

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

Сформулируем требования.

Необходимо создать html список с возможностями:

— изменение записей;
— удаление записей;
— изменение порядка записей.

Кроме того, необходимо предусмотреть возможность создания новых записей.
Читать дальше

Drag & Drop с использованием jQuery UI

Владимир | | HTML, JavaScript, Web разработка.

jquery ui drag drop

В прошлый раз я рассказывал о перемещении блоков на странице в браузерах с поддержкой HTML5. Но, знаете, у меня последнее время складывается впечатление, что к тому времени как этим стандартом можно будет свободно пользоваться, он успеет устареть.

До сих пор часто требуется поддержка IE6, а перетаскивание объектов, о котором шла речь, не работает даже в IE8, и неизвестно, будет ли работать в девятой версии самого распространённого браузера. Рассчитывать же на то, что все пользователи вдруг откажутся от IE по-моему очень оптимистично.

В любом случае, решать сегодняшние задачи приходится доступными средствами. Это означает, что если вы не используете библиотек, то для перетаскивания объектов нужно создавать обработчики событий mousedown, mousemove и mouseup. Ничего запредельно сложного, но занятие это совсем не увлекательное. Поэтому, на мой взгляд, лучше использовать какую-нибудь библиотеку, например, jQuery UI.
Читать дальше

Drag & Drop с использованием HTML5

Владимир | | HTML, JavaScript, Web разработка.

html5 drag drop

К сожалению, на сегодняшний день использовать HTML5 довольно сложно. Стандарт в состоянии разработки и далеко не все браузеры поддерживают его возможности. Тем не менее, интересных нововведений в нём много и о них полезно знать. Поэтому сегодня я расскажу о моих экспериментах с перетаскиванием объектов (Drag & Drop).

Хочу предупредить. Приведённый ниже код работает в последних версиях Firefox и Google Chrome, в IE8 и Opera поддержка этих возможностей отсутствует.

Сразу даю ссылки на демонстрационную страничку и архив с примером.

Source

Чтобы просто разобраться с принципом работы D&D я решил сделать страничку с текстовыми блоками, которые можно будет перетаскивать из одного контейнера в другой.
Читать дальше

Плавающий виджет. Версия 2.

Владимир | | CSS, HTML, JavaScript, Web разработка.

floating panel logo

Как и обещал, сегодня выкладываю новую версию плагина для jQuery, позволяющего создать плавающий виджет с кнопками. Но, прежде всего, хочу поблагодарить всех, кто принял участие в обсуждении плагина. Вы очень помогли мне замечаниями и советами!

Сразу приведу ссылку на архив с новой версией.

Source

Изменения и новые возможности
Читать дальше

jQuery плагин: плавающий виджет с кнопками

Владимир | | CSS, HTML, JavaScript, Web разработка.

twitter button

Приветствую всех!

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

UPD. Эта информация устарела, т.к. появилась новая версия плагина.

Идею плагина я позаимствовал на очень популярном блоге Mashable. Если вы откроете любую их статью, то слева от текста увидите небольшую панель с кнопками социальных сетей. Самое главное в том, что при прокрутке страницы, эта панель смещается вниз и кнопки видны постоянно.

Мне такое решение показалось очень удачным. Ведь, скорее всего, посетитель захочет отправить ссылку в твиттер после того, как прочтёт часть статьи. Поэтому будет неплохо, если соответствующая кнопка в нужный момент окажется перед глазами.

Возвращаемся к плагину.
Читать дальше