导读：jQuery插件TourTip使用教程，今天要介绍的这款jquery网页引导插件tourtip就是实现这样一个功能的插件。tourtip使用非常简单。
使用方法：
第一步：下载插件，拷贝所有文件到项目中，并在网页head区引入
<link rel=" stylesheet" type="text/css" href="css/tinytools.tourtip.min.css">
<script src="http://ajax.useso.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/tinytools.tourtip.min.js"></script>
第二步：tourtip使不需要太多的html元素，您只需要绑定需要介绍的元素就可以了，其它的都由tourtip自动生成。
$(document).ready(function () {
$("#TourElement1").tourTip({
title: "Tour Title",
description: "This is a description for the newly born TourTip :)",
previous: true,
position: 'right'
});
});
当然，也许你会碰到这个提示不需要绑定到任何html元素上，那怎么办呢，下面代码正好可以解决此问题。
$(document).ready(function () {
$.tourTip.create({
title: "Tour Title",
description: "This is a description for the newly born TourTip :)",
previous: true,
position: 'right'
});
});
最后：需要启动提示引擎来开始向导。
$(document).ready(function () {
$.tourTip.start();
});
选项
|
属性选项 |
默认值 |
说明 |
| title |
'' |
提示框的标题 |
| description |
'' |
提示框的描述内容 |
| position |
bottom |
提示框出现在绑定元素的位置 |
| parentScroll |
$('body') |
当需提示的可视元素不在可视窗口时相对于那个父元素自动滚动 |
| externalContent |
没定义 |
在描述下方出现的注释，如果定义了externalContentHtml，则会被替代。 |
| externalContentHtml |
'' |
当description使用了该属性后，可以在描述下方添加任意html元素 |
| closeIcon |
true |
显示右上角的关闭按钮 |
| nextButtonText |
Next |
下一步按钮显示的文本内容 |
| previousButtonText |
Previous |
上一步按钮显示的文本内容 |
| closeButtonText |
Close |
关闭按钮显示的文本内容 |
| next |
true |
是否显示下一步按钮 |
| previous |
false |
是否显示上一步按钮 |
| close |
false |
是速显示关闭按钮 |
| width |
'300px' |
提示框的宽度 |
| height |
'auto' |
提示框的高度 |
| animation |
'fade' |
提示框的动画模式，支持 'fade' 和 'none'. |
| smoothScroll |
true |
是否平滑滚动 |
| onShow |
false |
显示前调用火焰 |
| onHide |
false |
隐藏交调用火焰 |
| onNext |
false |
切换下一步前调用火焰 |
| onPrevious |
false |
切换上一步交调用火焰 |
| onClose |
false |
关闭前调用火焰 |
| onStart |
false |
开始时调用火焰 |
在线演示
