人靠衣装,机靠壳装

tooltip风格jquery分步引导插件

2018-08-07 16:09 发布

00
admin
湖南省 长沙市
  • 粉丝4

  • 关注1

  • 动态2

tooltip风格jquery分步引导插件_niuqiqi071113.png


TourJS通过在关键位置显示tooltip信息,来分步引导用户进行页面操作


使用方法

在页面中引入jQuery、tour.js文件,以及tooltip的风格颜色主题css文件。

<link rel="stylesheet" type="text/css" href="assets/css/tour-default.css" />
<script type="text/javascript" src="assets/js/jquery-latest.min.js"></script>
<script type="text/javascript" src="assets/js/tour.js"></script>


默认的风格为蓝色:

jquery分步引导插件蓝色主题

你可以实用黑色主题的风格:

<link rel="stylesheet" type="text/css" href="assets/css/tour-dark.css" />


HTML结构

TourJS jquery分步引导插件的实用方法如下:

const tour = new Tour("Name");


实现简单的分步引导:

tour.addStep("first", {
    title: "The Beginning",
    text: "Hello, welcome to the tour! In this container you can explain the user what he or she can do.",
    hook: ".container",
    buttons: [
        {
            text: "Previous",
            action: "tour.previous()"
        },
        {
            text: "Start",
            action: "tour.next()"
        }
    ]
});


高级分步引导:

tour.addStep('userInfo', {
    title: "User Info",
    text: "In this container you can explain the user what he or she can do.",
    hook: ".user_info",
    timer: 5000,
    onShow: function() {
        // Custom Function
    },
    onHide: function() {
        // Custom Function
    },
    buttons: [
        {
            text: "Previous",
            action: "tour.previous()"
        },
        {
            text: "Next",
            action: "tour.next()"
        }
    ],
    links: [
        {
            text: "More info?",
            href: "info.html"
        }
    ]
});


 TourJS-jquery分步引导插件的的github地址为:https://github.com/Bastiaan225/TourJS

授权方式:共享版

适合环境: Chrome/Firefox/Opera/Safari/IE9+

官方网站: 暂无

在线演示

0
猜你喜欢
更多发现
子导航JS代码