在该项目中,我此刻的表单元素(如工作<input>
<select>
, <textarea>
等)必须有非标“看正感觉”。
其中库或插件(jQuery的),你可以推荐吗?
我已经通过一些可用的库搜索,但没有找到一个适合我的需要的库。 他们都具有“真实” - “假”元素behid他们的想法。 该项目有很多关于即时创建并注入到DOM表单元素。
主要要求如下:
- 对飞“假”元素/秒的创作。
- 能够应用样式的一个节点或CSS选择器(不是整个页面)。
- 虚假和真实元素之间的非侵入式的事件传播。 (假元素应该对真元的变化做出反应,并发送事件存在的它像模糊,重点,改变相应的真元,单击。国会图书馆应该照顾有关事件的传播,而不是代码)
- 它应该与IE7和向上兼容。
- 应具有良好的文档和灵活的公共API
我有一个图书馆,几乎挣扎的“改编”,它的要求,但它缺少文件和许可证是不清楚的我是否可以修改它。
非常感谢你的帮助!
亲切的问候。
你可能有一个看一下Twitter的引导 。 我相信,它使用CSS来执行大部分的招数,所以你不应该需要一个委派组件(真/假的东西)的概念,以获得略微更精致的外观和感觉。
你可能想看看那些(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的引导组件
你可以看到这个!
http://twitter.github.com/bootstrap/base-css.html#forms
引导具有非常和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)浏览器将无法在你的(形式)的元素使用圆角。
如果你也希望能够风格,你选择元素的下拉列表中,您可能需要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做。
如果你正在寻找的造型既桌面Web和移动-一个负责任的解决方案-看看Mobiscroll形式 。
它附带的文字输入13个鲜明的对照,以警报,通知和自定义的滑块。 你应该覆盖你的基本形式的需求和超越。
另外要注意的是,该元素可以与内置的主题来称呼 - 适用于iOS,材料,窗口,网页 - 当然,以上是CSS。
- 该工具包可以从下载网站 。
- 演示可以看出这里 。
- 如果你喜欢: Github上回购和NPM包 。