整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页进度条</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#progressBox{
width: 300px;
height: 40px;
position: relative;
border: 1px solid #c8c8c8;
background: #fff;
}
#progressBar,#progressText{
position: absolute;
left: 0;
top: 0;
width: 100%;
line-height: 40px;
font-size: 18px;
text-align: center;
}
/*clip属性适用于绝对定位*/
#progressBar{
z-index: 2;
background: #00a1f5;
/*第二个参数表示所切宽度*/
clip: rect(0px,0px,140px,0px);
color: white;
}
#progressText{
z-index: 1;
color: black;
}
</style>
</head>
<body>
<div id="progressBox">
<div id="progressBar">0%</div>
<div id="progressText">0%</div>
</div>
</body>
//从网页上加载过来的jquery
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
var iNow=0;//写死数据，实际情况应该取得后台返回的ajax数据
var timer=setInterval(function(){
iNow+=2;
if(iNow>100){
clearInterval(timer);
}
else{
progressFn(iNow);
}
},30);
});
function progressFn(cent){
var progressBox=$("#progressBox");
var progressBar=$("#progressBar");
var progresstext=$("#progressText");
var toalWidth=progressBox.width();
progressBar.text(cent+"%");
progresstext.text(cent+"%");
progressBar.css({clip:'rect(0px,'+cent/100*toalWidth+'px,140px,0px)'});
}
</script>
</html>
Query表单向导是一个jQuery插件，与某种表格流协助表单创建（不用刷新页面）。举个例子，如果你有一个巨大的表格来输入用户数据，你可以使用表单向导来将其分成一系列相关步骤。这一优点使用户不会被超长表单吓到，并且当用户输入信息时为其提供一些进度指示。
在这篇文章中，我们列出了开发者最喜欢的六大jQuery表单向导，考量了它们的不同功能以及如何创立你自己的向导。这不会是一个冗长的列表，如果你正在寻找一个jQuery表单向导，这一定会为你指明正确的方向。
此列表在2017年8月30日更新，从列表中删除了损坏和弃用的插件，并加入了新的插件来提供开发者要求的功能。
1. jQuery Steps
jQuery Steps是一个智能UI元素，使开发者可以很方便地创建向导界面。这个插件将内容分成区块来形成更有结构和顺序 的页面外观。它有多种功能，例如、状态保持（这会保存你每一步的输入）以及每个区块的过渡效果。它可以通过NuGet或者bower安装，拥有内容和功能丰富的API。
2. jQuery Smart Wizard
Smart Wizard是一个灵活且高度客户化的jQuery步骤向导插件，有Bootstrap支持。它很容易执行，并且可以为你的表单、检出屏幕、注册步骤创建一个整洁而时髦的界面。它的功能包括主题支持（包括了多个主题）、URL导航、步骤选择和动态隐藏或关闭步骤。它可以通过npm、bower和composer安装，拥有内容和功能丰富的API。
3. formToWizard
这个小型插件可以用jQuery将任何网络表格转换成多步骤的向导，每个表格<fieldset>可以转换成具有前进和后退按键的单独步骤。虽然它没有像前两个插件那么多的功能，但它和jQuer确认插件整合，来提供确认功能。它是一个单独的文件（所以你可以从GitHub上将其提取下来），如果JavaScript不可用，它会慢慢的退化。
4. jQuery Stepy
jQuery Stepy是一个生成可客户化表格的向导。它假定表格有特定的结构，其中有特定的类。然后你只需要初始化插件，然后就拥有了表单向导。
此插件没有任何预先设定的风格。但是，它提供了丰富的选择，例如可以在步骤之间导航，提供前进、后退和完成按钮与过渡效果，与任何你选用的确认插件整合。它提供了合理的API，例如允许你触发步骤间的召回，或者当前步骤的确认后的召回。
5. Twitter Bootstrap Wizard
这个Twitter Bootstrap插件利用形式可转换结构建造向导。它允许用户利用按钮来建造一个向导功能，来遍访不同的向导步骤和实践，并分别接入每一步。此插件关键的优势在于它和Bootstrap紧密整合。它有一些基本功能，例如确认、进度条和创建或移除步骤的能力。另外，为了简单地从GitHub中复制插件，它还可以通过Bower（虽然并不推荐）来安装。它有不错的内容且提供了基础的API。
6. jQuery.wizard
最后要介绍的是jQuery.wizard。这是一个不同的表单向导，支持分支——在评论中被要求的功能之一。
基本结构包括步骤和分支，后者是选择性的。一个简单的线性表格可能只要求一个包含所有步骤的分支，但复杂的表格可能要求用到多个分支，甚至是极为复杂的分支。开发者需要处理表单中步骤和分支的数量。向导采用了不同的有限步骤决定怎样自身导航。
这一插件的内容前所未有的丰富，提供了扩展API。它可以通过npm或者Bower来安装，与Internet Explorer 6之后的所有版本兼容。它可以和多种其他插件整合，包括最受欢迎的jQuery Validation。你可以通过复制回复并在浏览器中查看examples/index.html来查看不同的例子。
彩蛋
开源软件的世界很精彩，在为新项目选用插件时可以坐享极丰富的选择。但是，这并不意味着我们应该躲避为有真正作用的软件付费。以下是两种需要付费的表单向导插件。我推荐你们去看一看它们，说不定会对你有用：
Form Wizard – Multi Step Form Validation（下载链接：https://codecanyon.net/item/form-wizard-multi-step-form-validation/19613591）
Timon – Step Form Wizard + jQuery Step Form Builder（下载链接：https://codecanyon.net/item/timon-step-form-wizard/15830006）
最后，如果你是那种喜欢弄懂所有事情的原理，不喜欢使用插件，那么你可能会想要看一看以下这些教程，告诉你如何通过探索来创建一个表单向导。
Turn any webform into a powerful wizard with jQuery（地址：http://www.jankoatwarpspeed.com/turn-any-webform-into-a-powerful-wizard-with-jquery-formtowizard-plugin/）
Multistep Form With Progress Bar Using jQuery And CSS（地址：http://talkerscode.com/webtricks/multistep-form-with-progress-bar-using-jquery-and-css.php）
结论
你已经拥有6个jQuery表单向导插件的详尽概览，每一个插件都有不同的功能和特点。根据项目要求来选用它们，希望你可以从这篇文章中找到对你有所帮助的内容。如果有什么遗漏请告知我们，或者通过下方评论告诉我们你最喜欢的插件是哪一个。
家好，今天给大家分享一篇阅读的文章，本篇文章主要讲了 12 个 HTML 标签（组件），通过这些标签避免你在项目中集成复杂第三方组件，比如日历组件、颜色选择、进度条等...，简单的标签就能很方便的调用系统组件。
在项目中，你可能希望通过调色板组件动态调整颜色，这时你可以使用 <input type="color"> 就可以轻松调用一个调色板组件，省去你在找第三方组件，示例效果如下：
示例地址：https://codepen.io/madarsbiss/pen/vYJBqeX
在文章排版时，有时候我们需要引用一些信息，这时我们需要用特殊的样式进行强调，这时你可以使用<blockquote> 标签来强调你用的内容，示例效果如下所示
示例地址：https://codepen.io/madarsbiss/pen/JjyPQBd
如果从头写个音频播放器是一个费时费力又有挑战性的工作，但是你现在可以使用<audio>标签就能很轻松的调用。系统的音频播放器，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/oNevrEb
我们不仅能很方便的调用系统的音频组件，我们还可以使用<video> 标签调用视频组件，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/BadBgxJ
折叠列表的需求也是比较常见的，点击标题展开对应的信息内容，这时 <details> 标签就派上用场了，示例效果如下所示：
gif
项目地址：https://codepen.io/madarsbiss/pen/zYdOVPV
日期选择组件可以说是项目中必备的组件，想必大家都有自己比较常用的日期组件，如果没有复杂的样式和交互需求，使用<input type="date"> 这个标签就能轻松的胜任，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/qBXWzXE
滑块组件也是一个比较常见的组件，主要应用在数值范围的筛选上，方便用户进行选择，这时我们可以使用 <input type="range"> ，我们可以设置最小值、最大值以及当前值，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/GRvKbXv
为了让内容具有编辑性，你可以不必使用表单组件，比如 input、textarea 标签，你可以在可编辑的容器(div) 上添加 contenteditable 属性，就能很轻松的完成当前容器及所见即所得的编辑，示例如下所示：
示例地址：https://codepen.io/madarsbiss/pen/ExvYBwB
有时候需要在不同的分辨率下显示不同的图片，如果你使用<img> 标签的话，你需要做的工作就会许多，但是使用<picture> 标签就能很轻松的完成在不同分辨率下显示不同图片的设置，调整浏览器的大小，就会根据窗口的大小显示不同大小的图片，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/abybomY
十、进度条（Progress Bar）
进度条组件也是个很常见的组件，你可以使用<progress> 标签就能轻松完成相关外观的设置，示例效果如下：
示例地址：https://codepen.io/madarsbiss/pen/oNevKdp
如果下拉组件选项比较多，用户选择就会比较困难，用户可能希望结合输入，能很方便的定位到下拉组件的内容，这时候你可以使用 <datalist> 标签就能满足上述需求，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/eYEOwdQ
如果你需要对页面某部分进行详细介绍时，你可能需要鼠标经过此区域显示详细的提示框效果，这时我们可以使用 title 属性就能轻松实现，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/VwzwZvE
今天的文章就分享到这里，希望在日后的项目中你能想起今天分享的这12个标签（组件），感谢你的阅读。
参考：
https://javascript.plainenglish.io/12-simple-html-snippets-to-avoid-complex-libraries-7f2965087312
作者：Madza
*请认真填写需求信息，我们会在24小时内与您取得联系。
