什么是最好的表单元素的造型库/插件(jQuery的)?(What is the best form

2019-07-30 14:25发布

在该项目中,我此刻的表单元素(如工作<input> <select><textarea>等)必须有非标“看正感觉”。

其中库或插件(jQuery的),你可以推荐吗?

我已经通过一些可用的库搜索,但没有找到一个适合我的需要的库。 他们都具有“真实” - “假”元素behid他们的想法。 该项目有很多关于即时创建并注入到DOM表单元素。

主要要求如下:

  • 对飞“假”元素/秒的创作。
  • 能够应用样式的一个节点或CSS选择器(不是整个页面)。
  • 虚假和真实元素之间的非侵入式的事件传播。 (假元素应该对真元的变化做出反应,并发送事件存在的它像模糊,重点,改变相应的真元,单击。国会图书馆应该照顾有关事件的传播,而不是代码)
  • 它应该与IE7和向上兼容。
  • 应具有良好的文档和灵活的公共API

我有一个图书馆,几乎挣扎的“改编”,它的要求,但它缺少文件和许可证是不清楚的我是否可以修改它。

非常感谢你的帮助!

亲切的问候。

Answer 1:

你可能有一个看一下Twitter的引导 。 我相信,它使用CSS来执行大部分的招数,所以你不应该需要一个委派组件(真/假的东西)的概念,以获得略微更精致的外观和感觉。



Answer 2:

你可能想看看那些(2014年2月):

uniformjs.com -表单元素样式(IE7 +,铬,动物园,火狐)

github.com/emblematiq/Niceforms -表单元素的造型- (也许)听起来危险的,因为没有社会,只有一个commiter(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 +,浏览器,Firefox,Safari浏览器和移动浏览器)

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

Twitter的引导可能是一个不错的选择太- 使用定制只加载您需要的库的一部分,了解更多关于自定义Twitter的引导组件



Answer 3:

你可以看到这个!

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

引导具有非常和util的东西,可以帮助你!



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)浏览器将无法在你的(形式)的元素使用圆角。

如果你也希望能够风格,你选择元素的下拉列表中,您可能需要JavaScript的,因为不会在CSS工作。

从现有的所有库我看着,我发现jqTransform最简单的用(如前面提到的),因为它提供了“干净”的HTML替换为您构成要素的工作。 这些都是很容易与CSS样式。

但是,我有jqTransform的几个问题。 对于初学者来说,它包含了引起选择元素上的onchance事件不火的一个错误,也已经没有破坏/刷新选项。 所以,你将无法风格在风格已经注入的形式新的元素。 对于这两个问题我已经创建的解决方法,使其工作。 我发现onchange事件的修复程序(这里计算器上的某个地方),我还写了一个额外的功能,以刷新jqTransform元素。

但是,由于这些问题,事实上,jqTransform尚未自2009年以来,我决定大约一个月前写我自己的jQuery插件来处理这个功能对我来说更新。

这就是所谓的“jQuery的全能型斯泰勒”,它应该可以正常使用jQuery 1.7及以上。 在这一点上它只是款式选择元素,因为其他表单元素可以使用CSS样式。 那么,为什么加载时间添加到您页面的JavaScript不必要的? 我打算追加单选和复选框也因为只有CSS样式他们不是那么容易(NOG和在很多浏览器的工作)。

它已经确实配备了刷新和销毁函数删除假元素或刷新假元素的含量。

你可以把它http://www.binkje.nl/mfs在这里你还可以找到的文档。 它是免费供大家使用。 虽然我认为你不应该风格的JavaScript的东西。 这是你应该只用CSS做。



Answer 6:

如果你正在寻找的造型既桌面Web和移动-一个负责任的解决方案-看看Mobiscroll形式 。

它附带的文字输入13个鲜明的对照,以警报,通知和自定义的滑块。 你应该覆盖你的基本形式的需求和超越。

另外要注意的是,该元素可以与内置的主题来称呼 - 适用于iOS,材料,窗口,网页 - 当然,以上是CSS。

  • 该工具包可以从下载网站 。
  • 演示可以看出这里 。
  • 如果你喜欢: Github上回购和NPM包 。


文章来源: What is the best form element styling library/plug-in (jQuery)?