<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Basic usage</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
<!-- styles -->
<link href="bootstrap.min.css" rel="stylesheet">
<link href="demo.css" rel="stylesheet">
<!-- Add IntroJs styles -->
<link href="introjs.css" rel="stylesheet">
<link href="bootstrap-responsive.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="intro.js"></script>
<script>
$(function(){
$("#buttonShow").click(function(e){
introJs().setOptions({
//对应的按钮
prevLabel:"上一步",
nextLabel:"下一步",
skipLabel:"跳过",
doneLabel:"完成",
//按照数组中元素的顺序出现每一步引导提示
steps:[
//element使用jquery选择器类似功能，intro提示的文字，position提示出现的位置left,right,top,bottom
{element:'.masthead', intro:'<a href="http://www.csdn.net">点击me</a>',position:'right'},
{element:'.span6', intro:'second', position:'right'}
]
}).start();//运行介绍
});
});
</script>
</head>
<body>
<div class="container-narrow">
<div class="masthead">
<ul class="nav nav-pills pull-right">
<li><a href="#"><i class='icon-black icon-download-alt'></i> Download</a></li>
<li><a href="#">Github</a></li>
<li><a href="#">@usablica</a></li>
</ul>
<h3 class="muted">Intro.js</h3>
</div>
<hr>
<div class="jumbotron">
<h1>Basic Usage</h1>
<p class="lead" >This is the basic usage of IntroJs, with <code>data-step</code> and <code>data-intro</code> attributes.</p>
<a id="buttonShow" class="btn btn-large btn-success" href="#">Show me how</a>
</div>
<hr>
<div class="row-fluid marketing">
<div class="span6" >
<h4>Section One</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
<h4>Section Two</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
<h4>Section Three</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
</div>
<div class="span6">
<h4>Section Four</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
<h4>Section Five</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
<h4>Section Six</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
</div>
</div>
<hr>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
