アンカーの種類別アイコンをjQueryでやってみた。

JavaScript

2007.10.01

このエントリーではWEB デザイナーへの道　～第 14 回～にインスパイアされて実験をしました。

CSS3のセレクタでできるのなら、jQueryでできるんじゃないか？と思ったのがきっかけ。

結果→大成功！(今回のセレクタはできましたが、現時点ではCSS3でもサポートしていないセレクタもあります。参考：API/1.1.2/DOM/Traversing/Selectors - jQuery JavaScript Library)ソースコードは以下の通り。

anchor_icon.html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>アンカーの種類別アイコン implemented by jQuery</title>
<script src="jquery-1.2.1.pack.js"></script>
<script src="anchor_icon.js"></script>
</head>
<body>
<ul>
<li><a href="mailto:example@example.com">example@example.com</a></li>
<li><a href="example.pdf">example.pdf</a></li>
<li><a href="example.zip">example.zip</a></li>
<li><a href="example.txt">example.txt</a></li>
</ul>
</body>
</html>

anchor_icon.js

jQuery.noConflict();
var iconMap = {
    'a[href^="mailto:"]': './img/mail_ico.png',
    'a[href$=".pdf"]': './img/pdf_ico.png',
    'a[href$=".zip"]': './img/zip_ico.png',
    'a[href$=".txt"]': './img/txt_ico.png'
    };
jQuery(function(){
    jQuery.each(iconMap, function(selector, icon){
        jQuery(selector).css({
            'background': 'transparent '+
                          'url(\''+icon+'\') '+
                          'center left no-repeat',
            'padding-left': '15px'
        });
    });
});

アンカーのアイコンテストで、実行結果をご覧ください。

Firefox2.0, IE6, Opera9で動作しました。jQueryすごい！jquery.each()も初めて使ってみましたが、便利ですね。