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 ...
随机推荐
- 通过分析WP的代码来学习PHP。1
下载了WP的代码,并且应用到了网站上面,现在也在正常的运行中,地址是:www.freealgorithm.tk .具体的申请过程就不赘述了,学习WP的代码. 他的目录结构就不看了,可以下载同名文件我会 ...
- JavaScript中常谈的对象
为浏览器编写代码时,总少不了window对象 window对象表示JavaScript程序的全局环境 同时 也表示应用的主窗口 到处都是对象 window对象 常用的属性和方法介绍 location ...
- C#跳出循环的几种方法的区别
break是循环结束执行,执行循环体后面的代码. continue是跳过本次循环未执行的代码,继续执行下一次循环. goto是跳到指定的指令去,你指哪,他跳到哪. return是函数返回,如果循环在M ...
- Ubuntu 14.04 启用休眠
Ubuntu 14.04 启用休眠 Ubuntu 14.04 默认不启用关机菜单中的休眠选项.前提是要有swap分区(网上查询,未验证是否一定需要.PS:swap要不小于物理内存)不过首先最好还是确认 ...
- 数据聚合 & 分组：新一代系统监控的核心功能
遥想 2015 年 8 月 17 日,Cloud Insight 还在梳理功能原型,畅想 Cloud Insight 存在的意义:为什么阿里云用户需要使用 Cloud Insight 来加强管理. 而 ...
- Head First 设计模式笔记：单例模式
单例模式 确保一个类只有一个实例,并提供一个全局访问点. 类图: Singleton static uniqueInstance //其他属性... static getInstance() //其他 ...
- 在linux下，查看一个运行中的程序， 占用了多少内存
1. 在linux下,查看一个运行中的程序, 占用了多少内存, 一般的命令有 (1). ps aux: 其中 VSZ(或VSS)列 表示,程序占用了多少虚拟内存. RSS列 表示, 程序占用了多少物 ...
- mybatis和spring3.1整合
因spring3发布时mybatis还没有出正式版本,所以spring没有整合最新的mybatis.不过社区倒是开发了一个中间件. 需要的jar包 mybatis-3.0.6.jar mybatis- ...
- 最新版FreeTextBox(版本3.1.6)在ASP.Net 2.0中使用简介
http://www.cnblogs.com/kflwz/articles/1337310.html 1.下载最新版FreeTextBox(版本3.1.6),解压 FreeTextBox 3. ...
- ANDROID_MARS学习笔记_S01_005CheckBox
一. 1.checkbox_layout.xml <?xml version="1.0" encoding="utf-8"?> <Linear ...