jQuery响应式步骤向导特效代码下载

jQuery响应式步骤向导特效代码下载

1. 引入CSS

<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/jquery.steps.css" />

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/jquery.steps.js"></script>

3. HTML代码

		<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>
		$(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>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

加群请备注:从官网了解到