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 相关文章推荐
JavaScript中的私有成员
Sep 18 Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
javascript实现图像循环明暗变化的方法
Feb 25 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
Apr 15 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
js防阻塞加载的实现方法
Sep 09 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
Angular2生命周期钩子函数的详细介绍
Jul 10 Javascript
微信小程序下拉框功能的实例代码
Nov 06 Javascript
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 Javascript
JavaScript基于用户照片姓名生成海报
May 29 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
后宫无数却洁身自好的男主,唐三只爱小舞
2020/03/02 国漫
六酷社区论坛HOME页清新格调免费版 下载
2007/03/07 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
ThinkPHP分页实例
2014/10/15 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
js与C#进行时间戳转换
2014/11/14 Javascript
JavaScript数组对象赋值用法实例
2015/08/04 Javascript
JavaScript探测CSS动画是否已经完成的方法
2016/08/30 Javascript
Vue结合SignalR实现前后端实时消息同步
2017/09/19 Javascript
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
原生JavaScript实现的简单放大镜效果示例
2018/02/07 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
python解析xml文件实例分享
2013/12/04 Python
bat和python批量重命名文件的实现代码
2016/05/19 Python
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
python 中的paramiko模块简介及安装过程
2020/02/29 Python
keras slice layer 层实现方式
2020/06/11 Python
Python pip 常用命令汇总
2020/10/19 Python
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
Zavvi美国:英国娱乐之家
2017/03/19 全球购物
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
C面试题
2015/10/08 面试题
采购助理岗位职责
2014/02/16 职场文书
如何写一封打动人心的求职信
2014/02/17 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书
办公经费申请报告
2015/05/15 职场文书
创业计划书之干洗店
2019/09/10 职场文书
MySQL如何使用使用Xtrabackup进行备份和恢复
2021/06/21 MySQL
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android
关于python爬虫应用urllib库作用分析
2021/09/04 Python
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers