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 相关文章推荐
JS的数组的扩展实例代码
Jul 09 Javascript
JavaScript中的apply()方法和call()方法使用介绍
Jul 25 Javascript
jquery删除数据记录时的弹出提示效果
May 06 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
Jun 10 Javascript
Javascript复制实例详解
Jan 28 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
Sep 21 Javascript
javaScript基础详解
Jan 19 Javascript
详解webpack多页面配置记录
Jan 22 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
Sep 23 Javascript
详解小程序BackgroundAudioManager踩坑之旅
Dec 08 Javascript
js实现特别简单的钟表效果
Sep 14 Javascript
如何在JS文件中获取Vue组件
Sep 16 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 zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
使用php shell命令合并图片的代码
2011/06/23 PHP
使用php+apc实现上传进度条且在IE7下不显示的问题解决方法
2013/04/25 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
基于jquery的页面划词搜索JS
2010/09/14 Javascript
jquery select(列表)的操作(取值/赋值)
2011/03/16 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
Jquery技巧(必须掌握)
2016/03/16 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
2016/07/22 Javascript
利用types增强vscode中js代码提示功能详解
2017/07/07 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
使用Node.js实现简易MVC框架的方法
2017/08/07 Javascript
微信小程序 上传头像的实例详解
2017/10/27 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
利用Python自动监控网站并发送邮件告警的方法
2016/08/24 Python
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
Django RBAC权限管理设计过程详解
2019/08/06 Python
《莫泊桑拜师》教学反思
2014/04/23 职场文书
2014年党务公开工作总结
2014/12/09 职场文书
小学生学习保证书
2015/02/26 职场文书
个性发展自我评价2015
2015/03/09 职场文书
护士自荐信范文
2015/03/25 职场文书
致青春观后感
2015/06/09 职场文书
运动会报道稿大全
2015/07/23 职场文书
祝酒词范文
2015/08/12 职场文书
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS