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 动态将数字金额转化为中文大写金额
May 14 Javascript
JavaScript Array Flatten 与递归使用介绍
Oct 30 Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 Javascript
js中键盘事件实例简析
Jan 10 Javascript
Bootstrap中的Panel和Table全面解析
Jun 13 Javascript
jQuery简单动画变换效果实例分析
Jul 04 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 Javascript
vue 怎么创建组件及组件使用方法
Jul 27 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 Javascript
node中的密码安全(加密)
Sep 17 Javascript
JS中的防抖与节流及作用详解
Apr 01 Javascript
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
基于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
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
也谈php网站在线人数统计
2008/04/09 PHP
提升PHP性能的21种方法介绍
2013/06/25 PHP
php二维数组用键名分组相加实例函数
2013/11/06 PHP
基于PHP实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
PHP注释语法规范与命名规范详解篇
2018/01/21 PHP
innerText和innerHTML 一些问题分析
2009/05/18 Javascript
javascript实现简单的Map示例介绍
2013/12/23 Javascript
jquery选择符快速提取web表单数据示例
2014/03/27 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
浅谈react受控组件与非受控组件(小结)
2018/02/09 Javascript
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
ES6函数实现排它两种写法解析
2020/05/13 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
python实现排序算法解析
2018/09/08 Python
numpy.transpose()实现数组的转置例子
2019/12/02 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
python如何处理程序无法打开
2020/06/16 Python
利用django创建一个简易的博客网站的示例
2020/09/29 Python
Python利用myqr库创建自己的二维码
2020/11/24 Python
应聘美工求职信
2013/11/07 职场文书
学习交流会主持词
2014/04/01 职场文书
商务考察邀请函模板
2015/02/02 职场文书
个人总结格式范文
2015/03/09 职场文书
心术观后感
2015/06/11 职场文书
2015大学迎新标语
2015/07/16 职场文书
2019通用版新员工入职培训方案!
2019/07/11 职场文书
导游词之广州陈家祠
2019/10/21 职场文书
Python turtle编写简单的球类小游戏
2022/03/31 Python