什么是最好的表单元素样式库/插件(jQuery)



在我目前正在处理的项目中,表单元素(如<input><select><textarea>等)必须具有非标准的"look-n-feel"。

你可以为此推荐哪个库或插件(jQuery)?

我搜索了一些可用的图书馆,但没有找到适合我需求的图书馆。他们都有"真"-"假"的元素思想。该项目有许多动态创建的表单元素,并注入到DOM中。

主要要求有:

  • 正在创建"伪"元素
  • 能够为一个节点或CSS选择器(而不是整个页面)应用样式
  • 伪元素和真实元素之间的非侵入性事件传播。(伪元素应响应真实元素的变化,并将其上发生的事件发送到相应的真实元素比如模糊、聚焦、改变、点击。库应该关注事件传播,而不是代码)
  • 它应该与IE7及以上版本兼容
  • 应具有良好的文档和灵活的公共API

我很难找到一个图书馆,几乎"适应"了它的要求,但它缺乏文件,许可证也不清楚关于我是否可以修改它。

非常感谢你的帮助!

致以亲切的问候。

您可能需要了解这些(2014年2月):

uniformjs.com-表单元素样式(IE7+、chrome、safari、firefox)

github.com/embrationiq/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-表单选择/下拉框

brianravis.github.io/selectize.js或github.com/brianravis/selectionze.js-文本框和框的混合-用于标记、联系人列表、国家/地区选择器等

arthurguveia.com/prettyCheckable-表单复选框&单选按钮样式(IE7+、Chrome、Firefox、Safari和移动浏览器)

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

Twitter引导程序也可能是一个不错的选择-使用Customizer只加载您需要的库的一部分,阅读更多关于自定义Twitter引导程序组件的信息

您可以看到这一点!

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

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

您可能会看到Twitter引导程序。我相信它使用CSS来执行大部分技巧,所以你不应该需要委托组件(真实/虚假的东西)的概念来获得更精致的外观和感觉。

我真的很喜欢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>

如果您只想对输入、select和textarea进行样式化,那么您实际上并不需要javascript。使用普通css(更改边框、颜色、背景、圆角等)很容易做到这一点。只有旧的(IE)浏览器才能在(表单)元素上使用圆角。

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

从我查看的所有现有库中,我发现jqTransform是最容易使用的(如前所述),因为它为表单元素提供了"最干净"的HTML替换。这些都很容易用css进行样式设置。

但是,我对jqTransform有一些问题。对于初学者来说,它包含一个错误,导致select元素上的onchance事件不被激发,而且它没有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做的事情。

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

它配备了13个独特的控件,从文本输入到警报、通知和可自定义滑块。你应该为你的基本形式的需要和超越。

另一件需要注意的事情是,这些元素可以使用内置主题进行样式设置——适用于iOS、Material、Windows、Web——当然还有上面的CSS。

  • 该工具集可以从网站上下载
  • Demos可以在这里看到
  • 如果你喜欢:Github回购和NPM包

相关内容

  • 没有找到相关文章

最新更新