jQuery

jQueryを使ってIE6でもリンクファイルの拡張子ごとにアイコンを表示させる方法。



リンクをクリックした時、ゆっくりと、そして心なしかドヤ顔でpdfが開き始めたら
「あんたバカァ?!」と思いませんか。私は思います。 そんな事態を防ぐには、リンクの横にアイコンを表示させておけばバッチリです。 今回はそれをCSS3ではなくjQueryセレクタを使って再現してみました。

IE6じゃなかったらCSS3で実現できたのに・・

私もCSS3を使っていいならば話は早かったのですが、諸事情によりIE6対象のサイトなので諦めました。

最近話題のCSS3を利用した方法は以下の記事で紹介されています:)
ちなみにかちびとさんの方はEXCELがEXILEになっちゃう不思議な魔法がかかっているので注意してくださいw

そんなわけで潔くIE6で出来る方法を募集しました(人まかせ!ちがうの!検索はしてみたの!!)

[blackbirdpie url=”http://twitter.com/xxmiz0rexx/status/109137455910883329″]

そうしたら、2人の紳士が反応してくれました(*´∀`*)

[blackbirdpie url=”http://twitter.com/#!/poyosi/status/109137749617033216″]
[blackbirdpie url=”http://twitter.com/sou_lab/statuses/109143753876443136″]

そんなこんなで、 今回は先にリプライを頂けた@poyosiさんが教えてくれたjQueryを使用する方法をためしてみました!

ちなみに@sou_lubさんが教えてくれたのはIE7.jsというもので、Google コードをページに読み込むだけでIE6以下のブラウザを7に近い状態にできるものだそうです。 ちょー便利!!こちらも別件で使ってみました:) ぽよしさん、そうさんありがとうちゅっちゅ!!

jQueryセレクタを利用した記述例

未来のわたしのために解説します。たぶんすぐ忘れるので。。

<header>~</header>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
	$('.entry a[href$=.pdf]').addClass('pdf');
});
</script>

最初にjQueryを読み込んで、次にコードを書きます。 基本的にピンクの部分を書き換えればOKです。

上記ですと「ちょっとアンタ!命令よ!entryという要素内のaタグの中で、 href.pdfで終わるものpdfというclass名をつけなさいっ!!
と書いてあります。

CSS
.entry a.pdf {
background-image:url(アイコンのURL); 
background-repeat:no-repeat;
padding-left:18px;
}

先ほどpdfというclass名をつけたのでそれに対してのcssを書きます。 aタグの背景画像にアイコンを表示して、リンクの文字位置をpaddingでアイコンのサイズに合わせてずらしています。

html
<a href="aaa.pdf">あああ</a>
表示イメージ(キャプチャ)

*ちなみに今回使用したアイコンはこちらで配布されています。

その他の使えそうなセレクタ

先程の a[href$=.pdf] の部分を置き換えるだけで動きますよ~ヾ(*´∀`*)ノ

指定された文字列から始まる要素
a[href^=なにか]
指定された文字列を含む要素
a[href*=なにか]

さいごに

今回コードを書く上で以下のサイトを参考にさせて頂きました。 jQueryのセレクタ、わたし正直はじめて使いましたw こんな便利なモノがあったんですね~!勉強になりました!

以上、霙でした!