[jQuery] 依連結的檔案類型秀出圖示

去年曾經在「標示檔案連結類型的javascript」這篇文章中，記錄過Marko Dugonjić所寫的一小支javascript，搭配相應的css後，即可在檔案連結旁顯示圖示，也會將這些檔案自動開啟在新視窗中，為網頁的易用性（usability）加分不少。

最近因為在學習jQuery，所以試著把這支script改寫了一下，並且順便解決在IE內顯示時的BUG。

原本的script在IE裡面，如果遇到連結文字很長，需要換行時，由於圖示其實是在css內放置的背景圖片，因此會變成下圖這樣，也就是圖示無法跟著換到下一行再顯示（範例網頁）：

因此在使用jQuery改寫時，決定要捨棄在css背景放圖示的作法，改為在<a>元素後面，使用<img />插入圖檔。所以代碼是這樣寫的：

$(document).ready(function() { $("#doctype p a").each(function(){ if ($(this).attr("href").indexOf(".pdf") !== -1) {$(this).after(" <img src='icon_pdf.gif' align='absmiddle' />")}; if ($(this).attr("href").indexOf(".doc") !== -1) {$(this).after(" <img src='icon_doc.gif' align='absmiddle' />")}; if ($(this).attr("href").indexOf(".zip") !== -1) {$(this).after(" <img src='icon_zip.gif' align='absmiddle' />")}; if ($(this).attr("href").indexOf(".ppt") !== -1) {$(this).after(" <img src='icon_ppt.gif' align='absmiddle' />")}; $(this).attr("target","_blank"); }); });

這就是jQuery的好處，只要懂得xhtml和css，照著直覺寫就可以了。我用到兩個jQuery的function：.after(content)和attr(key, value)；分別用來在<a>元素後面加上<img />圖檔，以及讓所有的檔案連結開在新視窗。

這個新版本在IE內，因為是真的插入一張圖片，所以沒有css背景的bug，換行仍可正常顯示：

使用上述script，記得要先引入jQuery的程式庫，也不需要再做特殊的css設定，有需要的人可以參考我的成品網頁。如果你有更好、更精簡的寫法，也歡迎與我分享。

這篇文章發表於 September 09th, 2007 ，分類為：Webdev。你可以訂閱這篇文章的回應：RSS 2.0，也歡迎發表你的意見，或者從你的網站 Trackback 過來。