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 相关文章推荐
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
javascript 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
Dec 30 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
Dec 31 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
Sep 11 Javascript
js控制页面控件隐藏显示的两种方法介绍
Oct 09 Javascript
jQuery事件用法实例汇总
Aug 29 Javascript
javascript制作坦克大战全纪录(2)
Nov 27 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
Aug 29 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
Jul 17 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
基于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
PHP新手上路(五)
2006/10/09 PHP
深入php 正则表达式的学习探讨
2013/06/06 PHP
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
2014/01/14 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
PHP数组操作简单案例分析
2016/10/15 PHP
利用phpexcel对数据库数据的导入excel(excel筛选)、导出excel
2017/04/27 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
laravel 框架执行流程与原理简单分析
2020/02/01 PHP
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
2015/12/01 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
2016/08/01 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
Parcel 打包示例(React HelloWorld)
2018/01/16 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
聊聊Vue中provide/inject的应用详解
2019/11/10 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
JS轮播图的实现方法
2020/08/24 Javascript
Python自定义线程类简单示例
2018/03/23 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
python字符串格式化方式解析
2019/10/19 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
高中毕业生自我鉴定例文
2013/12/29 职场文书
《七颗钻石》教学反思
2014/02/28 职场文书
兼职安全员岗位职责
2015/02/15 职场文书
2015年度房地产工作总结
2015/04/09 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP