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 相关文章推荐
你的编程语言可以这样做吗?
Sep 07 Javascript
js 禁用只读文本框获得焦点时的退格键
Apr 25 Javascript
JavaScript开发规范要求(规范化代码)
Aug 16 Javascript
Jquery绑定事件(bind和live的区别介绍)
Aug 23 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
Mar 06 Javascript
jQuery表格排序组件-tablesorter使用示例
May 26 Javascript
js对象基础实例分析
Jan 13 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
原生js调用json方法总结
Feb 22 Javascript
详解javascript 正则表达式之分组与前瞻匹配
May 30 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
使用Limit参数优化MySQL查询的方法
2008/11/12 PHP
PHP实现手机归属地查询API接口实现代码
2012/08/27 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
PHP中SSO Cookie登录分析和实现
2015/11/06 PHP
详解php用static方法的原因
2018/09/12 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
Function.prototype.bind用法示例
2013/09/16 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
jQuery制作仿Mac Lion OS滚动条效果
2015/02/10 Javascript
AngularJS  双向数据绑定详解简单实例
2016/10/20 Javascript
详解Webpack DLL用法以及功能
2017/07/11 Javascript
如何选择适合你的JavaScript框架
2017/11/20 Javascript
JS实现滑动插件
2020/01/15 Javascript
[01:03:47]VP vs NewBee Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
python下读取公私钥做加解密实例详解
2017/03/29 Python
使用python 爬虫抓站的一些技巧总结
2018/01/10 Python
python监控进程脚本
2018/04/12 Python
python绘制圆柱体的方法
2018/07/02 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
python爬取王者荣耀全皮肤的简单实现代码
2020/01/31 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
委托公证书
2014/04/08 职场文书
股权转让协议书范本
2014/04/12 职场文书
教书育人演讲稿
2014/09/11 职场文书
平面设计师岗位职责
2014/09/18 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
杨善洲观后感
2015/06/04 职场文书
2019思想汇报范文
2019/05/21 职场文书
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang