target/classes/templates/demo/form/wizard.html

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<!DOCTYPE html>
<html lang="zh">
<head>
<th:block th:include="include :: header('表单向导')" />
<th:block th:include="include :: jquery-smartwizard-css" />
<style type="text/css">
/* 如果要让工具栏固定在页面底部,使用下面的样式,不需要的可以注释 */
.sw>.toolbar-bottom{
	z-index: 100;
    bottom: 0px;
    left: 0;
    width: 100%;
    position: fixed;
    text-align: right;
    background: #fff;
    box-shadow: 0 -2px 6px 1px hsla(223,8%,83%,.5);
    border-top: 1px solid #e3e4e8;
}
/* 如果设置了是否自动调节高度为false,需要加滚动条 */
.sw>.tab-content{
	overflow-x: hidden;
    overflow-y: auto;
}
/* 解决工具栏无法固定底部的问题（如果页面没有animated类可以不写这部分代码） */
.animated {
    animation-fill-mode: none;
    -webkit-animation-fill-mode: none;
    -moz-animation-fill-mode: none;
    -o-animation-fill-mode: none;
}
</style>
</head>
<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight" style="height: 100%;">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox">
					<div class="ibox-title">
						<h5>
							表单向导
							<small>https://github.com/techlab/jquery-smartwizard</small>
						</h5>
					</div>
					<div class="ibox-content">
						<div class="row select-list" style="padding-left: 15px; margin-bottom: 10px;">
							<ul>
								<li>
									选择样式：
									<select id="theme-selector">
										<option value="default">Default</option>
										<option value="arrows" selected>Arrows</option>
										<option value="dots">Dots</option>
										<option value="progress">Progress</option>
									</select>
								</li>
								<!-- 快速操作栏按钮 -->
								<li>
									<div class="btn-group-sm" role="group">
										<a class="btn btn-info" id="prev-btn"> 上一步 </a>
										<a class="btn btn-success" id="next-btn"> 下一步 </a>