JqueryTips小實驗,瀏覽器滾動條不限制

 最近做公司的項目有些地方可能需要一些小提示,於是自己建立項目研究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);

復制代碼

      好瞭代碼很簡單,接下來看看效果如何吧。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *