Сделай дизайнеру приятно: Красивые веб-формы
1 like3,068 views
Возможности для стилизации веб-форм так, как их нарисовали дизайнеры. Рассматриваются различные варианты плагинов, а также возможности собственного плагина с API - jClever
![14
jClever умеет
● input[type=text]
● input[type=checkbox]
● select
● multyselect
● input[type=button]
● input[type=radio]
● input[type=file]
● texterea
● валидация форм
● темы оформления
● слежение за DOM
● API](https://image.slidesharecdn.com/random-130527033320-phpapp02/85/-15-320.jpg)
More Related Content
What's hot (19)
Similar to Сделай дизайнеру приятно: Красивые веб-формы (20)
Сделай дизайнеру приятно: Красивые веб-формы
- 2. 1997 год HTML 3.2 1999 год XHTML 4.01 <form> 1
- 3. 2
- 4. 3
- 6. ● Ничего ● Ничего и ругать дизайнеров ● Стилизовать формы 5
- 7. 6 CSS ● "Природно" для браузера ● Чистый и семантичный html ● Не требует js ● Стилизируется не все ● Не кроссбраузерно + -
- 8. 7 JS + CSS ● Зоопарк браузеров ● Прикладной интерфейс ● Широкие возможности ● Много кода ● "Грязный" HTML ● Требуется поддержка js + -
- 9. 8 А что с JS? ● Vanilla JS ● MooTools ● Prototype ● jQuery ... ● jNice ● Nice Forms ● Uniform ● jQuery checkbox ● Select Box Factory ● ikSelect ...
- 10. 9 Как это работает? ● DOM элементы формы - "модель" данных ● Вспомогательный HTML - отображение ● Пользователь взаимодействует с вспомогательными HTML элементами ● JS связующее звено
- 11. Требования ● Естественное поведение ● Максимальное покрытие зоопарка браузеров ● Гибкая настройка внешнего вида ● Стилизация мелочей ● Документация ● Единый инструмент (все в одном) ● Плюшки 10
- 12. 11 И?
- 13. 12 И... ● Расчитаны лишь на современные браузеры ● Стилизируют только определенные элементы ● Нет стилизации скрола для select ● При динамическом обновлении контента "падают" ● Заброшены ● И вообще...
- 14. 13
- 15. 14 jClever умеет ● input[type=text] ● input[type=checkbox] ● select ● multyselect ● input[type=button] ● input[type=radio] ● input[type=file] ● texterea ● валидация форм ● темы оформления ● слежение за DOM ● API
- 16. 15 Темы оформления CSS темы в отдельных директориях <link rel="stylesheet" type="text/css" href="jCleverTemplate/alice/css/jClever.css" /> jCleverTemplate alice template 1 template ... template n images css
- 17. 16 Валидация и placeholder Предустановленные типы валидации: ● isNumeric ● isString ● isAnyText ● isEmail ● isSiteURL + регулярные выражения Пользовательские html шаблоны ошибок
- 18. 17 Слежение за DOM ● Поддержка AJAX и обновления страницы ● Собственное событие обновления DOM onDomChange ● Использование событий: DOMContentLoaded и др. ● Кроссбраузерная реализация ● Оптимизация скорости работы
- 19. 18 Простая иницализация jQuery(_form-selector_).jClever({ autoTracking: true, autoInit: true }); Возможность использования в одностраничных приложениях и сайтах с изменением контента без перезагрузки страницы
- 20. 19 API ● Обновление формы (refresh) ● Включение/отключение элементов форм ● Управление select (раскрытие, выбор активного и т.д.) ● Изменение select (option) ● Управление checkbox и radio ● Добавление новых элементов к форме ● Метод destroy ...
- 21. 20 А чем лучше? ● Свое, родное ● Поддержка AJAX и обновления DOM ● Стилизация раскрытого select ● Возможность стилизации scroll, отказ от системного ● Работает во всех поддерживаемых нами браузерах ● Единый инструмент с поддержкой и развитием
- 22. 21
- 23. 22 https://github.com/denis-zavgorodny/jClever Спасибо :) Денис Завгородний, AlterEGO https://twitter.com/DenisZavgorodny