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 ...
随机推荐
- linux下nginx的安装
一.安装nginx 1.在nginx官方网站下载一个包,下载地址是:http://nginx.org/en/download.html 2.WinSCP(ftp上传工具).exe FT ...
- linux学习笔记（1）-文件处理相关命令
列出文件和目录 ls (list) #ls 在终端里键入ls,并回车,就会列出当前目录的文件和目录,但是不包括隐藏文件和目录 #ls -a 列出当前目录的所有文件 #ls -al 列出当前目的所有文件 ...
- how to make form:checkboxes in JSP
retransmitTable.jsp file: <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix=&qu ...
- C++中的构造函数，拷贝构造函数和赋值运算
关于C++中的构造函数,拷贝构造函数和赋值运算,以前看过一篇<高质量C++/C编程指南>的文章中介绍的很清楚,网上能搜索到,如果想详细了解这方面的知识可以参看一下这篇文章. 常见的给对象赋 ...
- Google Play市场考察报告
考察了Google Play日本市场的10款应用,考察的重点在于每个App有什么亮点,盈利模式在哪里.本文并不是App的功能介绍. (1)恋爱文集[文库类应用] 该应用收录了一些恋爱文章,其主要受众是 ...
- codeforces #310 div1 C
操作无论是U还是L,都会使原图形分裂成两个图形,且两个图形的操作互不影响 我们又发现由于操作点只可能在下斜线上,如果将操作按x排序 那么无论是U还是L,都会将操作序列完整分割成两半,且两个操作序列互不 ...
- Android：自定义标题栏
现在很多的Android程序都在标题栏上都显示了一些按钮和标题,这里尝试做个实例 在onCreate中添加: //自定义标题 requestWindowFeature(Window.FEATURE_C ...
- ArcGIS学习记录—KMZ KML与SHP文件互相转换
1.在google earth中绘制边界 工具栏中选择"Add Polygon".随意绘制一个多边形. 右击添加的图层名(左侧)保存位置为,选择保存为kmz或kml文件. ...
- hadoop2.2.0安装
64位编译和安装 http://blog.csdn.net/licongcong_0224/article/details/12972889 http://blog.csdn.net/w1377026 ...
- Ant build.xml 批量打渠道包回顾！打第三方jar包总结
配置: eclipse3.9 + ADT22 + sdk 4.0 eclipse带自动混淆的,不过只有在我们手动创建包的时候,才去打签名,去混淆! 开启混淆这样做吧! 必备文件3个: 当然进行ant打 ...