intro.js 页面引导简单用法 分享

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>

赞 (0)

相关推荐

  • Android绘制炫酷引导界面

    Android绘制炫酷引导界面

    一个超炫的引导界面,分享给大家 代码: MainActivity.java package com.bzu.gxs.webview1; import android.app.Activity; import android.os.Build; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.KeyEvent; import android.view.Men

  • 无引导设备No boot device available 常见解决方法 原创

    解释: No boot device available(无引导设备)  系统找不到作为引导设备的软盘或者硬盘. 解决参考:出现该问题,电脑软硬件应用网提醒网友,一般为系统引导设备故障导致,检查硬盘是否故障

  • Android启动引导页使用ViewPager实现

    Android启动引导页使用ViewPager实现

    我们在安装某个APP的时候,基本都会有一个引导页的提示,他们可以打广告,或者介绍新功能的加入和使用说明等. 一般都支持滑动并且下面有几个点,显示共有多少页和当前图片的位置,在IOS上这个实现起来比较简单,但在安卓上如何实现呢. 今天就和大家一起来学习用官方v4支持包下的ViewPager来实现这个效果. 先上图: 下面是我的实现,一个xml布局,一个GuideActivity和一个GuidePageAdapter.  先上XML. <?xml version="1.0" enco

  • iOS App初次启动时的用户引导页制作实例分享

    iOS App初次启动时的用户引导页制作实例分享

    应用程序APP一般都有引导页,引导页可以作为操作指南指导用户熟悉使用:也可以展现给用户,让用户了解APP的功能作用.引导页制作简单,一般只需要一组图片,再把图片组展现出来就可以了.展示图片组常用UIScrollView来分页显示,并且由UIPageControl页面控制器控制显示当前页.UIScrollView和UIPageControl搭配会更加完美地展现引导页的功能作用.下面我们来看具体的实例: 我们用NSUserDefaults类来判断程序是不是第一次启动或是否更新,在 AppDelega

  • AngularJS初始化过程分析(引导程序)

    概览 这一节解释了AngularJS初始化的过程,以及需要的时候你该如何修改AngularJS的初始化. AngularJS的 <script> 标签 这个示例展示了我们推荐的整合AngularJS的方法,它被称之为"自动初始化". 复制代码 代码如下: <!doctype html> <html xmlns:ng="http://angularjs.org" ng-app>     <body>         ..

  • 借助ISO镜像文件引导系统的方法

    对于那些未安装软驱的朋友来说,大多数都会选择虚拟软驱,但可惜的是虚拟软驱的容量毕竟太小,这样在功能上就不得不受到一些限制. ISOEMU是一款比较有趣的软件,安装后可以借助硬盘上的ISO镜像文件引导系统,这样在安装Linux时就不用刻盘了.其原理是利用GRUP引导硬盘上的ISO文件,当然仍是将这个ISO文件创建为虚拟光驱用来引导系统,支持FAT32.NTFS两种文件系统,不过只能支持纯DOS下的访问,即基于INT13h的磁盘访问. ISOEMU程序包中各个文件的作用 ISOEMU完全免费,需要的

  • MongoDB查询字段没有创建索引导致的连接超时异常解案例分享

    今天在现场的哥们发来异常,让我解决,错误信息如下: 复制代码 代码如下: HTTP Status 500 - Read operation to server 192.168.1.110:20001 failed on database wpdb; nested exception is com.mongodb.MongoException$Network: Read operation to server 192.168.1.110:20001 failed on database wpdb

  • 很赞的引导界面效果Android控件ImageSwitcher实现

    很赞的引导界面效果Android控件ImageSwitcher实现

    本文实例为大家分享了Android控件ImageSwitcher实现引导界面的代码,供大家参考,具体内容如下 效果图: 布局代码: <?xml version="1.0" encoding="UTF-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent&

  • android 引导界面的实现方法

    复制代码 代码如下: /** * 实现 * @author dujinyang * */ 顺序是: OneAcitivity  -->MainActivity -> TwoActivity 然后第2次进去就是:OneActivity -> TwoActivity 代码里都有注释的了,这里就不多说了.OneActivity的代码如下: [java] 复制代码 代码如下: package cn.djy.activity; import android.app.Activity; import

  • 恢复主引导分区

    A: C:\DOS>DEBUG -n mainboot.dat ;装入备份的数据文件 -l                ;装入 -a100 1078:0100 mov ax,0301 ;03 = 写,01 = 扇区数 1078:0103 mov bx,0200 ;从内存的 0200 处开始写 1078:0106 mov cx,0001 ;00 = 磁道号,01 = 起始扇区号 1078:0109 mov dx,0080 ;00 = 0 磁头,80 代表硬盘 1078:010C int 13  

随机推荐