Какова Лучшая библиотека стилей элементов формы/плагин (jQuery)?
в проекте, над которым я работаю в данный момент, элементы формы (например,<input>
,<select>
,<textarea>
etc)
должно быть нестандартное "look-n-feel".
какую библиотеку или плагин (jQuery) вы можете порекомендовать для этого?
Я просмотрел некоторые доступные библиотеки, но не нашел библиотеку, которая подходит моим потребностям. Все они имеют "реальную" - "поддельную" идею элемента. Проект имеет много элементов формы, созданных на лету и введенных в ДОМ.
основные требования:
- создание "поддельного" элемента/s на лету.
- возможность применения стилей для одного узла или селектора CSS (не для всей страницы).
- неинтрузивное распространение событий между поддельными и реальными элементами. (Поддельный элемент должен реагировать на изменения в реальном элементе и отправлять события, происходящие на нем, в соответствующий реальный элемент как размытие, фокус, изменение, щелчок. Библиотека должна заботиться о распространении событий, не код)
- он должен быть совместим с IE7 и выше.
- должна иметь хорошую документацию и гибкий публичный API
Я борюсь с одной библиотекой и почти "адаптировал" ее к требованиям, но ей не хватает документации, и лицензирование неясно как могу ли я изменить его.
большое спасибо за помощь!
С уважением.
6 ответов
вы могли бы взглянуть на Twitter Bootstrap. Я считаю, что он использует CSS для выполнения большинства своих трюков, поэтому вам не нужна концепция компонента делегата (реальная/поддельная вещь), чтобы получить немного более полированный внешний вид.
вы можете посмотреть в них (февраль 2014):
uniformjs.com - стиль элементов формы (IE7+, chrome, safari, firefox)
github.com/emblematiq/Niceforms - элементы формы стиль - (может быть?) звучит рискованно, поскольку ни одно сообщество, одну коммитеров только (ИЕ7+, Firefox2+, Safari3+, Opera9+, Chrome0.3+)
github.com/harvesthq/chosen и harvesthq.на GitHub.Ио/выбран - форма выберите в раскрывающемся box
сайт ivaynberg.на GitHub.интерфейс IO/select2 - выпадающие (ИЕ8+), похоже, возникла из избранных.js (для двойной проверки)
github.com/Robdel12/DropKick и robdel12.на GitHub.Ио/пнуть - форма выбора/списка
github.com/gfranko/jQuery.selectBoxIt.js - форма выбора/списка
brianreavis.github.io/selectize.js или github.com/brianreavis/selectize.js - гибрид текстового поля и коробки-полезно для тегов, списков контактов, селекторов стран и так далее
arthurgouveia.com/prettyCheckable - форма флажки и переключатели стиль (IE7+, Chrome, Firefox, Safari и мобильные браузеры)
http://xoxco.com/projects/code/tagsinput/ или https://github.com/xoxco/jQuery-Tags-Input - теги
Twitter Бутстрэп!--4--> может быть хорошим вариантом тоже -используйте Настройщик чтобы загрузить только ту часть библиотеки, которая вам нужна, Подробнее о настройка компонентов начальной загрузки Twitter
вы можете это видеть!
http://twitter.github.com/bootstrap/base-css.html#forms
Bootstrap имеет очень и util вещи, которые могут вам помочь!!
мне очень нравится jQtransform: просто нужно включить библиотеку jQuery и плагин jqtransform
//required
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jqtransform.min.js"></script>
а затем примените преобразования ко всем формам
<script type="text/javascript">
$(function() {
//find all form with class jqtransform and apply the plugin
$("form").jqTransform();
});
</script>
или к определенной форме
<script type="text/javascript">
$(function() {
//find all form with class jqtransform and apply the plugin
$("form.jqtransform").jqTransform();
});
</script>
Если вы просто хотите стиль ввода, выберите и textarea, вам действительно не нужен javascript для этого. Это все легко возможно с помощью обычного css (изменение границ, цветов, фона, закругленных углов и т. д..). Только старые браузеры (IE) не смогут использовать закругленные углы на ваших элементах (форме).
Если вы также хотите иметь возможность стилизовать раскрывающийся список select-element, вам может понадобиться javascript, потому что это не будет работать в CSS.
из всех существующие библиотеки, на которые я смотрел, я нашел jqtransform самым простым в работе (как упоминалось ранее), потому что он обеспечивает "самые чистые" HTML-замены для элементов формы. Которые все легко стилизовать с помощью css.
но, у меня есть несколько проблем с jqTransform. Для начала, он содержит ошибку, которая заставляет событие onchance на элементе select не срабатывать, также у него нет опции destroy/refresh. Таким образом, вы не сможете стилизовать новые элементы, введенные в уже стилизованной форме. Для обеих сторон эти проблемы я создал обходные пути, чтобы заставить его работать. Я нашел исправление для события onchange (где-то здесь, в stackoverflow), и я также написал дополнительную функцию для обновления элемента jqTransform.
но из-за этих проблем и того факта, что jqTransform не обновлялся с 2009 года, я решил около месяца назад написать свой собственный плагин jQuery для обработки этой функции для меня.
Он называется "jQuery Mighty Form Styler", и он должен отлично работать с jQuery 1.7 и выше. На этом этапе он только стилизует элемент select, потому что другие элементы формы могут быть стилизованы с помощью css. Так зачем добавлять время загрузки на страницу с ненужным javascript? Я планирую добавить радио и флажки тоже, потому что стилизация их с помощью только css не так проста (и nog работает во многих браузерах).
Он уже имеет функцию обновления и уничтожения, чтобы удалить поддельные элементы или обновить содержимое поддельных элементов.
вы можете получить его на http://www.binkje.nl/mfs где можно найти документацию. Это бесплатно для всех, чтобы использовать. Хотя я считаю, что вы не должны ничего стиль с javascript. Это то, что вы должны делать только с CSS.
Если вы ищете стиль для настольных веб-и мобильных устройств-отзывчивое решение-взгляните на Mobiscroll Формы.
Он поставляется с 13 отличительными элементами управления от текстовых входов до предупреждений, уведомлений и настраиваемых ползунков. Вы должны быть покрыты для ваших основных потребностей формы и за ее пределами.
еще одна вещь, чтобы отметить, что элементы могут быть оформлены со встроенными темами-для iOS, Material, Windows, Web - и, конечно, с CSS выше что.
- набор инструментов можно скачать с сайт.
- Демос может быть видел здесь.
- если вы предпочитаете: GitHub РЕПО и НПМ пакет.