JqueryTips小实验,浏览器滚动条不限制

      最近做公司的项目有些地方可能需要一些小提示,于是自己建立项目研究tips。在此之前看到过一些别人写的JqueryTips,于是借鉴了一些别人的经验在此基础上我做出了一些改进。

      有的同学可能使用过其他一些JqueryTIps的工具,但是我看了那些有些不适合我来使用,所以自己做吧,用的也Happy。

      因为有些数据可能过长,会导致设计好的表格样式变形,所以在绑定数据的时候大多数都会设置过长数据省略号显示,但是这就会导致我们查看数据的时候不太方便,html自带的title技能可能已经足够我们使用,但是我觉得样式可能不好看,而且反应有些迟钝。于是做了这个小工具。代码不多。

      因为是测试用的,所以我直接在页面上写了这些数据,这些内容大家将就的看一下吧。不要计较这些啊。

       以下是测试数据的代码,包括CSS样式。

JqueryTips小实验,浏览器滚动条不限制
JqueryTips小实验,浏览器滚动条不限制
 1   <style type="text/css">
 2         .tab
 3         {
 4             width: 1000px;
 5             height: 100%;
 6             border-collapse: collapse;
 7             margin: 0;
 8             border: 1px #c0c0c0 solid;
 9             table-layout: fixed;
10         }
11         .tab td
12         {
13             height: 20px;
14             border: 1px #C0C0C0 solid;
15             white-space: nowrap; /* 不换行 */
16             overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
17             text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
18         }
19         .tab th
20         {
21             height: 24px;
22             background: url(panel-header-bg.gif) repeat-x left top;
23             line-height: 26px;
24             height: 26px;
25             font-weight: bold;
26             border: 1px #C0C0C0 solid;
27         }
28     </style>
View Code CSS代码
JqueryTips小实验,浏览器滚动条不限制
JqueryTips小实验,浏览器滚动条不限制
JqueryTips小实验,浏览器滚动条不限制
  1   <table class="tab">
  2             <thead>
  3                 <tr>
  4                     <th style="width: 5%;">
  5                         编号
  6                     </th>
  7                     <th style="width: 10%">
  8                         姓名
  9                     </th>
 10                     <th style="width: 5%">
 11                         性别
 12                     </th>
 13                     <th style="width: 12%">
 14                         电话
 15                     </th>
 16                     <th style="width: 15%">
 17                         邮箱
 18                     </th>
 19                     <th style="width: 15%">
 20                         地址
 21                     </th>
 22                     <th style="width: 10%">
 23                         学历
 24                     </th>
 25                     <th style="width: 8%">
 26                         婚否
 27                     </th>
 28                     <th style="width: 20%">
 29                         备注
 30                     </th>
 31                 </tr>
 32             </thead>
 33             <tbody>
 34                 <tr>
 35                     <td>
 36                         1
 37                     </td>
 38                     <td>
 39                         Mike11
 40                     </td>
 41                     <td>
 42                         男11
 43                     </td>
 44                     <td>
 45                         1523652256311
 46                     </td>
 47                     <td class="tips">
 48                         mikeLoveNike@gmail.com11
 49                     </td>
 50                     <td class="tips">
 51                         深圳市南山区白石洲上白石102栋11
 52                     </td>
 53                     <td>
 54                         本科11
 55                     </td>
 56                     <td>
 57                         已婚11
 58                     </td>
 59                     <td class="tips">
 60                         时间都去哪儿了时间都去哪儿了11时间都去度假了时间都去度假了吗
 61                     </td>
 62                 </tr>
 63                 <tr>
 64                     <td>
 65                         2
 66                     </td>
 67                     <td>
 68                         Mike22
 69                     </td>
 70                     <td>
 71                         男22
 72                     </td>
 73                     <td>
 74                         1523652256322
 75                     </td>
 76                     <td class="tips">
 77                         mikeLoveNike@gmail.com22
 78                     </td>
 79                     <td class="tips">
 80                         深圳市南山区白石洲上白石102栋22时间都去度假了时间都去度假了吗哈哈哈哈
 81                     </td>
 82                     <td>
 83                         本科22
 84                     </td>
 85                     <td>
 86                         已婚22
 87                     </td>
 88                     <td class="tips">
 89                         时间都去哪儿了时间都去哪儿了22时间都去度假了时间都去度假了吗哈哈哈哈
 90                     </td>
 91                 </tr>
 92                 <tr>
 93                     <td>
 94                         3
 95                     </td>
 96                     <td>
 97                         Mike33
 98                     </td>
 99                     <td>
100                         男33
101                     </td>
102                     <td>
103                         1523652256333
104                     </td>
105                     <td class="tips">
106                         mikeLoveNike@gmail.com33
107                     </td>
108                     <td class="tips">
109                         深圳市南山区白石洲上白石102栋33时间都去度假了时间都去度假了吗哈哈哈哈
110                     </td>
111                     <td>
112                         本科33
113                     </td>
114                     <td>
115                         已婚33
116                     </td>
117                     <td class="tips">
118                         时间都去哪儿了时间都去哪儿了33时间都去度假了时间都去度假了吗哈哈哈哈
119                     </td>
120                 </tr>
121                 <tr>
122                     <td>
123                         4
124                     </td>
125                     <td>
126                         Mike44
127                     </td>
128                     <td>
129                         男44
130                     </td>
131                     <td>
132                         1523652256344
133                     </td>
134                     <td class="tips">
135                         mikeLoveNike@gmail.com44
136                     </td>
137                     <td class="tips">
138                         深圳市南山区白石洲上白石102栋44444时间都去度假了时间都去度假了吗哈哈哈哈
139                     </td>
140                     <td>
141                         本科44
142                     </td>
143                     <td>
144                         已婚44
145                     </td>
146                     <td class="tips">
147                         时间都去哪儿了时间都去哪儿了44时间都去度假了时间都去度假了吗哈哈哈哈
148                     </td>
149                 </tr>
150                 <tr>
151                     <td>
152                         5
153                     </td>
154                     <td>
155                         Mike55
156                     </td>
157                     <td>
158                         男55
159                     </td>
160                     <td>
161                         1523652256355
162                     </td>
163                     <td class="tips">
164                         mikeLoveNike@gmail.com55
165                     </td>
166                     <td class="tips">
167                         深圳市南山区白石洲上白石102栋55
168                     </td>
169                     <td>
170                         本科11
171                     </td>
172                     <td>
173                         已婚11
174                     </td>
175                     <td class="tips">
176                         时间都去哪儿了时间都去哪儿了55时间都去度假了时间都去度假了吗
177                     </td>
178                 </tr>
179                 <tr>
180                     <td>
181                         6
182                     </td>
183                     <td>
184                         Mike66
185                     </td>
186                     <td>
187                         男66
188                     </td>
189                     <td>
190                         1523652256366
191                     </td>
192                     <td class="tips">
193                         mikeLoveNike@gmail.com77
194                     </td>
195                     <td class="tips">
196                         深圳市南山区白石洲上白石102栋77时间都去度假了时间都去度假了吗哈哈哈哈
197                     </td>
198                     <td>
199                         本科77
200                     </td>
201                     <td>
202                         已婚77
203                     </td>
204                     <td class="tips">
205                         时间都去哪儿了时间都去哪儿了77时间都去度假了时间都去度假了吗哈哈哈哈
206                     </td>
207                 </tr>
208                 <tr>
209                     <td>
210                        8
211                     </td>
212                     <td>
213                         Mike88
214                     </td>
215                     <td>
216                         男88
217                     </td>
218                     <td>
219                         1523652256388
220                     </td>
221                     <td class="tips">
222                         mikeLoveNike@gmail.com88
223                     </td>
224                     <td class="tips">
225                         深圳市南山区白石洲上白石102栋88时间都去度假了时间都去度假了吗哈哈哈哈
226                     </td>
227                     <td>
228                         本科88
229                     </td>
230                     <td>
231                         已婚88
232                     </td>
233                     <td class="tips">
234                         时间都去哪儿了时间都去哪儿了88时间都去度假了时间都去度假了吗哈哈哈哈
235                     </td>
236                 </tr>
237                 <tr>
238                     <td>
239                         9
240                     </td>
241                     <td>
242                         Mike99
243                     </td>
244                     <td>
245                         男99
246                     </td>
247                     <td>
248                         1523652256399
249                     </td>
250                     <td class="tips">
251                         mikeLoveNike@gmail.com99
252                     </td>
253                     <td class="tips">
254                         深圳市南山区白石洲上白石102栋999999时间都去度假了时间都去度假了吗哈哈哈哈
255                     </td>
256                     <td>
257                         本科99
258                     </td>
259                     <td>
260                         已婚99
261                     </td>
262                     <td class="tips">
263                         时间都去哪儿了时间都去哪儿了99时间都去度假了时间都去度假了吗哈哈哈哈
264                     </td>
265                 </tr>
266                 <tr>
267                     <td>
268                         10
269                     </td>
270                     <td>
271                         Mike1010
272                     </td>
273                     <td class="tips">
274                         男1010
275                     </td>
276                     <td class="tips">
277                         152365225631010
278                     </td>
279                     <td class="tips">
280                         mikeLoveNike@gmail.com1010
281                     </td>
282                     <td class="tips">
283                         深圳市南山区白石洲上白石102栋1010
284                     </td>
285                     <td>
286                         本科1010
287                     </td>
288                     <td>
289                         已婚1010
290                     </td>
291                     <td class="tips">
292                         时间都去哪儿了时间都去哪儿了1010时间都去度假了时间都去度假了吗
293                     </td>
294                 </tr>
295                 <tr>
296                     <td>
297                         11
298                     </td>
299                     <td>
300                         Mike1111
301                     </td>
302                     <td class="tips">
303                         男1111
304                     </td>
305                     <td class="tips">
306                         152365225631111
307                     </td>
308                     <td class="tips">
309                         mikeLoveNike@gmail.com1111
310                     </td>
311                     <td class="tips">
312                         深圳市南山区白石洲上白石102栋1111时间都去度假了时间都去度假了吗哈哈哈哈
313                     </td>
314                     <td>
315                         本科1111
316                     </td>
317                     <td>
318                         已婚1111
319                     </td>
320                     <td class="tips">
321                         时间都去哪儿了时间都去哪儿了1111时间都去度假了时间都去度假了吗哈哈哈哈
322                     </td>
323                 </tr>
324                 <tr>
325                     <td>
326                         12
327                     </td>
328                     <td>
329                         Mike1212
330                     </td>
331                     <td class="tips">
332                         男1212
333                     </td>
334                     <td class="tips">
335                         152365225631212
336                     </td>
337                     <td class="tips">
338                         mikeLoveNike@gmail.com1212
339                     </td>
340                     <td class="tips">
341                         深圳市南山区白石洲上白石102栋1212时间都去度假了时间都去度假了吗哈哈哈哈
342                     </td>
343                     <td>
344                         本科1212
345                     </td>
346                     <td>
347                         已婚1212
348                     </td>
349                     <td class="tips">
350                         时间都去哪儿了时间都去哪儿了1212时间都去度假了时间都去度假了吗哈哈哈哈
351                     </td>
352                 </tr>
353                 <tr>
354                     <td>
355                         13
356                     </td>
357                     <td>
358                         Mike1313
359                     </td>
360                     <td class="tips">
361                         男1313
362                     </td>
363                     <td class="tips">
364                         152365225631313
365                     </td>
366                     <td class="tips">
367                         mikeLoveNike@gmail.com1313
368                     </td>
369                     <td class="tips">
370                         深圳市南山区白石洲上白石102栋131313131313时间都去度假了时间都去度假了吗哈哈哈哈
371                     </td>
372                     <td>
373                         本科1313
374                     </td>
375                     <td>
376                         已婚1313
377                     </td>
378                     <td class="tips">
379                         时间都去哪儿了时间都去哪儿了1313时间都去度假了时间都去度假了吗哈哈哈哈
380                     </td>
381                 </tr>
382             </tbody>
383         </table>
View Code table html代码
JqueryTips小实验,浏览器滚动条不限制

      以上是要准备的,除此之外还需要准备一个Jquery库。这个很好找吧。

      刚刚开始做的时候,遇到一个很棘手的问题,就是tip显示的时候遇到浏览器边框就会伸出去,然后你鼠标移动之后又根本看不着,好吧,这跟我们的需求很不符合了。于是我在判断tip的位置的时候做一个判断,这个判断是根据你页面宽度和tip的宽度来觉得的。看以下代码:

JqueryTips小实验,浏览器滚动条不限制
JqueryTips小实验,浏览器滚动条不限制
1  var windowWidth = $(window).width();//浏览器宽度
2                 var tooltipWidth = $("#tooltip").width();//tipdiv宽度
3                 if (windowWidth - e.clientX - 5 < tooltipWidth) {//判断提示是否会被隐藏
View Code tip位置判断
JqueryTips小实验,浏览器滚动条不限制

      使用浏览器的当前宽度,减去鼠标当前位置,可以得到鼠标当前距离浏览器的宽度。再与tipdiv的宽度对比。

      这样在我鼠标移动的时候可以知道tip显示的地方是否会在浏览器的边缘了。然后根据这样的判断,可以讲tip的右边距设置成固定值,这样你移动鼠标都不会对tip产生影响了,但是当你鼠标移动到其他地方的时候又将重新计算。

      然后看一下给tip定位的代码:

JqueryTips小实验,浏览器滚动条不限制
JqueryTips小实验,浏览器滚动条不限制
 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"
                    })
                }
View Code tipdiv定位
JqueryTips小实验,浏览器滚动条不限制

      这里之前我一直都很迷糊,因为有两个属性在Jquery里面。pageX,Y和clientX,Y。做了许久都有一个问题困扰。就是当浏览器中数据太多了,出现了滚动条之后,pageX,Y已经不能准确定位了。于是另辟一条路。

      我Google了一下css定位相关的内容。开始我一直使用的absolute,绝对定位,相对page的。后来我使用的是fixed,相对于浏览器的可见页面。这样就好办了。继续看看代码:

JqueryTips小实验,浏览器滚动条不限制
JqueryTips小实验,浏览器滚动条不限制
1  var toolTip = "<div id=‘tooltip‘>" + $(this).text() + "</div>";
2                 $("body").append(toolTip);
3                 $("#tooltip").css({
4                     "position": "fixed",//这里使用fixed相对于浏览器可见页面定位
5                     "padding": "5px",
6                     "background": "#F0F0E8",
7                     "white-space": "nowrap",//让div内的文字内容部换行
8                     "border": "1px gray solid"
9                 }).show(200);
View Code tipDiv定义
JqueryTips小实验,浏览器滚动条不限制

      好了代码很简单,接下来看看效果如何吧。

 JqueryTips小实验,浏览器滚动条不限制

JqueryTips小实验,浏览器滚动条不限制

经本人测试,Google和IE都可以使用。

有个bug我一直想不明白,就是当我的tip显示之后,我在移动鼠标,有时候会出现tipdiv被拉长了。求大神解释,看下效果:

JqueryTips小实验,浏览器滚动条不限制

      下面是html代码的附件,有兴趣的同学可以直接下载,用浏览器打开即可:JqueryTips.zip

      以上是小弟个人理解,如果有更好的想法,欢迎拍砖,来辩。

JqueryTips小实验,浏览器滚动条不限制,布布扣,bubuko.com

JqueryTips小实验,浏览器滚动条不限制

上一篇:网站运维技术与实践


下一篇:28个在线学习网站让你变身齐天大圣!