<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery响应式步骤向导代码 - 更多源码【www.96flw.com】</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/jquery.steps.css" />
</head>
<body>
<div id="example-basic" style="width: 60%;margin: 50px auto;">
<h3>第一步</h3>
<section>
<div>
<p>这是一首简单的小情歌</p>
<p>唱出人们心中的曲折</p>
<p>我想我很适合</p>
<p>当一个歌颂者</p>
<p>啦啦啦啦啦啦啦</p>
</div>
</section>
<h3>第二步</h3>
<section>
<p>第二步</p>
</section>
<h3>第三步</h3>
<section>
<p>第三步</p>
</section>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.steps.js"></script>
<script>
$(function(){
$("#example-basic").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
autoFocus: true,
onStepChanging:function(){/*步骤更改之前进行验证，默认验证结果是true*/
// alert('步骤变更前触发');
return true;
},
onStepChanged:function(){/*步骤后变更后 触发的函数 */
return true;
// return false;
// alert('步骤变更后触发');
},
onFinishing:function () {/*点击 提交 前 触发的事件，默认验证结果是false */
return true;
// alert('提交前触发');
// return false;/*验证结果*/
},
onFinished:function () {/*点击 提交 后触发的事件*/
alert('提交');
}
});
})
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>更多源码<a href="http://www.96flw.com" target="_blank">www.96flw.com</a></p>
</div>
</body>
</html>
jQuery响应式步骤向导代码.zip
版权申诉
83 浏览量
2023-10-10
23:44:47
上传
评论
收藏 65KB ZIP 举报
jQuery响应式步骤向导代码.zip （5个子文件） 
jiaoben7769 js 
jquery.steps.js 52KB jquery.min.js 91KB css bootstrap.min.css 118KB jquery.steps.css 6KB
index.html 2KB资源评论
