tooltip风格高级jquery分步引导插件
源码介绍
TourJS是一款tooltip风格高级jquery分步引导插件。TourJS通过在关键位置显示tooltip信息,来分步引导用户进行页面操作,功能非常实用。 在页面中引入jQuery、tour.js文件,以及tooltip的风格颜色主题css文件。 默认的风格为蓝色: 你可以实用黑色主题的风格: TourJS jquery分步引导插件的实用方法如下: 实现简单的分步引导: 高级分步引导: TourJS-jquery分步引导插件的的github地址为:https://github.com/Bastiaan225/TourJS简要教程
使用方法
<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>
<link rel="stylesheet" type="text/css" href="assets/css/tour-dark.css" />
HTML结构
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"
}
]
});
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » tooltip风格高级jquery分步引导插件
发表评论 取消回复