jQuery引导插件TourTip

所属分类：其他-杂项

35816 298 查看评论 (1)

分享到微信朋友圈

查看演示立即下载

插件描述：jQuery引导插件TourTip 交互式可视化指南网页上的元素。

使用方法

步骤1：

将以下标记添加到您的文档的<head>

你还需要复制旁边插件的css文件夹和下载的IMG文件夹。你就会有你需要启动一个引导网页的一切。

/ *附加的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元素：

<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创造公共方法创建引导元：

<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方法来启动巡演引擎：

<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.