jquery表格插件【jquery添加表格】 收藏 0

25个可遇不可求的jQuery插件

随着jQuery插件在网站建设过程中的使用率不断的增加，所以有必要跟进时代步伐开发出一些新的插件/代码片段，以此来巩固并提高前端用户体验，将用户体验提升到一个新的高度。

接下来所推荐的这些插件中有滑块、地图、图片旋转块等等，可以说是最好的、完全免费的jQuery插件。

1. Flat jQuery Price Slider

实例|下载

这个jQuery价格滑块可以在一定范围内选择需要的价钱，不管你是做开发项目的还是设计项目，它都会起很大的作用。记住，这个插件完全免费。

2. Gmaps jQuery Map Plugin

实例|下载

GMaps.js是一个JavaScript插件，通过它可以很容易地在你的应用程序中使用谷歌地图，并包含了多个选项，如地图、方向、信息框等等。它的脚本是由很少的代码和简洁文档构成的。因为安装操作很简单，所以要想让代码实现功能就得自己动手。

3. FormChimp—MailChimp Ajax plugin for jQuery实例|下载

FormChimp是jQuery里的一个可定义的MailChimp Ajax插件，为用户提供一个简便的注册方式，这样的话用户在你的MailChimp列表里注册就不是一件麻烦的事了。

4. OWL Carousel

实例|下载

此jQuery插件具有的触摸功能可以让用户创建出好看的响应式旋转滑块。

5. jQuery Spellchecker

实例|下载

这个轻量级的jQuery插件能检查文本文档里的单词拼写的正确性，主要是用在一个表单字段里或者是在DOM目录里。

6. Chart js

下载

Chart.js 是一个令人印象深刻的 JavaScript 图表库，建立在 HTML5 Canvas 基础上。目前，它支持6种图表类型：折线图、条形图、雷达图、饼图、柱状图和极地区域区。而且，这是一个独立的包，不依赖第三方JavaScript 库，小于 5KB。颜色，字体，边框和它们的尺寸都可以定制，图表可以动画的形式加载，非常炫。

7. Email-autocomplete

实例|下载

这个插件会建议你或者是直接在邮件地址栏里自动填写完域名。

8. Draggabilly

实例|下载

你可以用这个插件做一些可拖动的jQuery代码片段。

9. Interact.js

实例|下载

这是一个为电脑和移动设备上的浏览器而制作的可拖放、重置大小、调整手势的插件。

10. Sortable

实例|下载

它是一个极简单的JavaScript类库，主要是为现代浏览器和触摸设备而制定的。

11. rowGrid.js

实例|下载

大小只有800bytes gzipped的轻量级jQuery插件用处是把图片或其它项目排版在连续的行内。

12. Scattered Polaroid gallery

实例|下载

这个插件可以在容器里随机排版这些相片，当你选中了一个项目的时候它就会移动到屏幕中间，其它项目自动闪到旁边。

13. Viewport Image Resize

实例|下载

操作上比较简单，没有任何麻烦，重新设置图像大小和对图片进行修剪，这些都是基于pseudo视图而做的。

14. jQueryUI Limitslider

实例|下载

这一滑块插件允许在一条选择线上做出多个滑块，这些滑块可以用来代表位置、尺寸、举例等等，同时还可以在滑块上做标签或者是悬浮标题。

15. Freewall

实例|下载

Freewall是一个跨浏览器、响应式的jQuery插件，可以创建出多种多样适用在电脑、移动设备和平板电脑上的网格布局。

16. jQuery fontIconPicker

实例|下载

这个只有1.58kb gzipped大小的插件，可以让用户创建一个带有搜索功能的简单的图标选择器放在管理列表里。

17. Bootstrap-dialog

实例|下载

这个插件会让用户使用Bootstrap的模型更加熟练。

18. jquery.tabelizer

实例|下载

Tabelizer 1.0.3—用在表格上的多层次分组指标器。

19. Facebook Badge Jquery Plugin

实例|下载

FaceBadge可以在用户网站上添加了一个Facebook页面标记，用起来更省事。

20. Croppic

项目网页

这是一个用来裁剪图片的jQuery插件，效果超出你想象。

21. JQuery Plugin for Google Drive API

实例|下载

这个插件主要是为了让在不同设备上的Google Drive能够同步协作，传输文件等等，包括是Android设备。

22. Pick-a-Color

实例|下载

这项插件的设计之初就是希望所有人都能使用它，它的界面主要是基于Twitter Bootstrap的风格而设计，所以看起来比较亲切。

23. Simple Vertical Menu

下载代码

看上去很简单，但是很时髦的一个插件，使用了一些CSS3和jQuery技术，拥有自定义字体和令人影响深刻的标记图案。

24. jQuery Message Form

下载代码

这只是一个很小的字符计数器的实验版本。

25. Magnifying Glass Plugin with jQuery and CSS3项目主页

这是一个简单的小插件，基于TCP的排版设计。

原文来自：DesignScrazed

12个免费的jQuery插件来扩展结账表单功能

作者：JAKE ROCHELEAU 译者：半糖学前端 来源：designbombs

原文：https://www.designbombs.com/jquery-checkout-form-plugins/

如果您正在寻找方法来改进网站的结账表单，以通过卡验证和自定义表单等功能来改善用户体验，那么这些免费的jQuery插件将派上用场。

每个主要的电子商务网站都有自己的结帐流程。这始终是网站唯一的，但遵循相同的流程：用户输入信息，付款然后接收购买的商品。

您可以通过在结帐表单中添加其他功能来加快此过程。在本指南中，我将分享12个最好的免费jQuery插件，以将此必备功能添加到您的结帐和帐单页面。

01. jQuery信用卡验证器

首先是免费的jQuery信用卡验证器插件。如此简单的设置和一些有价值的功能，这绝对是不可思议的。

您可以在GitHub上浏览整个源代码，并将最新副本下载到.zip归档文件中。当信用卡号输入网站时，此插件会自动检测并验证信用卡号。它使用Luhn算法作为校验和来实时验证信用卡号。

每种CC类型都有不同的要求，您可以实时查看这些要求。例如，万事达卡和维萨卡分别具有不同的数字序列。因此，当输入某个抄送号码时，此脚本可以自动检测类型。这使访客在进入他们的卡时有一种信任感。

您可以使用纯jQuery下载源，但也可以在CoffeeScript中进行编辑。主要功能根据卡类型和有效性检查（有效长度，卡号和校验和）采用可选属性。

如果您正在寻找自动CC验证，那么这是您唯一需要的插件。

02.输入掩码

验证信用卡号是一回事。但是，将其正确格式化是一个完全独立的问题，可以使用Inputmask插件进行处理。

这确实包括一个jQuery插件，但它也可以在原始JavaScript上运行。绝对是此列表中更好的插件之一，非常适合格式化输入字段以匹配CC编号中的4位批处理。

但请注意，此插件不仅仅是CC号码掩码。它实际上支持您要屏蔽的任何内容，包括电话号码或邮政编码。您甚至可以传递自定义正则表达式代码来屏蔽所需的任何格式。

Inputmask与CC验证程序插件很好地配对，因为这两个可以将简单的输入字段转换为CC帐单。

03. jQuery AutoTab

在网上购买或注册新网站时，您可能会在某个时候体验过自动标签功能。

这在字段上设置了预定义的字符限制，因此，一旦用户达到该数字，它就会切换到下一个字符。jQuery AutoTab是一个很棒的免费插件，基本上不需要设置即可处理此功能。

使用此插件，您可以将焦点集中在向前或向后的输入上，对文本进行预格式化，然后将用户推到需要的位置。而且它确实支持正则表达式模式，因此您可以定位除简单电话号码以外的更复杂的制表符输入。

04. JavaScript自定义表单

PSD2HTML的团队发布了一个令人惊叹的定制表单包，称为JCF或JavaScript Custom Forms。

这是一个平滑的跨浏览器输入库，用于自定义表单的所有输入。下拉菜单选择，单选按钮，范围，数字滑块，文件上传等等。

您可以在主站点上看到所有元素的完整演示以及下载链接。整个库都在jQuery上运行，因为它还支持选择字段和切换输入（收音机/复选框）的自定义行为。

如果您正在寻找真正定制的结帐表格，则必须尝试JCF。它在GitHub上免费提供，并支持所有主流浏览器，包括IE 8+。

05. jQuery Mask插件

您可能会喜欢的另一个屏蔽插件是名称恰当的jQuery Mask Plugin。它由开发人员Igor Escobar创建，并在GitHub上免费提供了一个实时演示以进行测试。

我认为这个插件的实现非常容易遵循，特别是对于初学者。您只需将所需的格式传递给mask（）函数，并使用jQuery定位正确的输入字段。这样您就可以格式化日期，邮编，价格，几乎所有内容。

演示页面包含完整的文档，因此您甚至可以将代码直接复制/粘贴到您的项目中。一个非常出色的插件，无需任何繁琐的工作即可开始进行基本形式的自定义。

06.表单验证器

输入字段验证是最难破解的主题之一。根据您对密码，电子邮件地址，送货地址或结帐页面上其他任何内容的要求，这需要大量自定义代码。

在jQuery的表单验证插件是完全免费的，你可以用最好的一个。它在npm，Bower和GitHub上免费托管。

一个很大的好处是此插件如何保持HTML的干净。您可以将自定义数据属性传递到该字段中以创建验证设置，而无需编写任何JavaScript。在声明该字段有效之前，必须满足这些数据属性中的每个属性。

例如，您可以将data-validation-length =“ 6”传递到密码输入上，以强制输入至少6个字符或更多的密码。

请注意，此插件有很多功能可以使用。您可以使用侧面导航在首页上找到完整的文档，以浏览不同的设置。

如果要在本地或在诸如CodePen的浏览器IDE中进行测试，也可以在CDNJS上找到整个库。

07. jQuery验证引擎

内联表单验证有多种形式。在jQuery验证引擎目前处于2.6版本最流行的选择之一。

它已经在线超过7年，并且主要通过开发人员的贡献进行更新。但这是一个非常安全的插件，具有非常简单的设置。您只需创建字段，定义输入验证，然后设置工具提示消息。

有一个有点俗气，但可使用的演示在这里，你可以自己试一试。所有这些都通过具有自定义功能（例如日期范围，时间设置或信用卡号）的验证引擎运行。

您还可以在GitHub页面上找到完整的源代码，以方便访问。

08.工具提示

工具提示提供了一个完美的解决方案，可以使访问者与您保持联系，并解释每个字段以及如何正确填写。

该Tooltipster插件是完全免费和最好的周围之一。您可以为每个字段设置一系列自定义样式，位置和动画。您可以在Tooltipster网站上找到实时演示以及文档和浏览器支持。

在所有可用的工具提示插件中，到目前为止，这是我的最爱。当前版本为4.0，支持所有HTML5输入字段。您可以在用户将鼠标悬停在字段上，单击/选择或输入文本或任何您想要的内容时显示工具提示。

您控制触发点，工具提示器将执行其他所有操作。

要查看动画和选项的完整列表，请查看GitHub存储库并下载副本。

09.臭小费

Poshy Tip是另一个很棒的工具提示库。这有点老，但它确实支持现代jQuery和大多数现代浏览器。

您可以在网站上找到完整的演示示例，以及有关设置插件的文档。这些技巧确实看起来很漂亮，但是它们在动画方面有所限制。这就是Tooltipster超越此插件而脱颖而出的原因之一。

但是，如果您只需要简单高效的产品，Poshy Tip会做的很好。

10.日期选择器

此列表中的最新插件之一是由开发人员Fengyuan Chen创建的自定义datepicker UI。它在GitHub上免费提供，并带有精美的日历输入设计。

您可以将其添加到任何输入字段中，以设置其样式以选择日期，月份和年份。它确实具有触摸支持，因此它应可在所有移动设备上使用。更不用说它具有完全的响应能力，并具有一些不同的内联样式。

这是一个非常简单的设置插件，并具有许多可以扩展的功能。最好的方法是在jQuery上运行，因此它可以与您使用的任何其他插件完全匹配。

11. DataTextEntry.js

DataTextEntry.js是一个干净的jQuery插件，具有一些非常基本的功能。它为日期字段创建自动验证和格式设置。

它不是像上面的完整的datepicker插件。相反，这是一个支持常规输入字段的基本格式设置插件。这是在考虑键盘用户的情况下构建的，以实现最高级别的可访问性。

但这是一个非常简单的插件，因此，如果您不需要基于日期的格式，则无需为此担心。

12. Selectize.js

最后但同样重要的是Selectize.js。这个非常独特的插件使您可以将选择菜单转换为文本框，以便一次选择多个项目。

您可以在插件页面上使用许多不同的样式查看一些实时演示。该插件在选择字段下方支持选项标题甚至字幕。使用“远程获取”选项，您甚至可以从外部API提取数据并将这些项目加载到选择字段中。

整个插件是完全免费的，可以从GitHub下载。我认为它不会适合所有结帐表格，但是对于较大的选择字段，它无疑提供了独特的价值。

结论

由于这些插件是免费使用的，因此您可以轻松地对每个插件进行测试，直到找到适合您网站的最佳选项为止。只要记住要留意网站性能和页面加载时间。

我是 ，今天分享结束了，看完记得给个赞哟。关注我了解更多前端知识，一起学习共同进步！

10个最有趣的jQuery Grid插件

jQuery为广大用户提供了一种简单的方法来选择HTML元素和操作DOM，并且能更加动态、更加灵活的前端布局，据统计有95.4％的网站使用jQuery。

jQuery Grids是怎样工作的?

jQuery的网格可以为你的网站创建像Pinterest一样的布局。它像一个虚拟矩阵一样工作，并且遵循“箱内嵌”原则。 jQuery的网格动态计算出什么是项目最好的安排以及填充页面的方式，使的空白空间最少，如下图。

相比的CSS网格jQuery网格的主要优点是，它们支持图像或其它具有不同宽度和高度的媒体元素。下面介绍目前市场上10个最迷人的jQuery网格插件-当然和jQuery一样都是开源和免费的。

1. jQuery Nested

jQuery Nested提供了一个方便的多列网格布局响应，并支持所有设备类型。该jQuery插件可以说是完全无间隙的，在间隙自由度上处理得堪称完美。 jQuery Nested在填充表格矩阵中遵循独特的脚本。首先，创建了一个多列格，然后扫描矩阵间隙，并通过重新排序不同的元素来填充它们。最后-也就是使得该网格无间隙的步骤-调整在底行中与间隙不正确匹配的任何元素。

2. Freewall

Freewall允许创建你想要无论是图像的网格、嵌套网格或Metro风格的网格布局。它有许多像JavaScript变量一样可以设置的选项，如gutterX、gutterY、动画、cellW、cellH等。它还有自定义事件，如onGapFound和onResize，以及自定义方法。

3. Masonry

Masonry这个名字对于一些非常有经验的设计师来说已经再熟悉不过了。如果你还不了解，Masonry是既适用于jQuery又适用于vanilla JavaScript的级联网格布局库。 该插件以许多流行的WordPress主题为基础。你甚至不需要把它上传到你的服务器，就可以轻易直接从CDN链接到库。

Masonry可以说是建立得最好的jQuery网格，这就是为什么它有很多的选项的原因。你可以人容易在Bower或Node Package Manager上安装它。有了它的帮助你可以实现不同的网格布局，以及设置多个自定义变量、方法和事件。

4. Gridify

Gridify是一个轻量级的JavaScript插件，即可与jQuery又可与纯JavaScript一起使用。 Gridify像Pinterest一样布局。它支持加载事件，动态计算项目的宽度，并且处理具有非常长的高度的项目，还可通过CSS3的转换制作动画。

5. Shapeshift

Shapeshift是一个非常酷的拖拽jQuery网格系统。用户可以在整个页面上拖拽元素，元素每一次移动Shapeshift都为它们重组一个新的位置。 拖动事件在父容器中改变元素的索引位置。这样Spaceshift就不会使子元素的逻辑索引系统混乱。

Shapeshift在触摸设备上同样有效，因为它巧妙地利用了jQuery UITouch Punch应用程序。

本站文章除注明转载外，均为本站原创或翻译

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com