JqueryTips小实验，浏览器滚动条不限制
最近做公司的项目有些地方可能需要一些小提示，于是自己建立项目研究tips。在此之前看到过一些别人写的JqueryTips，于是借鉴了一些别人的经验在此基础上我做出了一些改进。
有的同学可能使用过其他一些JqueryTIps的工具，但是我看了那些有些不适合我来使用，所以自己做吧，用的也Happy。
因为有些数据可能过长，会导致设计好的表格样式变形，所以在绑定数据的时候大多数都会设置过长数据省略号显示，但是这就会导致我们查看数据的时候不太方便，html自带的title技能可能已经足够我们使用，但是我觉得样式可能不好看，而且反应有些迟钝。于是做了这个小工具。代码不多。
因为是测试用的，所以我直接在页面上写了这些数据，这些内容大家将就的看一下吧。不要计较这些啊。
以下是测试数据的代码，包括CSS样式。
<style type="text/css">
.tab
{
width: 1000px;
height: 100%;
border-collapse: collapse;
margin: 0;
border: 1px #c0c0c0 solid;
table-layout: fixed;
}
.tab td
{
height: 20px;
border: 1px #C0C0C0 solid;
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}
.tab th
{
height: 24px;
background: url(panel-header-bg.gif) repeat-x left top;
line-height: 26px;
height: 26px;
font-weight: bold;
border: 1px #C0C0C0 solid;
}
</style>
CSS代码
<table class="tab">
<thead>
<tr>
<th style="width: 5%;">
编号
</th>
<th style="width: 10%">
姓名
</th>
<th style="width: 5%">
性别
</th>
<th style="width: 12%">
电话
</th>
<th style="width: 15%">
邮箱
</th>
<th style="width: 15%">
地址
</th>
<th style="width: 10%">
学历
</th>
<th style="width: 8%">
婚否
</th>
<th style="width: 20%">
备注
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
Mike11
</td>
<td>
男11
</td>
<td>
1523652256311
</td>
<td class="tips">
mikeLoveNike@gmail.com11
</td>
<td class="tips">
深圳市南山区白石洲上白石102栋11
</td>
<td>
本科11
</td>
<td>
已婚11
</td>
<td class="tips">
时间都去哪儿了时间都去哪儿了11时间都去度假了时间都去度假了吗
</td>
</tr>
<tr>
<td>
2
</td>
<td>
Mike22
</td>
<td>
男22
</td>
<td>
1523652256322
</td>
<td class="tips">
mikeLoveNike@gmail.com22
</td>
<td class="tips">
深圳市南山区白石洲上白石102栋22时间都去度假了时间都去度假了吗哈哈哈哈
</td>
<td>
本科22
</td>
<td>
已婚22
</td>
<td class="tips">
时间都去哪儿了时间都去哪儿了22时间都去度假了时间都去度假了吗哈哈哈哈
</td>
</tr>
<tr>
<td>
3
</td>
<td>
Mike33
</td>
<td>
男33
</td>
<td>
1523652256333
</td>
<td class="tips">
mikeLoveNike@gmail.com33
</td>
<td class="tips">
深圳市南山区白石洲上白石102栋33时间都去度假了时间都去度假了吗哈哈哈哈
</td>
<td>
本科33
</td>
<td>
已婚33
</td>
<td class="tips">
时间都去哪儿了时间都去哪儿了33时间都去度假了时间都去度假了吗哈哈哈哈
</td>
</tr>
<tr>
<td>
4
</td>
<td>
Mike44
</td>
<td>
男44
</td>
<td>
1523652256344
</td>
<td class="tips">
mikeLoveNike@gmail.com44
</td>
<td class="tips">
深圳市南山区白石洲上白石102栋44444时间都去度假了时间都去度假了吗哈哈哈哈
</td>
<td>
本科44
</td>
<td>
已婚44
</td>
<td class="tips">
时间都去哪儿了时间都去哪儿了44时间都去度假了时间都去度假了吗哈哈哈哈
</td>
</tr>
<tr>
<td>
5
</td>
<td>
Mike55
</td>
<td>
男55
</td>
<td>
1523652256355
</td>
<td class="tips">
mikeLoveNike@gmail.com55
</td>
<td class="tips">
深圳市南山区白石洲上白石102栋55
</td>
<td>
本科11
</td>
<td>
已婚11
</td>
<td class="tips">
时间都去哪儿了时间都去哪儿了55时间都去度假了时间都去度假了吗
</td>
</tr>
<tr>
<td>
6
</td>
<td>
Mike66
</td>
<td>
男66
</td>
<td>
1523652256366
</td>
<td class="tips">
mikeLoveNike@gmail.com77
</td>
<td class="tips">
深圳市南山区白石洲上白石102栋77时间都去度假了时间都去度假了吗哈哈哈哈
</td>
<td>
本科77
</td>
<td>
已婚77
</td>
<td class="tips">
时间都去哪儿了时间都去哪儿了77时间都去度假了时间都去度假了吗哈哈哈哈
</td>
</tr>
<tr>
<td>
8
</td>
<td>
Mike88
</td>
<td>
男88
</td>
<td>
1523652256388
</td>
<td class="tips">
mikeLoveNike@gmail.com88
</td>
<td class="tips">
深圳市南山区白石洲上白石102栋88时间都去度假了时间都去度假了吗哈哈哈哈
</td>
<td>
本科88
</td>
<td>
已婚88
</td>
<td class="tips">
时间都去哪儿了时间都去哪儿了88时间都去度假了时间都去度假了吗哈哈哈哈
</td>
</tr>
<tr>
<td>
9
</td>
<td>
Mike99
</td>
<td>
男99
</td>
<td>
1523652256399
</td>
<td class="tips">
mikeLoveNike@gmail.com99
</td>
<td class="tips">
深圳市南山区白石洲上白石102栋999999时间都去度假了时间都去度假了吗哈哈哈哈
</td>
<td>
本科99
</td>
<td>
已婚99
</td>
<td class="tips">
时间都去哪儿了时间都去哪儿了99时间都去度假了时间都去度假了吗哈哈哈哈
</td>
</tr>
<tr>
<td>
10
</td>
<td>
Mike1010
</td>
<td class="tips">
男1010
</td>
<td class="tips">
152365225631010
</td>
<td class="tips">
mikeLoveNike@gmail.com1010
</td>
<td class="tips">
深圳市南山区白石洲上白石102栋1010
</td>
<td>
本科1010
</td>
<td>
已婚1010
</td>
<td class="tips">
时间都去哪儿了时间都去哪儿了1010时间都去度假了时间都去度假了吗
</td>
</tr>
<tr>
<td>
11
</td>
<td>
Mike1111
</td>
<td class="tips">
男1111
</td>
<td class="tips">
152365225631111
</td>
<td class="tips">
mikeLoveNike@gmail.com1111
</td>
<td class="tips">
深圳市南山区白石洲上白石102栋1111时间都去度假了时间都去度假了吗哈哈哈哈
</td>
<td>
本科1111
</td>
<td>
已婚1111
</td>
<td class="tips">
时间都去哪儿了时间都去哪儿了1111时间都去度假了时间都去度假了吗哈哈哈哈
</td>
</tr>
<tr>
<td>
12
</td>
<td>
Mike1212
</td>
<td class="tips">
男1212
</td>
<td class="tips">
152365225631212
</td>
<td class="tips">
mikeLoveNike@gmail.com1212
</td>
<td class="tips">
深圳市南山区白石洲上白石102栋1212时间都去度假了时间都去度假了吗哈哈哈哈
</td>
<td>
本科1212
</td>
<td>
已婚1212
</td>
<td class="tips">
时间都去哪儿了时间都去哪儿了1212时间都去度假了时间都去度假了吗哈哈哈哈
</td>
</tr>
<tr>
<td>
13
</td>
<td>
Mike1313
</td>
<td class="tips">
男1313
</td>
<td class="tips">
152365225631313
</td>
<td class="tips">
mikeLoveNike@gmail.com1313
</td>
<td class="tips">
深圳市南山区白石洲上白石102栋131313131313时间都去度假了时间都去度假了吗哈哈哈哈
</td>
<td>
本科1313
</td>
<td>
已婚1313
</td>
<td class="tips">
时间都去哪儿了时间都去哪儿了1313时间都去度假了时间都去度假了吗哈哈哈哈
</td>
</tr>
</tbody>
</table>
table html代码
以上是要准备的，除此之外还需要准备一个Jquery库。这个很好找吧。
刚刚开始做的时候，遇到一个很棘手的问题，就是tip显示的时候遇到浏览器边框就会伸出去，然后你鼠标移动之后又根本看不着，好吧，这跟我们的需求很不符合了。于是我在判断tip的位置的时候做一个判断，这个判断是根据你页面宽度和tip的宽度来觉得的。看以下代码：
var windowWidth = $(window).width();//浏览器宽度
var tooltipWidth = $("#tooltip").width();//tipdiv宽度
if (windowWidth - e.clientX - 5 < tooltipWidth) {//判断提示是否会被隐藏
tip位置判断
使用浏览器的当前宽度，减去鼠标当前位置，可以得到鼠标当前距离浏览器的宽度。再与tipdiv的宽度对比。
这样在我鼠标移动的时候可以知道tip显示的地方是否会在浏览器的边缘了。然后根据这样的判断，可以讲tip的右边距设置成固定值，这样你移动鼠标都不会对tip产生影响了，但是当你鼠标移动到其他地方的时候又将重新计算。
然后看一下给tip定位的代码：
if (windowWidth - e.clientX - 5 < tooltipWidth) {//判断提示是否会被隐藏
$("#tooltip").css({
"top": (e.clientY + 5) + "px",
"right": "5px"
})
}
else {
$("#tooltip").css({
"top": (e.clientY + 5) + "px",
"left": (e.clientX + 5) + "px"
})
}
}).mousemove(function (e) {
var windowWidth = $(window).width();
var tooltipWidth = $("#tooltip").width();
if (windowWidth - e.clientX - 5 < tooltipWidth) {//判断提示是否会被隐藏
$("#tooltip").css({
"top": (e.clientY + 5) + "px",
"right": "5px"
})
}
else {
$("#tooltip").css({
"top": (e.clientY + 5) + "px",
"left": (e.clientX + 5) + "px"
})
}
tipdiv定位
这里之前我一直都很迷糊，因为有两个属性在Jquery里面。pageX，Y和clientX，Y。做了许久都有一个问题困扰。就是当浏览器中数据太多了，出现了滚动条之后，pageX，Y已经不能准确定位了。于是另辟一条路。
我Google了一下css定位相关的内容。开始我一直使用的absolute，绝对定位，相对page的。后来我使用的是fixed，相对于浏览器的可见页面。这样就好办了。继续看看代码：
var toolTip = "<div id='tooltip'>" + $(this).text() + "</div>";
$("body").append(toolTip);
$("#tooltip").css({
"position": "fixed",//这里使用fixed相对于浏览器可见页面定位
"padding": "5px",
"background": "#F0F0E8",
"white-space": "nowrap",//让div内的文字内容部换行
"border": "1px gray solid"
}).show(200);
tipDiv定义
好了代码很简单，接下来看看效果如何吧。
经本人测试，Google和IE都可以使用。
有个bug我一直想不明白，就是当我的tip显示之后，我在移动鼠标，有时候会出现tipdiv被拉长了。求大神解释，看下效果：
下面是html代码的附件，有兴趣的同学可以直接下载，用浏览器打开即可：JqueryTips.zip
以上是小弟个人理解，如果有更好的想法，欢迎拍砖，来辩。
JqueryTips小实验，浏览器滚动条不限制的更多相关文章
- 自定义浏览器滚动条的样式，打造属于你的滚动条风格——兼容IE和webkit(ff不支持)
前段时间,到网上找素材时,看到了一个很个性的滚动条式,打开Chrome的调试工具看了一下,发现不是用JavaScript来模拟实现的,觉得 有必要折腾一下.于是在各大浏览器中对比了一下,发现只用Chr ...
- Hadoop之词频统计小实验
声明: 1)本文由我原创撰写,转载时请注明出处,侵权必究. 2)本小实验工作环境为Ubuntu操作系统,hadoop1-2-1,jdk1.8.0. 3)统计词频工作在单节点的伪分布上,至于真正实 ...
- js中关于事件捕获与事件冒泡的小实验
1.事件冒泡:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div - ...
- JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色.但是css ...
- PBR综合小实验视频-狮子XL
这个是上学时候录的一个策略路由小实验
- ubuntu下格式化内存当硬盘使的小实验
内存虚拟硬盘(ramdisk)是指通过软件技术,将物理内存进行分割,将一部分内存通过虚拟技术转变为硬盘以较大幅度提升计算机数据读取速度和保护硬盘. 在ubuntu下的dev下有ram相关的文件,这些文 ...
- MongoDB 主从复制小实验
MongoDB 主从复制小实验 操作环境描述:WIN8 64位操作系统,内装虚拟机为CentOS 5.5 32位系统. 操作描述:跟其他关系型数据库类似,在主库进行数据操作,将数据同步到从节点,从节 ...
- PS小实验-去除水印
PS小实验-去除水印 水印是一些品牌商覆盖在图片或视频上的一个商标logo或小文本,比如大家最讨厌的百度logo,作者本人也是比较讨厌水印的,让好端端的一张图片变得美中不足. 个人觉得用photosh ...
- 网站开发中使用javascript获取浏览器滚动条宽度
在网站开发中,有时候需要获取浏览器滚动条的宽度,在武汉蚂蹄软件服务中心的技术人员指导之下,我实现了该需求.记录如下: 首先说明一下原理: ①生成一个div,设置滚动条不可见,记录其宽度: ②将上面的d ...
随机推荐
- 解决mysql中表字符集gbk，列字符集Latin1，python查询乱码问题
最近在公司碰到一个异常蛋疼的情况,mysql数据库中,数据库和表的字符集都是'gbk',但是列的字符集却是'latin1',于是蛋疼的事情出现了. 无论我连接字符串的`charset`设置为`gbk` ...
- 2733: [HNOI2012]永无乡 - BZOJ
Description 永无乡包含 n 座岛,编号从 1 到 n,每座岛都有自己的独一无二的重要度,按照重要度可 以将这 n 座岛排名,名次用 1 到 n 来表示.某些岛之间由巨大的桥连接,通过桥可以 ...
- Mysql异常：MySQLNonTransientConnectionException: No operations allowed after statement closed
Mysql异常:MySQLNonTransientConnectionException: No operations allowed after statement closed MySQLNonT ...
- Mybatis 一对一、一对多、多对多关联之级联添加
示例项目:MIPO_CRM 一.一对一关联 示例:订单与销售机会 描述:在业务员与客户的联系人的联系记录中可以生成一条销售机会,而此条销售机会可生成一条订单,两者呈一对一关联. 1.表设计 oppor ...
- Dialog控件
代码Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--& ...
- Ubuntu 14.04 启用休眠
Ubuntu 14.04 启用休眠 Ubuntu 14.04 默认不启用关机菜单中的休眠选项.前提是要有swap分区(网上查询,未验证是否一定需要.PS:swap要不小于物理内存)不过首先最好还是确认 ...
- 支付标记化（Tokenization）技术
道客巴巴->支付标记化(Tokenization)技术介绍 百度文库->中国银联支付标记化技术指引 NFC产业网->银联技术专家解答支付标记化Token技术 百度搜索->Tok ...
- python脚本工具－2 去除扩展名后提取目录下所有文件名并保存
文件夹里有多个RM格式的视频文件,现需要把它们的文件名都提取出来,并去掉文件的扩展名,以便放到需要的网页里. 源代码: # --- picknames.py --- import os filenam ...
- HDFS的命令行操作
1.namenode –format:格式化DFS 文件系统 2.secondaryNameNode: 运行DFS的 SecondaryNameNode 进程 hadoop secondaryname ...
- visio2010去除直线交叉处的跨线
设计(最上方)->连接线(最右侧)->显示跨线(取消打钩)