jquery.qtip插件的简单入门

原创 2013年12月04日 09:54:24

公司要求写一个关于提示信息的效果,在网上查询到了这个插件,感觉很不错,下面是自己学习的内容

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="lib/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="lib/jquery.qtip-1.0.0-rc3.min.js"></script> 
<script type="text/javascript">
$(document).ready(
	function(){
		//下面使用的是插件默认的样式显示,content是指要显示的内容(包括文字和图片)
		$("#huangbiao").qtip({
			content: 'Stems are great for indicating the context of the tooltip.',
			style: { 
				tip: 'bottomLeft' // Notice the corner value is identical to the previously mentioned positioning corners
			}
		});
		
		//style json是对提示样式的设置即外面的div样式设置,但是没有设置具体的位置
		$("#huangbiao1").qtip({
			content: '设置显示文字样式',
			style: { 
				width: 200,
				padding: 5,
				background: '#A2D959',
				color: 'black',
				textAlign: 'center',
				border: {
					width: 7,
					radius: 5,
					color: '#A2D959'
				},
				tip: 'bottomLeft',
				name: 'dark' // Inherit the rest of the attributes from the preset dark style
			}
		});
		
		//name:'green' 是继承了默认的提示样式,还有其他的name可以参考帮助文档
		$("#huangbiao2").qtip({
			content: '使用插件自定义的样式',
			style: { 
				name: 'green' // Notice the corner value is identical to the previously mentioned positioning corners
			}
		});
		
		//target:表示提示信息显示在控件的什么位置
		//tooltip:
		$("#huangbiao3").qtip({
			content: 'Stems are great for indicating the context of the tooltip.',
			position: {
				corner: {
					target: 'topLeft',
					tooltip: 'bottomLeft'
				}
			}
		});
		
		$("#huangbiao4").qtip({
			content: '<img src="img/2.jpg">',
		});
		
		//show 是指显示的情况,when是指什么事件触发让它显示出来,hide与show对应
		//solo:
		$("#huangbiao5").qtip({
			content: '<img src="img/2.jpg">',
			show:{
				when:'click',
				solo:false
			},
			hide:{
				when:'click',
				solo:false
			}
		});
		
		//显示类似于“窗口”模式的样式,含有title和内容的提示信息
		$("#huangbiao6").qtip({
			content: {  
				title: {  
					text: 'content-title-text',  
					button: 'button'  
				},  
				text: 'content-text'  
			},
			fixed:true
		});
		
		//api:是回调函数,beforeShow是在显示提示之前的提示信息,beforeHide则恰好相反;onRender是指内容呈现后调用
		$("#huangbiao7").qtip({
			content: 'use callback function',
			api:{
				beforeShow:function(){
					alert("beforeShow api function");
				},	
				beforeHide:function(){
					alert("beforeHide api function");
				}
			}
		});
		
		$("#huangbiao9").qtip({
			content: '',
			style:{
				width:"1024px",
				height:"1024px",
				background:"black"
			}
		});
	}	
);

</script>
<title>无标题文档</title>
</head>
	<div  style="text-align:center;"><span id="huangbiao">显示普通文字</span></div>
	<p>
	<div  style="text-align:center;"><span id="huangbiao1">设置显示文字样式</span></div>
	<p>
	<div  style="text-align:center;"><span id="huangbiao2">使用插件自定义的样式</span></div>
	<p>
	<div  style="text-align:center;"><span id="huangbiao3">设置提示的显示位置</span></div>
	<p>
	<div  style="text-align:center;"><span id="huangbiao4">显示图片</span></div>
	<p>
	<div  style="text-align:center;"><span id="huangbiao5">点击事件显示以及隐藏提示</span></div>
	<p>
	<div  style="text-align:center;"><span id="huangbiao6">含有标题的提示信息</span></div>
	<p>
	<div  style="text-align:center;"><span id="huangbiao7">使用回调函数</span></div>
	<p>
	<div  style="text-align:center;"><span id="huangbiao9">遮盖全屏</span></div>
<body>
</body>
</html>

 

Jquery 插件 qtip 实现丰富的提示效果

在html中,我们如过实现 鼠标移到元素上给出提示的话,我们可以为每个元素增加title 属性。但是这样的提示不够美观,qtip的出现给我们增强效果提供了新的选择,官网地址如下 http://cra...
  • lowkeyway
  • lowkeyway
  • 2012年09月12日 13:14
  • 13060

简单递归入门题

帮助理解递归算法的一些入门级别题目合集
  • liujunyang0926
  • liujunyang0926
  • 2016年11月17日 20:50
  • 316

jQuery提示插件 qTip简单使用

简介: qtip是Jquery的一款提示插件,使用比较简单,在Activiti工作流的流程追溯页面使用到qtip插件。 使用步骤: 1、 下载qtip插件 http://qtip2.com/dow...
  • techn_panda
  • techn_panda
  • 2017年02月04日 14:38
  • 1419

简易日期插件

一个小的日期插件,供大家玩完
  • jiangjianANT
  • jiangjianANT
  • 2014年11月09日 16:06
  • 364

简单的Jquery 插件编写

jQuery如此流行,各式各样的jQuery插件也是满天飞。你有没有想过把自己的一些常用的JS功能也写成jQuery插件呢?如果你的答案是肯定的,那么来吧!和我一起学写jQuery插件吧! ...
  • xingxing513234072
  • xingxing513234072
  • 2012年07月09日 18:28
  • 1860

基于jquery的显示插件 jquery.qtip

所需JS:jquery.qtip-1.0.0-rc3.js 可以用来提示信息,比如某些文本框不满足条件,做出醒目标识及提示。 $(target)为某个dom元素,error为显示的内容 /**/...
  • z69183787
  • z69183787
  • 2012年10月24日 16:07
  • 864

Linux 简单入门

学习慕课网的《Linux达人养成计划I》教程的笔记。 本教程Linux系统的基础知识,分区和挂载,Linux常用的命令,还有基础的shell语法。shell的介绍shell编程里有详细的介绍。 L...
  • wyBluewind
  • wyBluewind
  • 2015年10月24日 18:25
  • 751

qt入门,最简单的qt程序

    最近因为工作的关系需要研究qt了,客观的说,作为一个跨平台的代码框架,qt还是不错的,网上有大量吹捧qt的文章,我就不重复了。但是qt 也实在并不可爱,可能是因为人手太少的原因,qt的相关书籍...
  • oowgsoo
  • oowgsoo
  • 2006年12月16日 14:45
  • 12678

最简单的C#快速入门教程

在一小时内学会 C#。使用例程,简单却完整的探索 C# 语言的构造和特点。本文特别适合有 C++ 基础却没有太多精力学习 C# 的读者。 简介         C# 是一种具有 C++ 特性,...
  • phenixyf
  • phenixyf
  • 2013年05月22日 17:51
  • 1922

maven入门:一个简单的maven项目

简介 Maven是一个用于项目管理的工具,其好处是为我们管理jar包的依赖版本,同时也方便的组合我们自己的代码模块。在入门前有两个概念先简单介绍一下,一个是坐标,另一个是仓库。 坐标:maven为每...
  • lh87522
  • lh87522
  • 2015年01月21日 14:21
  • 4456
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery.qtip插件的简单入门
举报原因:
原因补充:

(最多只允许输入30个字)