670
 

Как создать плагин для jQuery

Чаще всего мне приходится писать скрипты под jQuery, и иногда очень удобно реализовывать функциональность путем создания плагина. В этой статье я покажу как это можно сделать. Пример будет тривиальный, но надеюсь понятный. Фунцкиональнось учебного плагина аналогична hover эффекту – при наведении указателя мыши на элемент, его фон меняется, если убрать указатель, то фон меняется на первоначальный (этого можно достичь при помощи CSS, но не забывайте, что это всего-лишь пример).

В основе библиотеки jQuery лежит класс с аналогичным названием jQuery (у него есть псевдоним $). Подобно тому, как классы в JavaScript можно расширять, используя свойство prototype, точно также мы можем расширить функциональность класса jQuery. Именно таким образом и создаются плагины. Поскольку в jQuery для свойства prototype есть псевдоним fn, то он чаще всего и используется для этой цели.

<< читать дальше >>

Управление табличными данными при помощи jQuery

Update: Внимание! Эта статья устаревшая, а плагин, который здесь используется уже не поддерживается автором и имеет неисправленные ошибки.

В одной из прошлых статей я писал о том, как сделать текст на странице динамически редактируемым. Там был представлен метод редактирования при помощи плагина jEditable. Таким образом можно динамически редактировать любой блок текста на странице. Однако если речь идет о табличных данных, то гораздо удобнее использовать другое решение – плагин tableFormSynch. Этот плагин связывает таблицу с формой, давая возможность динамически редактировать данные в таблице, а также добавлять и удалять записи.

В этой статье я покажу, как сделать простое приложение, реализующее редактирование, добавление и удаление записей таблицы, сохраняя данные при помощи AJAX. Чтобы создать приложение нам будут нужны библиотека jQuery, плагин metadata (требуется для работы плагина tableFormSynch), а также jQuery Form Plugin для сохранения данных формы через AJAX. Но прежде чем мы начнем, предлагаю посмотреть на готовый результат. Смотреть демо пример.

<< читать дальше >>

Туториал: Создание окон на Mootools

Различные всплывающие окошки, выполненные на JavaScript (не путать с pop-up окнами, вызываемыми при window.open), становятся все более распространенными. Чаще всего они используются для динамического отображения подсказок, диалогов, да и просто рекламы (что зачастую раздражает :) ). Сегодня я расскажу то, как можно сделать такие окна при помощи популярной библиотеки Mootools. Конечный результат будет выглядеть следующим образом:

Окна на Mootools

<< читать дальше >>

Туториал – приложение FAQ на jQuery

В этом туториале я рассмотрю пример создания приложения FAQ (часто задаваемые вопросы), в котором вопросы и ответы будут располагаться в двух расположенных рядом контейнерах с полосами прокрутки. Вместо стандартных полос прокрутки я создам собственный дизайн, а прокручивание сделаю плавным, плюс добавлю меню-аккордеон со списком вопросов.

Окончательный результат будет работать следующим образом: смотреть.

Для создания полос прокрутки я буду применять плагин jScrollPane, который в свою очередь требует jquery.dimensions.js, а также jquery.mousewheel.js чтобы можно было прокручивать список при помощи колесика мышки.

<< читать дальше >>

JSToolbox создан на основе WordPress