JQuery Form Changer plugin Forms is comfortable and nicely Формы это удобно и красиво. - презентация

1 jQuery Form Changer plugin Forms is comfortable and nicely Формы это удобно и красиво

2 Задача fieldschangerwrappers В шаблоне только поля, никаких оберток Скрипт создает за нас все обертки и вспомогательные элементы На основную обертку при различных событиях навешиваются классы различных вьюстэйтов (состояний отображения)

3 Применение Имея этот код в шаблоне, мы получаем такую форму Исходный html-код в шаблоне: Фамилия Имя Отчество Пароль Комментарий Не впечатляет, не правда ли?

4 Применение После вызова форма не изменилась визуально, но зато произошли изменения в дереве документа. Вызов метода formChangerа для формы (function($){ $(function(){ $('#x-form').applyChanger({ all: { options: { wraps: 3, lists: 5, listsIn: false } }, textarea: { options: { wraps: 5 } }); })(jQuery); Посмотрим, какие изменения произошли в DOM-дереве после вызова.

5 HTML-элементы, сформированные плагином Фамилия Имя Отчество

6 HTML-элементы, сформированные плагином Пароль Комментарий

7 Результат После применния стилей к созданым оберткам, мы можем получить, например, такую форму.

8 Input[type=text] Вызов метода $('input[type="text"]').changerText({ base: 'changerText', wrap: 'Wrap', hover: 'Hover', pressed: 'Pressed', focused: 'Focused', filled: 'Filled', placeholder: 'Place', readonly: 'Readonly', disabled: 'Disabled', invalid: 'Invalid' }, { wraps: 3, wrapsIn: true }); Код поля в html Обычное состояние Полученый фокус (focused) Заполнено (filled) Ошибка валидации (invalid)

9 Input[type=button] Вызов метода $('input[type="submit"]').changerText({ base: 'changerBtn', wrap: 'Wrap', hover: 'Hover', pressed: 'Pressed', focused: 'Focused', disabled: 'Disabled', title: 'Title' }, { wraps: 3, wrapsIn: true }); Код поля в html Обычное состояние Кнопка нажата (pressed)

10 Input[type=file] Вызов метода $('input[type="file"]').changerFile({ base: 'changerFile', wrap: 'Wrap', state: 'State', hover: 'Hover', pressed: 'Pressed', focused: 'Focused', filled: 'Filled', disabled: 'Disabled', invalid: 'Invalid' }, { wraps: 3, wrapsIn: true }); Код поля в html Обычное состояние Заполнено (filled) Ошибка валидации (invalid)

11 Textarea Вызов метода $('textarea').changerTextarea({ base: 'changerTextarea', wrap: 'Wrap', hover: 'Hover', pressed: 'Pressed', focused: 'Focused', filled: 'Filled', placeholder: 'Place', readonly: 'Readonly', disabled: 'Disabled', invalid: 'Invalid' }, { wraps: 3, wrapsIn: true }); Код поля в html Обычное состояние Полученый фокус (focused) Заполнено (filled) Ошибка валидации (invalid) Созданный скроллбар (.withScroll)

12 Input[type=checkbox] Вызов метода $('input[type="checkbox"]').changerCheck({ base: 'changer', wrap: 'Wrap', hover: 'Hover', pressed: 'Pressed', focused: 'Focused', disabled: 'Disabled', state: 'State', invalid: 'Invalid' }, { wraps: 3, wrapsIn: true }); Код поля в html Используется как для элементов типа checkbox, так и для элементов типа radio. При инициализации дописывает к base-классу тип поля. Например, по умолчанию классы получатся такие: chagerCheckboxWrap и changerRadioWrap соотвественно.

13 Select Вызов метода $('select').changerSelect({ base: 'changerSelect', wrap: 'Wrap', state: 'State', arrow: 'Arrow', list: 'List', listin: 'Listin', optgroup: 'Optgroup', option: 'Option', selected: 'Selected', //для опции open: 'Open', hover: 'Hover', pressed: 'Pressed', focused: 'Focused', disabled: 'Disabled', invalid: 'Invalid' }, { wraps: 3, wrapsIn: true lists: 3, listsIn: true }); Обычное состояние Открытый (open) Ошибка валидации (invalid)

14 Вспомогательные функции Выключает поле, добавляя элементу атрибут disabled и выкидывая событие disable Антоним предыдущей функции. Удаляет атрибут и выкидывает событие enable.changerDisable().changerEnable() Устанавливает полю режим только для чтения, добавляя элементу атрибут readonly и выкидывая событие readonly Антоним предыдущей функции. Удаляет атрибут и выкидывает событие notReadonly.changerSetReadonly().changerUnsetReadonly() Устанавливает поле флага выбранным, добавляя атрибут checked и выкидывая событие change Антоним предыдущей функции. Удаляет атрибут и также выкидывает событие change.changerSetChecked().changerUnsetChecked()

15 Сборщик настроек (function($){ $(function(){ $('#x-form').add('input.change').applyChanger({ all: { options: { wraps: 3, lists: 5, listsIn: false } }, textarea: { options: { wraps: 5 } }, form: { classes: { base: 'changerForm' } }); })(jQuery);

16 Ресурсы Demo - Project Hosting - Bag Tracker -