jQueryを使ったPDFアイコン付加プラグイン
リンク先がPDFの場合など、アイコンを表示させてリンク先がPDFファイルであることを知らせる事があります。疑似クラスafterやcontentプロパティを利用したい所ですが、IE6/IE7がこれらに対応していないためにa要素の背景にアイコンを表示させています。例えばこんなCSSを書きます。
CSS Code
a.pdf {
padding: 0.1em 18px 0.1em 0;
background: url(img/icon_pdf.gif) no-repeat right center;
}
しかしこのCSSの場合、改行されるような長い文章の場合、Windows IE6/IE7で致命的なバグがあります。
左のキャプチャ画像は各ブラウザのレンダリング状態をキャプチャしたものです。
Win Firefox3およびMac Firefox3ではきちんと文末にアイコンが表示されているのに対し、Win IE6/IE7の場合アイコンがきちんと表示されていない事が分かると思います。
zoom:1プロパティを与えると一応は表示されますが、文末にアイコンが表示されずに改行されている文章の右中央に表示されてしまいます。
Win IE6/7ではインライン要素に指定した背景画像で改行が入る場合、意図したレイアウトが反映されないバグがあるのです。
先日この事でTwitterにポストしたところ、a要素の次に空spanを入れてspanに背景を指定すれば回避されると回答が来ました。例えば次のようなXHTMLとCSSを書けば良いとの事です。
HTML and CSS Code
<style type="text/css">
span.pdf {
padding: 0.1em 18px 0.1em 0;
background: url(img/icon_pdf.gif) no-repeat right center;
}
</style>
<p><a href="hoge.pdf" target="_blank">PDF</a><span> </span></p>
空spanを入れるのはあまり気持ちいいものでは無いのですが、これでWin IE6/IE7でも問題無く意図したレイアウトで表示されます。
前説がかなり長くなりましたが、jQueryの属性セレクタを使用して拡張子.pdfが付いたファイルへのリンクの場合、次の仕様に基づき自動的にアイコンを表示するプラグインを作ってみました。
- .addPdfIconの引数をbeforeにすると前に<span class="pdfBefore"> </span>を付加
- .addPdfIconの引数をafterにすると後ろに<span class="pdfAfter"> </span>を付加
- PDFにリンクしたaタグにclass="noIcon"を付加するとtarget="_blank"だけ付加(img要素にPDFファイルをリンクした場合などの対処用)
- クリックしたら別ウィンドウで開く
コードは次のようになります。
jQuery Code
$.fn.extend(
{
addPdfIcon: function(param)
{
var pdfElem = $(this);
if(param == "after")
{
pdfElem.not(".noIcon").after("<span class='pdfAfter'> </span>");
}
else if (param == "before")
{
pdfElem.not(".noIcon").before("<span class='pdfBefore'> </span>");
}
pdfElem.click(function()
{
this.target = "_blank";
});
}
});
.after()と.append()、.before()と.prepend()の違いは追加する要素を要素内に含むか含まないかの違いです。今回はa要素の直後、直前に要素を追加するので.after()と.before()を利用します。.not("className")を使ってフィルタリングしています。
呼び出すコードは次のようになります。
jQuery Code
$(function()
{
//$("a[href$='pdf']").addPdfIcon("before");
$("a[href$='pdf']").addPdfIcon("after");
});
属性セレクタを用いてpdfの場合に.addPdfIconメソッドを実行します。引数after、beforeで文末にアイコンを付けるか文頭に付けるかを切り替えます。CSSは次のようなものを用意します。
CSS Code
span.pdfAfter {
padding: 0.1em 16px 0.1em 0;
background: url(img/icon_pdf.gif) no-repeat right center;
}
span.pdfBefore {
padding: 0.1em 0 0.1em 16px;
background: url(img/icon_pdf.gif) no-repeat left center;
}
毎度の事ですが、zipでダウンロード出来るようにしておきました。宜しければどうぞ
