intro.js 页面引导简单用法 分享


Posted in Javascript onAugust 06, 2013

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: "<a href="www.cnblogs.com">这是第三个div</a>~~",
                        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();            
        }
</script>
</head>
<body>
     <div id="div1">这里出现第一步引导</div>
     <div id="div2">这里出现第二步引导</div>
     <div class="div3">这里出现第三步引导</div>
</body>
</html>
Javascript 相关文章推荐
Jquery 获取指定标签的对象及属性的设置与移除
May 29 Javascript
JS判断移动端访问设备并加载对应CSS样式
Jun 13 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
Nov 23 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 Javascript
基于jquery.page.js实现分页效果
Jan 01 jQuery
微信小程序实现漂亮的弹窗效果
May 26 Javascript
详解node.js的http模块实例演示
Jul 12 Javascript
vue实现多个元素或多个组件之间动画效果
Sep 25 Javascript
实现Vue的markdown文档可以在线运行的方法示例
Dec 11 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
antd多选下拉框一行展示的实现方式
Oct 31 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
Aug 06 #Javascript
IE下JS读取xml文件示例代码
Aug 05 #Javascript
JavaScript的递归之递归与循环示例介绍
Aug 05 #Javascript
php与js的区别是什么
Aug 05 #Javascript
IE下写xml文件的两种方式(fso/saveAs)
Aug 05 #Javascript
js获取input标签的输入值实现代码
Aug 05 #Javascript
js实现页面转发功能示例代码
Aug 05 #Javascript
You might like
PHP文本数据库的搜索方法
2006/10/09 PHP
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
PHP 数组入门教程小结
2009/05/20 PHP
php array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
php 文件缓存函数
2011/10/08 PHP
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
2012/09/16 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
vue中七牛插件使用的实例代码
2017/07/28 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
2018/09/30 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
[29:23]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场1
2014/05/23 DOTA
用Python写的图片蜘蛛人代码
2012/08/27 Python
详解Python使用simplejson模块解析JSON的方法
2016/03/24 Python
Django自定义用户认证示例详解
2018/03/14 Python
Python实现常见的回文字符串算法
2018/11/14 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
个人求职信范例
2014/01/29 职场文书
个人自荐材料
2014/05/23 职场文书
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
最感人的道歉情书
2015/05/12 职场文书
追讨欠款律师函
2015/06/24 职场文书
新闻稿标题
2015/07/18 职场文书
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle
制作能在nginx和IIS中使用的ssl证书
2021/06/21 Servers