10

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

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

我搜索了一些可用的库，但没有找到适合我需要的库。它们背后都有“真实”-“假”元素的想法。该项目有许多即时创建并注入到 DOM 中的表单元素。

主要要求是：

  • 即时创建“假”元素。
  • 能够为一个节点或 CSS 选择器（不是整个页面）应用样式。
  • 假元素和真实元素之间的非侵入式事件传播。（假元素应该响应真实元素的变化，并将其上发生的事件发送到相应的真实元素，如模糊、焦点、更改、单击。库应该关心事件传播，而不是代码）
  • 它应该与 IE7 及更高版本兼容。
  • 应该有良好的文档和灵活的公共 API

我在一个库上苦苦挣扎，几乎“适应”了它的要求，但它缺乏文档，而且许可不清楚我是否可以修改它。

非常感谢你的帮助！

亲切的问候。

4

6 回答 6

5

你可能想看看那些（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 - 表单复选框和单选按钮样式（IE7+、Chrome、Firefox、Safari 和移动浏览器）

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

Twitter Bootstrap也可能是一个不错的选择 -使用定制器仅加载您需要的库的一部分，阅读有关定制 Twitter 引导组件的更多信息

于 2014-03-04T12:35:51.343 回答
4

你可以看到这个！

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

Bootstrap 有非常实用的东西可以帮助你！

于 2012-07-24T23:48:59.647 回答
3

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

于 2012-07-24T23:49:01.840 回答
2

我真的很喜欢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>
于 2012-12-22T15:09:34.320 回答
0

如果您只想设置输入、选择和文本区域的样式，您实际上并不需要 javascript 来做到这一点。使用普通的 css（更改边框、颜色、背景、圆角等）很容易做到这一点。只有较旧的 (IE) 浏览器将无法在您的 (form) 元素上使用圆角。

如果您还希望能够为选择元素的下拉菜单设置样式，则可能需要 javascript，因为这在 CSS 中不起作用。

从我查看的所有现有库中，我发现 jqTransform 最容易使用（如前所述），因为它为表单元素提供了“最干净”的 HTML 替换。这些都很容易用 css 设置样式。

但是，我对 jqTransform 有一些问题。对于初学者来说，它包含一个错误，导致选择元素上的 onchance 事件不触发，而且它没有销毁/刷新选项。因此，您将无法对以已样式化的形式注入的新元素进行样式化。对于这两个问题，我创建了解决方法以使其正常工作。我找到了 onchange 事件的修复（stackoverflow 上的某处），我还编写了一个额外的函数来刷新 jqTransform 元素。

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

它被称为“jQuery Mighty Form Styler”，它应该适用于 jQuery 1.7 及更高版本。此时它只对 select 元素进行样式设置，因为其他表单元素可以使用 css 设置样式。那么，为什么要使用不必要的 javascript 为您的页面添加加载时间呢？我也计划添加单选框和复选框，因为仅使用 css 对它们进行样式设置并不容易（并且在很多浏览器中都可以使用）。

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

您可以在http://www.binkje.nl/mfs获得它，您还可以在其中找到文档。每个人都可以免费使用。尽管我确实相信您不应该使用 javascript 来设置任何样式。那是你应该只用 CSS 做的事情。

于 2013-01-07T10:30:57.200 回答
0

如果您正在寻找适用于桌面 Web 和移动设备的样式（一种响应式解决方案），请查看Mobiscroll Forms。

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

另一件需要注意的是，可以使用内置主题为元素设置样式 - 适用于 iOS、Material、Windows、Web - 当然还有上面的 CSS。

于 2017-05-31T08:39:17.993 回答