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 ...
随机推荐
- maven eclipse web项目流程（简化内容）
1.maven eclipse 环境搭建 1.1 下载解压配置环境变量(解压.环境变量maven目录到bin.setting.xml 改本地仓库) 1.2 eclipse插件安装配置(link安装.加 ...
- 原创新闻 11 个最佳 jQuery 滚动条插件
通过jQuery滚动条插件,你可以换掉千篇一律的默认浏览器滚动条,让你的网站或web项目更具特色,更有吸引力.本文收集了11款非常漂亮.实用的jQuery滚动条插件,你可以轻松将它们应用在自己的网站中 ...
- Hibernate注解方法使用总结
1.类级别注解 @Entity 映射实体类 @Table 映射数句库表 @Entity(name="tableName") - 必须,注解将一个类声明为一个实体bea ...
- MSMQ(消息队列)
前段时间研究WCF接触到了MSMQ,所以认真的学习了一下,下面是我的笔记. 我理解的MSMQ MSMQ可以被看成一个数据储存装置,就如同数据库,只不过数据存储的是一条一条的记录,而MSMQ存储的是一个 ...
- BZOJ 4146 [AMPPZ2014] Divisors 解题报告
这个题感觉比较小清新... 我们记录每个数出现的次数 $T_i$. 首先依次枚举每个数字,令 $ans = ans + T_i \times (T_i - 1)$,然后枚举这个数的倍数,令 $ans ...
- hdu 4712
看了大牛的解法 第一次知道可以产生随机数解题 在计算hamming距离时用了位运算 很简便 /************************************************* ...
- auto_ptr,shared_ptr 智能指针的使用
Q: 那个auto_ptr是什么东东啊?为什么没有auto_array?A: 哦,auto_ptr是一个很简单的资源封装类,是在<memory>头文件中定义的.它使用“资源分配即初始化”技 ...
- 64位ubuntu安装WPS
http://jingyan.baidu.com/article/d3b74d64afd96f1f77e609a3.html http://sixipiaoyang.blog.163.com/blog ...
- 再分析 返回值加引用&，const
本文主要分析,返回&,和返回值加const的作用. 返回& 定义一个数组模板: template<class T>class Array{ enum{size = 100} ...
- java.lang.NoClassDefFoundError: com/opensymphony/xwork2/util/TextUtils
java.lang.NoSuchMethodError: com.opensymphony.xwork2.ActionContext.get(Ljava/lang/String;)Ljava/lang ...