jQuery插件qTips是一个非常简单的小提示条工具,使用简单,效果图如下:
http://cgxcn.blog.163.com/blog/static/1323124220095475539298/
自定义提示条样式,提示条样式名为qtip-wrapper(具体可查看qtips的JS文件),示例如下:
div.qtip-wrapper {
z-index: 999;
text-align: center;
position: absolute;
font-size: .9em;
width: 250px;
background: transparent url(arrow.png) no-repeat scroll center bottom;
color: #fff;
padding-bottom: 5px;
display: none
}
div.qtip-wrapper div {
background: #333 none;
padding: 5px;
font: normal normal .9em/1em "Arial", verdana, sans-serif;
}
使用实例
一,包含文件部分
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.qtips.js" type="text/javascript"></script>
二,HTML部分
<div class="box" style="left: 25px; top: 75px; width: 100px; height: 100px;">测试盒子1</div>
<div class="box" style="right: 135px; top: 165px; width: 75px; height: 75px;">测试盒子2</div>
<div class="box" style="left: 225px; top: 275px; width: 50px; height: 50px;">测试盒子3</div>
<div class="box" style="left: 625px; top: 575px; width: 25px; height: 25px;">测试盒子4</div>
四个实例,分别在网页不同地方显示小提示条
三,Javascript部分
<script type="text/javascript">
$(document).ready(function(){
$('div').qtip({content:'必优博客-技术源于实践,实践必然优秀! ', position:'center'});
});
</script>
Javascript部分指定需要显示提示条的对象并自定义提示内容和提示位置,实例中给所有DIV增加小提示功能。
注意有两个参数:
content表示提示文字内容
position表示提示位置
使用qTips最主要的就是要清楚提示条的CSS样式以及显示的小图标,这些已存在下载的文件包中(arrow.png),大家
可根椐需求进行适当的修改,另外tips还有几个参数,列表如下:
container: 'qtip',
content: '',
position: 'center',
nudge_top: 10,
nudge_left: 0,
preRender: function(e, tip){},
postRender: function(e, tip){},
onShow: function(e, tip){},
onHide: function(e, tip){},
解释如下:
container表示当前提示条容器名
content表示提示内容
position表示提示位置,可选center、left和right
nudge_top表示上微移
nudge_left表示左微移
preRender表示读取提示条前触发的函数
postRender表示读取提示条触发的函数
onShow表示显示提示条触发的函数
onHide表示隐藏提示条触发的函数
使用tips相比tooltip更加简单,两者都需要自定义提示条CSS样式,不过功能上tips比较单一,对于实现一个简单的提示条功能来说,jQuery插件qTips还是一个非常不错的选择。
分享到:
相关推荐
本文将详细讲解EXTJS如何为Column添加提示(Tooltip)。 首先,EXTJS中的提示功能主要通过`qtip`属性实现,这是一个内建的属性,允许我们在表格的单元格中设置提示文本。在EXTJS的GridPanel中,我们可以通过定义...
卷 (USB)Project 的文件夹 PATH 列表 卷序列号码为 0006EE44 CCBE:F425 I:. │ .project │ pom.xml │ pom.xml~ │ text.txt │ ├─.settings │ org.maven.ide.eclipse.prefs ...│ │ org.eclipse.wst.common....
ta_lib-0.5.1-cp312-cp312-win32.whl
课程设计 在线实时的斗兽棋游戏,时间赶,粗暴的使用jQuery + websoket 实现实时H5对战游戏 + java.zip课程设计
ta_lib-0.5.1-cp310-cp310-win_amd64.whl
基于springboot+vue物流系统源码数据库文档.zip
GEE训练教程——Landsat5、8和Sentinel-2、DEM和各2哦想指数下载
知识图谱
333498005787635解决keil下载失败的文件.zip
【微信机器人原理与实现】 微信机器人是通过模拟微信客户端的行为,自动处理消息、发送消息的程序。在Python中实现微信机器人的主要库是WeChatBot,它提供了丰富的接口,允许开发者方便地进行微信消息的接收与发送。这个项目标题中的"基于python实现的微信机器人源码"指的是使用Python编程语言编写的微信机器人程序。 1. **Python基础**:Python是一种高级编程语言,以其简洁的语法和强大的功能深受开发者喜爱。在实现微信机器人时,你需要熟悉Python的基本语法、数据类型、函数、类以及异常处理等概念。 2. **微信API与WeChatBot库**:微信为开发者提供了微信公共平台和微信开放平台,可以获取到必要的API来实现机器人功能。WeChatBot库是Python中一个用于微信开发的第三方库,它封装了微信的API,简化了消息处理的流程。使用WeChatBot,开发者可以快速搭建起一个微信机器人。 3. **微信OAuth2.0授权**:为了能够接入微信,首先需要通过OAuth2.0协议获取用户的授权。用户授权后,机器人可以获取到微信用户的身份信息,从而进行
基于springboot实验室研究生信息管理系统源码数据库文档.zip
张力控制,色标跟踪,多轴同步,电子凸轮,横切等工艺控制案例。
在Python编程环境中,处理Microsoft Word文档是一项常见的任务。Python提供了几个库来实现这一目标,如`python-docx`,它可以让我们创建、修改和操作.docx文件。本教程将重点介绍如何利用Python进行Word文档的合并、格式转换以及转换为PDF。 1. **合并Word文档(merge4docx)** 合并多个Word文档是一项实用的功能,特别是在处理大量报告或文档集合时。在Python中,可以使用`python-docx`库实现。我们需要导入`docx`模块,然后读取每个文档并将其内容插入到主文档中。以下是一个基本示例: ```python from docx import Document def merge4docx(file_list, output_file): main_doc = Document() for file in file_list: doc = Document(file) for paragraph in doc.paragraphs: main_doc.add_paragraph(paragraph.text) m
基于springboot+Javaweb的二手图书交易系统源码数据库文档.zip
基于springboot餐品美食论坛源码数据库文档.zip
基于springboot亚运会志愿者管理系统源码数据库文档.zip
使用WPF的数据样式绑定,切换对象数据值来完成控件动态切换背景渐变动画效果。 使用动画样式渲染比线程修改性能消耗更低更稳定
基于SpringBoot的企业客源关系管理系统源码数据库文档.zip
基于springboot+vue的桂林旅游网站系统源码数据库文档.zip
基于springboot嗨玩旅游网站源码数据库文档.zip