Question

在我正在处理的项目表单元素（如<input>，<select>，<textarea>等）中必须有非标准的'外观'。

您可以为此推荐哪个库或插件（jQuery）？

我搜索了一些可用的库，但没有找到适合我需求的库。他们所有人都有'真实' - '假'元素的想法。该项目有很多表格元素即时创建并注入DOM。

主要要求是：

动态创建'假'元素。
能够为一个节点或CSS选择器（而不是整个页面）应用样式。
虚假和真实元素之间的非侵入事件传播。（假元素应响应真实元素的变化，并将发生的事件发送到相应的真实元素喜欢模糊，专注，改变，点击。图书馆应该关注事件传播，而不是代码）
它应与IE7及以上版本兼容。
应该有良好的文档和灵活的公共API

我正在与一个图书馆挣扎，几乎“适应”它的要求，但缺乏文件，许可证不明确至于我是否可以修改它。

非常感谢您的帮助！

亲切的问候。

Answer 1

你可能想看看那些（2014年2月）：

uniformjs.com - 表单元素样式（IE7 +，chrome，safari，firefox）

github.com/emblematiq/Niceforms - 表单元素样式 - （可能？）听起来很危险，因为没有社区，只有一个提交者（IE7 +，Firefox2 +，Safari3 +，Opera9 +，Chrome0.3 +）

github.com/harvesthq/chosen和harvesthq.github.io/chosen - 表单选择/下拉框

ivaynberg.github.io/select2 - 下拉框（IE8 +），它似乎源自Chosen.js（需要仔细检查）

github.com/Robdel12/DropKick和robdel12.github.io/DropKick - 表单选择/下拉框

github.com/gfranko/jQuery.selectBoxIt.js - 表单选择/下拉框

brianreavis.github.io/selectize.js或github.com/brianreavis/selectize.js - 文本框和框的混合 - 对标记，联系人列表，国家/地区选择器等非常有用

arthurgouveia.com/prettyCheckable - 表单复选框＆amp;单选按钮样式（IE7 +，Chrome，Firefox，Safari和移动浏览器）

http://xoxco.com/projects/code/tagsinput/或https://github.com/xoxco/jQuery-Tags-Input - 代码

Twitter Bootstrap也可能是一个不错的选择 - Use the Customizer只能加载您需要的库部分，请详细了解customizing Twitter bootstrap components

Answer 2

你可以看到这个！

http://twitter.github.com/bootstrap/base-css.html#forms

Bootstrap有很多可以帮助你的东西!!

Answer 3

您可以查看Twitter Bootstrap。我相信它使用CSS来执行大部分技巧，所以你不应该需要委托组件的概念（真/假的东西）来获得更加优雅的外观和感觉。

Answer 4

我非常喜欢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>

Answer 5

如果您只是想要输入样式，请选择和textarea，你真的不需要javascript来做到这一点。使用普通的css（更改边框，颜色，背景，圆角等）很容易实现。只有较旧的（IE）浏览器才能在您的（表单）元素上使用圆角。

如果您还希望能够为select-element的下拉列表设置样式，则可能需要使用javascript，因为这在CSS中不起作用。

从我查看的所有现有库中，我发现jqTransform最容易使用（如前所述），因为它为您的表单元素提供了“最干净”的HTML替换。哪些都很容易与CSS风格。

但是，我对jqTransform有一些问题。对于初学者来说，它包含一个错误，导致select元素上的onchance事件不会触发，也没有destroy / refresh选项。因此，您将无法设置以已经样式化的形式注入的新元素的样式。对于这两个问题，我已经创建了变通方法以使其工作。我找到了onchange事件的修复程序（在stackoverflow上的某个地方），我还编写了一个额外的函数来刷新jqTransform元素。

但是，由于这些问题以及自2009年以来jqTransform尚未更新的事实，我决定在一个月前编写自己的jQuery插件来为我处理此功能。

它被称为'jQuery Mighty Form Styler'，它应该可以与jQuery 1.7及更高版本一起使用。此时它只对select元素进行样式化，因为其他表单元素可以使用css进行样式设置。那么为什么要用不必要的javascript为你的页面添加加载时间呢？我也打算添加收音机和复选框，因为用css设计它们并不容易（并且在很多浏览器中工作）。

它已经具有刷新和销毁功能，可以删除假元素或刷新虚假元素的内容。

您可以在http://www.binkje.nl/mfs找到该文档。每个人都可以免费使用。虽然我确实相信你不应该用javascript来设置任何东西。这是你应该只用CSS做的事情。

Answer 6

如果您正在寻找桌面网络和移动设备的样式 - 响应式解决方案 - 请查看Mobiscroll Forms。

它附带13个独特的控件，从文本输入到警报，通知和可自定义的滑块。您应该满足您的基本表格需求及其他需求。

另外需要注意的是，元素可以使用内置主题设置样式 - 对于iOS，材质，Windows，Web - 当然还有CSS以上。

可以从website下载该工具集。
演示可以见过here。
如果您愿意：Github repo和NPM package。

什么是最好的表单元素样式库/插件（jQuery）？

6 个答案: