这篇文章介绍了 intro.js 页面引导简单用法,有需要的朋友可以参考一下
Intro.js 是非常好用的网站新特性介绍和详细用户教程制作框架。
intro.js demo http://usablica.github.io/intro.js/
第一步:在页面中引入 intro.js 和 introjs.CSS
第二步:选择你需要添加指引的区块,对区块添加唯一的 id 或者样式
第三步:写一个具体的 js 函数,完成引导功能
- <html>
- <head>
- <script src="@url.content("~/content/intro.js")" type="text/javascript"></script>
- <link href="@url.content("~/content/introjs.css")" rel="stylesheet" type="text/css" />
- <script type="text/javascript">
- $(function(){
- intro();
- });
- //每次页面加载时调用即可
- function intro(){
- //这个变量可以用来存取版本号, 系统更新时候改变相应值
- cur_val = 1;
- //判断函数所接收变量的长度
- if (arguments.length ==0)
- {
- //每个页面设置不同的cookie变量名称,不可以重复,有新版本时,更新cur_val
- //这里模拟很多网站有新版本更新时才出现一次引导页, 第二次进入进不再出现, 这里有cookie来判断
- if ($.cookie("intro_cookie_index") == cur_val)
- {
- return;
- }
- }
introjs().setoptions({
// 对应的按钮
prevlabel:"上一步",
nextlabel:"下一步",
skiplabel:"跳过",
donelabel:"结束",
// 对应的数组,顺序出现每一步引导提示
steps: [
{
// 第一步引导
// 这个属性类似于 jquery 的选择器, 可以通过 jquery 选择器的方式来选择你需要选中的对象进行指引
element: "#div1",
// 这里是每个引导框具体的文字内容,中间可以编写 html 代码
intro: "这是第一个 div~~",
// 这里可以规定引导框相对于选中对象出现的位置 top,bottom,left,right
position: "right"
},
{
// 第二步引导
element: "#div2",
intro: "这是第二个 div~~",
position: "left"
},
{
// 第三步引导
element: ".div3",
intro: "~~",
position: "bottom"
}
]
}).oncomplete(function(){
// 点击跳过按钮后执行的事件 (这里保存对应的版本号到 cookie, 并且设置有效期为 30 天)
$.cookie("intro_cookie_index",cur_val,{expires:30});
}).onexit(function(){
// 点击结束按钮后, 执行的事件
$.cookie("intro_cookie_index",cur_val,{expires:30});
}) .start();
}
来源: