1.demo直接贴上来了，有什么不懂的，直接去官网上看,地址：http://bootstraptour.com/。

2.这个bootstrap-tour插件的版本是v0.12.0，复制下来代码，引入库应该直接可以运行。

3.点评一下：
　　a.插件会自己在localStorage里记录引导的信息，一般需求下，不用手动写这方面代码了
　　b.在每个step里提供onNext钩子，这个还是很方便的
　　c.可以像demo里这样动态产生一个节点(my-other-element)，提前在它上面定义step也是可以找到的
　　d.backdrop的时候，点下一步会闪，这个没找到在那设置，也不知道能不能设置，个人感觉不好看
　　e.这个插件没有提供hints的支持
　　f.element为id的时候没啥说的，为class的时候，会每个匹配上的class都出现引导

<html>

    <head>

        <link href="bootstrap-tour-standalone.min.css" rel="stylesheet"></link>

        <script src="jquery-2.1.4.js"></script>

        <script src="bootstrap-tour-standalone.min.js"></script>

        <script>

            $(function(){

                $("#subm").on('click',function(){

                    var txt = $("#my-element").val();

                    $("#xiaol").html("<div id='my-other-element'>"+txt+"</div>");

                })

                tour = new Tour({

                    steps: [

                        {

                            element: "#div1",

                            title: "Title of my step",

                            content: "Content of my step",

                            placement:"auto",

                            backdrop:true,

                            onNext: function(tour){

                                var txt = $("#my-element").val();

                                if(!txt){

                                    $("#my-element").val("xiaol")

                                }

                                $("#subm").click();

                            }

                        },

                        {

                            element: "#my-other-element",

                            title: "Title of my step",

                            content: "Content of my step1111",

                            backdrop:true,

                            backdropContainer:"#my-other-element",

                            placement:"auto"

                        }

                    ]});

                // Initialize the tour

                tour.init();

                // Start the tour

                tour.start();

            })

        </script>

    </head>

    <body>

        <div id="div1">

            <input id="my-element"></input>

            <button id="subm">submit</button>

        </div>

        <div id="xiaol"></div>

        <button onclick="tour.restart()">test</button>

    </body>

</html>

Js用户引导插件bootstrap-tour的更多相关文章

  1. Js用户引导插件intro

    1.demo直接贴上来了,有什么不懂的,直接去官网上看,地址:https://introjs.com/. 2.这个intro插件的版本是v2.7.0,复制下来代码,引入库应该直接可以运行. 3.点评一 ...

  2. BlueDream.js(蓝梦)——jQuery网站使用引导插件

    小菜在前端世界游荡有些时间了,常见的插件多少有些了解,但却很少看到用户引导插件. 所谓用户引导插件,就是在第一次使用某个网站时,会弹出一些小动画,告诉你网站的基本使用方法,帮你快速入门. 这应该是个常 ...

  3. vue 用driver 添加用户引导

    npm 安装: npm install driver.js //用户引导 import Driver from 'driver.js' import 'driver.js/dist/driver.mi ...

  4. js插件---Bootstrap 树控件

    js插件---Bootstrap 树控件 一.总结 一句话总结:可以直接用gojs,或者搜索js,jquery的树控件,或者bootstrap树控件,一大堆 gojs 二.JS组件系列——Bootst ...

  5. 自定义Angular插件 - 网站用户引导

    最近由于项目进行了较大的改版,为了让用户能够适应这次新的改版,因此在系统中引入了“用户引导”功能,对于初次进入系统的用户一些简单的使用培训training.对于大多数网站来说,这是一个很常见的功能.所 ...

  6. js插件---bootstrap插件daterangepicker是什么

    js插件---bootstrap插件daterangepicker是什么 一.总结 一句话总结:日期段选择插件,也可选择日期 日期段选择插件,也可选择日期 1.daterangepicker 控件如何 ...

  7. 推荐15款最佳的 jQuery 分步引导插件

    当用户浏览到一个网站,它可能从不知道如何浏览,如何操作网站或 Web 应用程序的内容和流程.在这篇文章中,我们编制了一些最好的 jQuery 引导插件列表.你会发现这些插件对于提高你的网站的整体用户体 ...

  8. jQuery 分步引导 插件

    转自:http://blog.libnav.com/js/57.html 很多时候一个网站或者一个Web应用出品,为了让你的用户知道你的站点(或应用)有些什么?如何操作?为了让你的用户有更好的体验.往 ...

  9. 前端分布引导插件IntroJs的使用

    在用户第一次使用网站的时候,一般会提供新手引导的提示,提示用户重要的功能使用,实现方法比较多,但是有一点,屏幕的自适应问题,大多数自己写的实现方法无非就是一个div遮罩层,然后再需要指引的位置放置一张 ...

随机推荐

  1. AMD 3600+ X2 CPU配合昂达A69T主板超频教程

    本次超频使用电脑硬件配置如下: AMD 3600+ X2 90nm 昂达 A69T HDMI 宇瞻 DDR II 1G 667普条 西数 WD2500KS SATAII  250G 16M 戴尔 普通 ...

  2. BZOJ 2792 Poi2012 Well 二分答案

    题目大意:给定一个非负整数序列A.每次操作能够选择一个数然后减掉1,要求进行不超过m次操作使得存在一个Ak=0且max{Ai−Ai+1}最小,输出这个最小值以及此时最小的k 二分答案,然后验证的时候首 ...

  3. mac apt-get--> Homebrew

    在最近采集linux进程网络指标的时候,为了对比采集结果,需要linux系统查看进程网络流量命令,最后查到nethogs 这个工具好用,但是在下载安装过程中碰到问题: 1:http://blog.cs ...

  4. 复杂可编程逻辑器件CPLD的基本结构

    复杂可编程逻辑器件CPLD的基本结构 文章出处:czhlcai 发布时间: 2008/12/08 | 6911 次阅读 专业薄膜开关打样工厂,12小时加急出货   1．基于乘积项的CPLD结构 CPL ...

  5. UML类图详解_关联关系_一对多

    对于一对多的示例,可以想象一个账户可以多次申购.在申购的时候没有固定上限,下限为0,那么就可以使用容器类(container class)来搞,最常见的就是vector了. 下面我们来看一个“一对多” ...

  6. Perl/C#连接Oracle/SQL Server和简单操作

    连接数据库是一个很常见也很必须的操作.先将我用到的总结一下. 1. Perl 连接数据库 Perl 连接数据库的思路都是: 1)使用DBI模块: 2)创建数据库连接句柄dbh: 3)利用dbh创建语句 ...

  7. FreeBSD将SHELL从csh换成bash并支持中文显示

    刚准备在FreeBSD下学习Shell,结果发现怎么好多命令都没有,比如declare.后来发现连bash都没有,好像bash用的多一些吧,于是就准备将csh换成bash. 由于没有bash,所以先得 ...

  8. 在海思hisiv100nptl平台上交叉编译并安装SRS

    ./configure --with-arm-ubuntu12 && make 须要安装: apt-get installgcc-arm-linux-gnueabi     ,但hi3 ...

  9. Android中*_handle_t/ANativeWindowBuffer/ANativeWindow/GraphicBuffer/Surface的关系

    在阅读SurfaceFlinger HardwareComposer以及gralloc相关代码的过程中,我们经常会遇到native_handle private_handle_t ANativeWin ...

  10. 循环杀死Mysql sleep进程脚本

    #!/bin/sh while : do n=`mysqladmin processlist -uadmin -p***|grep -i sleep |wc -l` date=`date +%Y%m% ...