89 lines
4.5 KiB
HTML
89 lines
4.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
|
||
|
|
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
|
||
|
|
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
|
||
|
|
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
|
|
<title>jQeury.steps Demos</title>
|
||
|
|
<meta name="description" content="">
|
||
|
|
<meta name="viewport" content="width=device-width">
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="css/jquery.steps.css">
|
||
|
|
|
||
|
|
<script src="../lib/jquery-1.9.1.min.js"></script>
|
||
|
|
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!--[if lt IE 7]>
|
||
|
|
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
|
||
|
|
<![endif]-->
|
||
|
|
|
||
|
|
<header>
|
||
|
|
<h1>Wizard Demo</h1>
|
||
|
|
<nav>
|
||
|
|
<ul>
|
||
|
|
<li><a href="index.html">Basic</a></li>
|
||
|
|
<li><a href="vertical.html">Vertical</a></li>
|
||
|
|
<li><a href="tabs.html">Tabs</a></li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="content">
|
||
|
|
<h1>Basic Demo</h1>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function ()
|
||
|
|
{
|
||
|
|
$("#wizard").steps({
|
||
|
|
headerTag: "h2",
|
||
|
|
bodyTag: "section",
|
||
|
|
transitionEffect: "none",
|
||
|
|
enableFinishButton: false,
|
||
|
|
enablePagination: false,
|
||
|
|
enableAllSteps: true,
|
||
|
|
titleTemplate: "#title#",
|
||
|
|
cssClass: "tabcontrol"
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div id="wizard">
|
||
|
|
<h2>First Step</h2>
|
||
|
|
<section>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut nulla nunc. Maecenas arcu sem, hendrerit a tempor quis,
|
||
|
|
sagittis accumsan tellus. In hac habitasse platea dictumst. Donec a semper dui. Nunc eget quam libero. Nam at felis metus.
|
||
|
|
Nam tellus dolor, tristique ac tempus nec, iaculis quis nisi.</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<h2>Second Step</h2>
|
||
|
|
<section>
|
||
|
|
<p>Donec mi sapien, hendrerit nec egestas a, rutrum vitae dolor. Nullam venenatis diam ac ligula elementum pellentesque.
|
||
|
|
In lobortis sollicitudin felis non eleifend. Morbi tristique tellus est, sed tempor elit. Morbi varius, nulla quis condimentum
|
||
|
|
dictum, nisi elit condimentum magna, nec venenatis urna quam in nisi. Integer hendrerit sapien a diam adipiscing consectetur.
|
||
|
|
In euismod augue ullamcorper leo dignissim quis elementum arcu porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||
|
|
Vestibulum leo velit, blandit ac tempor nec, ultrices id diam. Donec metus lacus, rhoncus sagittis iaculis nec, malesuada a diam.
|
||
|
|
Donec non pulvinar urna. Aliquam id velit lacus.</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<h2>Third Step</h2>
|
||
|
|
<section>
|
||
|
|
<p>Morbi ornare tellus at elit ultrices id dignissim lorem elementum. Sed eget nisl at justo condimentum dapibus. Fusce eros justo,
|
||
|
|
pellentesque non euismod ac, rutrum sed quam. Ut non mi tortor. Vestibulum eleifend varius ullamcorper. Aliquam erat volutpat.
|
||
|
|
Donec diam massa, porta vel dictum sit amet, iaculis ac massa. Sed elementum dui commodo lectus sollicitudin in auctor mauris
|
||
|
|
venenatis.</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<h2>Forth Step</h2>
|
||
|
|
<section>
|
||
|
|
<p>Quisque at sem turpis, id sagittis diam. Suspendisse malesuada eros posuere mauris vehicula vulputate. Aliquam sed sem tortor.
|
||
|
|
Quisque sed felis ut mauris feugiat iaculis nec ac lectus. Sed consequat vestibulum purus, imperdiet varius est pellentesque vitae.
|
||
|
|
Suspendisse consequat cursus eros, vitae tempus enim euismod non. Nullam ut commodo tortor.</p>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|