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
こんな便利なモノがあったんですね~!勉強になりました!
以上、霙でした!
この記事がお役に立ったら
いいね!お願いしまっす
(*´∨`*)
この記事を書いたみぞれしはTwitterをやっています
Follow @xxmiz0rexx