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 ...
随机推荐
- jq获取元素到底部的距离
// var wh = $(window).height(),//是文档窗口高度 // ot = $("#icoimg").offset().top,//是标签距离顶部高度 // ...
- 【扩展欧几里得】Bzoj 1477:青蛙的约会
Description 两只青蛙在网上相识了,它们聊得很开心,于是觉得很有必要见一面.它们很高兴地发现它们住在同一条纬度线上,于是它们约定各自朝西跳,直到碰面为止.可是它们出发之前忘记了一件很重要的事 ...
- 解决VS如何同时打开两个工程（xp和win7）
http://www.360doc.com/content/11/1020/00/7891073_157586269.shtml
- MVC 自定义AuthorizeAttribute 实现权限验证
MVC内置的AuthorizeFilter先于Action/Result过滤器执行,为网站权限验证提供了很好的一套验证机制. 通过自定义的AuthorizeAttribute可以实现对用户权限的验证. ...
- 团体程序设计天梯赛-练习集L1-020. 帅到没朋友
L1-020. 帅到没朋友 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 当芸芸众生忙着在朋友圈中发照片的时候,总有一些人因为 ...
- The 9th Zhejiang Provincial Collegiate Programming Contest->Problem A:A - Taxi Fare
Problem A: Taxi Fare Time Limit: 2 Seconds Memory Limit: 65536 KB Last September, Hangzhou raised th ...
- efficient c++,单线程内存池
基于 http://www.cnblogs.com/diegodu/p/4555018.html operator new的知识基础上 介绍这个章节的内容 对于一般直接 new 与delete 性能较 ...
- 破解之API断点法
上回给大家做的破解教程,地址是http://www.52pojie.net/thread-52719-1-1.html,用的是“调用堆栈”方法.今天给新手提供另一种方法“API函数断点”,这种方法要求 ...
- JS动态特性
var arr=[]; arr['js']='jquery'; arr['css']='oocss'; var obj={}; for(var i in arr) { obj[i]=arr[i]; } ...
- P94、面试题12：打印1到最大的n位数
题目:输入数字n,按顺序打印出从1最大的n位十进制数.比如输入3,则打印出1,2,3一直到最大的3位数999. 思路:先把字符串中的每一个数字都初始化为‘0’,然后每一次为字符串表示的数字加1,再打印 ...