最近做公司的項目有些地方可能需要一些小提示,於是自己建立項目研究tips。在此之前看到過一些別人寫的JqueryTips,於是借鑒瞭一些別人的經驗在此基礎上我做出瞭一些改進。
有的同學可能使用過其他一些JqueryTIps的工具,但是我看瞭那些有些不適合我來使用,所以自己做吧,用的也Happy。
因為有些數據可能過長,會導致設計好的表格樣式變形,所以在綁定數據的時候大多數都會設置過長數據省略號顯示,但是這就會導致我們查看數據的時候不太方便,html自帶的title技能可能已經足夠我們使用,但是我覺得樣式可能不好看,而且反應有些遲鈍。於是做瞭這個小工具。代碼不多。
因為是測試用的,所以我直接在頁面上寫瞭這些數據,這些內容大傢將就的看一下吧。不要計較這些啊。
以下是測試數據的代碼,包括CSS樣式。
復制代碼
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>
復制代碼
復制代碼
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>
復制代碼
以上是要準備的,除此之外還需要準備一個Jquery庫。這個很好找吧。
剛剛開始做的時候,遇到一個很棘手的問題,就是tip顯示的時候遇到瀏覽器邊框就會伸出去,然後你鼠標移動之後又根本看不著,好吧,這跟我們的需求很不符合瞭。於是我在判斷tip的位置的時候做一個判斷,這個判斷是根據你頁面寬度和tip的寬度來覺得的。看以下代碼:
1 var windowWidth = $(window).width();//瀏覽器寬度
2 var tooltipWidth = $("#tooltip").width();//tipp寬度
3 if (windowWidth – e.clientX – 5 < tooltipWidth) {//判斷提示是否會被隱藏
使用瀏覽器的當前寬度,減去鼠標當前位置,可以得到鼠標當前距離瀏覽器的寬度。再與tipp的寬度對比。
這樣在我鼠標移動的時候可以知道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"
})
}
復制代碼
這裡之前我一直都很迷糊,因為有兩個屬性在Jquery裡面。pageX,Y和clientX,Y。做瞭許久都有一個問題困擾。就是當瀏覽器中數據太多瞭,出現瞭滾動條之後,pageX,Y已經不能準確定位瞭。於是另辟一條路。
我Google瞭一下css定位相關的內容。開始我一直使用的absolute,絕對定位,相對page的。後來我使用的是fixed,相對於瀏覽器的可見頁面。這樣就好辦瞭。繼續看看代碼:
復制代碼
1 var toolTip = "<p id='tooltip'>" + $(this).text() + "</p>";
2 $("body").append(toolTip);
3 $("#tooltip").css({
4 "position": "fixed",//這裡使用fixed相對於瀏覽器可見頁面定位
5 "padding": "5px",
6 "background": "#F0F0E8",
7 "white-space": "nowrap",//讓p內的文字內容部換行
8 "border": "1px gray solid"
9 }).show(200);
復制代碼
好瞭代碼很簡單,接下來看看效果如何吧。