10 个基于jQuery的表单增强脚本和插件
openkk 12年前
<p>以下10个基于jQuery的脚本和插件可以有效地提高表单的可访问性和功能性，本文中的一些源码和演示也许能帮助你优化当前的表单，使访问者获得良好的用户体验。 <br /> <br /> <strong>1. Form Hints 1.0</strong> <br /> <br /> 使用这个插件，你可以为网站中的的任何一个表单控件添加描述文字，可以通过title属性来添加。用户可以点击控件来显示或隐藏描述文字。 <br /> </p> <div style="text-align:center;"> <img alt="10 个基于jQuery的表单增强脚本和插件" src="https://simg.open-open.com/show/78d63339ec0308c7f8f59d9353e0bddb.jpg" width="580" height="150" /> </div> <p><br /> <a href="/misc/goto?guid=4958318918103298666" target="_blank">源码+演示</a> <br /> <br /> <strong>2. jQuery 表单选择器</strong> <br /> <br /> jQuery的许多表单选择器可以更加方便和高效地访问表单元素。下面是一个简单的jQuery表单选择器相关介绍。 <br /> </p> <div style="text-align:center;"> <img alt="10 个基于jQuery的表单增强脚本和插件" src="https://simg.open-open.com/show/417c2619a2c0838d9f8ddb653d102c08.jpg" width="580" height="150" /> </div> <p><br /> <a href="/misc/goto?guid=4958318919089185494" target="_blank">源码</a> / <a href="/misc/goto?guid=4958318919886945627" target="_blank">演示</a> <br /> <br /> <strong>3. Web SpinButton</strong> <br /> <br /> 这是一个关于文本框数值微调按钮控件的示例。 <br /> </p> <div style="text-align:center;"> <img alt="10 个基于jQuery的表单增强脚本和插件" src="https://simg.open-open.com/show/b84acc02e00c61c518e2c1a82d126f0c.jpg" width="580" height="150" /> </div> <p><br /> <a href="/misc/goto?guid=4958318920673359026" target="_blank">源码+演示</a> <br /> <br /> <strong>4. 页面跳转警告</strong> <br /> <br /> 添加该脚本后，在你离开页面前，会弹出一个警告，提示你提交表单或进行其他类似的操作。 <br /> </p> <div style="text-align:center;"> <img alt="10 个基于jQuery的表单增强脚本和插件" src="https://simg.open-open.com/show/164faab235c89ac67befb0087ca93d46.jpg" width="580" height="150" /> </div> <p><br /> <a href="/misc/goto?guid=4958318921462108753" target="_blank">源码</a> / <a href="/misc/goto?guid=4958318922245622467" target="_blank">演示</a> <br /> <br /> <strong>5. 推ter 提示框</strong> <br /> <br /> 添加该脚本后，会出现一个类似推ter的简单有趣的提示框。 <br /> </p> <div style="text-align:center;"> <img alt="10 个基于jQuery的表单增强脚本和插件" src="https://simg.open-open.com/show/02ebeeebdc238a49e4bd61480d14a3cd.jpg" width="580" height="150" /> </div> <p><br /> <a href="/misc/goto?guid=4958318923025377703" target="_blank">源码+演示</a> <br /> <br /> <strong>6. Unwrongest</strong> <br /> <br /> 添加这个jQuery插件后，文本框的大小会随着输入的内容自动进行调整，就像非死book的Boxes一样。 <br /> </p> <div style="text-align:center;"> <img alt="10 个基于jQuery的表单增强脚本和插件" src="https://simg.open-open.com/show/a9c5983426d67cd2b84b4ea1051d0904.jpg" width="580" height="150" /> </div> <p><br /> <a href="/misc/goto?guid=4958187157986503227" target="_blank">源码</a> / <a href="/misc/goto?guid=4958318924539176490" target="_blank">演示</a> <br /> <br /> <strong>7. Clearfield</strong> <br /> <br /> 当输入框内没有内容时，利用这个插件可以显示输入提示。 <br /> </p> <div style="text-align:center;"> <img alt="10 个基于jQuery的表单增强脚本和插件" src="https://simg.open-open.com/show/69d001bb462c80201c9a11fdb3ca5304.jpg" width="580" height="150" /> </div> <p><br /> <a href="/misc/goto?guid=4958187143985958081" target="_blank">源码+演示</a> <br /> <br /> <strong>8. 选中多个元素</strong> <br /> <br /> 利用这个脚本，可以在所有供你选择的条目中选择全部，或只选择需要的元素集合。 <br /> </p> <div style="text-align:center;"> <img alt="10 个基于jQuery的表单增强脚本和插件" src="https://simg.open-open.com/show/b961490eeda748da0537c87d0393e9f3.jpg" width="580" height="150" /> </div> <p><br /> <a href="/misc/goto?guid=4958187171165145072" target="_blank">源码</a> / <a href="/misc/goto?guid=4958318926767199014" target="_blank">演示</a> <br /> <br /> <strong>9. 将表单label显示在输入框中</strong> <br /> <br /> 添加该脚本后，可以将表单的label值显示在输入框中，使界面更加简洁。 <br /> </p> <div style="text-align:center;"> <img alt="10 个基于jQuery的表单增强脚本和插件" src="https://simg.open-open.com/show/5dd8ae1748f4a501ef40291c635eb628.jpg" width="580" height="150" /> </div> <p><br /> <a href="/misc/goto?guid=4958187141776604599" target="_blank">源码</a> / <a href="/misc/goto?guid=4958318928275007040" target="_blank">演示</a> <br /> <br /> <strong>10. 自动保存</strong> <br /> <br /> 这个插件增强了表单功能，可以自动将表单字段保存到cookies中。每经过一定的时间（默认为10秒）或离开页面时自动进行保存。 <br /> </p> <div style="text-align:center;"> <img alt="10 个基于jQuery的表单增强脚本和插件" src="https://simg.open-open.com/show/7ce598e426edd9a08d1489707e03c0c1.jpg" width="580" height="150" /> </div> <p><br /> <a href="/misc/goto?guid=4958318929049115134" target="_blank">源码+演示</a> <br /> <br /> 英文原文：<a href="/misc/goto?guid=4958318929839340638" target="_blank">http://www.jquery4u.com/forms/10-jquery-form-%E2%80%93-accessibility-functionality/</a></p> <br /> 本文转载自: iteye