[go: up one dir, main page]
More Web Proxy on the site http://driver.im/

ウェビメモ

jQuery

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

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

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

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

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

そんなわけで潔く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のセレクタ、わたし正直はじめて使いましたｗ
こんな便利なモノがあったんですね～！勉強になりました！

以上、霙でした！

Ranking