使用方法
步骤1：
将以下标记添加到您的文档的<head>
你还需要复制旁边插件的css文件夹和下载的IMG文件夹。你就会有你需要启动一个引导网页的一切。
1 2 3 4 5 6 | / *附加的Tourtip CSS文件* /<link rel=" stylesheet" type="text/css" href="css/tinytools.tourtip.min.css">/ * jQuery的需要连接* /<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>/ *然后连接TourTip插件* /<script src="tinytools.tourtip.min.js"></script> |
步骤2：
准备布局引导元素
有没有必要有任何容器为每个漫游单元。你只需要介绍你的页面上的引导元素，插件，并设置必要的选项。例如，假设你有标识为TourElement1的div元素。把下面的代码在你的文档的ready事件来创建一个引导布局所提到的div元素：
1 2 3 4 5 6 7 8 9 10 | <script> $(document).ready(function () { $("#TourElement1").tourTip({ title: "Tour Title", description: "This is a description for the newly born TourTip :)", previous: true, position: 'right' }); });</script> |
你可以游览布局不绑定到任何预定义的元素;在这种情况下，仅仅通过直接调用的tourtip创造公共方法创建引导元：
1 2 3 4 5 6 7 8 9 10 | <script> $(document).ready(function () { $.tourTip.create({ title: "Tour Title", description: "This is a description for the newly born TourTip :)", previous: true, position: 'right' }); });</script> |
第3步：
启动发动机
至此，你会看到你的页面上没有TourTip 。只需调用start public方法来启动巡演引擎：
1 2 3 4 5 | <script> $(document).ready(function () { $.tourTip.start(); });</script> |
或者，你可以通过设置来启动方法。在start方法中的设置将应用到所有的引导布局一次。您另行申请各引导布局的设置，将覆盖常规设置。
可选参数
Optional Parameters
PropertyDefaultDescription
title''The title of the created TourTip layout
description''The description paragraph of the created TourTip layout
positionbottom The position of the TourTip layout in relation to the selected element on the web page. It can be 'bottom', 'top', 'left', or 'right'
parentScroll$('body')This property indicates the scrolling parent element to be scrolled when the tour element is out of the view area.
externalContentundefined externalContnet is any other jquery element in the current web page which will be added to the bottom of the description. If externalContentHtml is defined, this property will be ignored.
externalContentHtml''Instead of externalContent element, you can directly add any HTML content to the bottom if the description using this property.
closeIcontrueClose icon will be shown at the top right corner of the TourTip layout if this property is set to true.
nextButtonTextNextThe text of the Next button
previousButtonTextPreviousThe text of the Previous button
closeButtonTextCloseThe text of the Close button
nexttrueif true, the Next button will be shown in the TourTip layout. This button will not be shown in the last TourTip layout.
previousfalseif true, the Previous button will be shown in the TourTip layout. This button will not be shown in the first TourTip layout.
closefalseif true, the close button will be shown in the TourTip layout.
width'300px'The width of the TourTip layout
height'auto'The height of the TourTip layout
animation'fade'This property defines the way for switching between layouts. The available values are 'fade' and 'none'.
smoothScrolltrueIf true, the page will be scrolled to the layout target element smoothly.
onShowfalseCallback that fires before showing the TourTip Layout
onHidefalseCallback that fires before hiding the TourTip Layout
onNextfalseCallback that fires before switching to the next TourTip Layout
onPreviousfalseCallback that fires before switching to the previous TourTip Layout
onClosefalseCallback that fires before closing TourTips
onStartfalseCallback that fires on starting the tour
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jQuery SVG图像插件SVGMagic
- 下一个特效： jQuery滚动效果插件 multiScroll.js