注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jQuery网页引导插件TourTip

UI fishcity 1785浏览

jQuery网页引导插件TourTip

大家都用过了QQ空间或是微博的新功能提示了吧,它可以的引导您一步一步的轻松了解速个功能,今天要介绍的这款jquery网页引导插件tourtip就是实现这样一个功能的插件。tourtip使用非常简单,只需引入绑定到对应该的元素上即可,而且其压缩版的大小只有11K,非常轻小。

使用方法:

第一步:下载插件,拷贝所有文件到项目中,并在网页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 开始时调用火焰

转载请注明:jQ酷 » jQuery网页引导插件TourTip

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。