[jQuery]リンクに新しいウィンドウを開くアイコンを自動で追加する

殴り書きは続く…AutoExternalLinkのjQuery版。mootools版の同タイトル記事とほぼ同じです。
jQueryは馴染みが浅いのでもっさり感漂う残念なソースになってます。
自分がサイト組む時は外部リンクに大抵relかclass属性を付与するんで、relかclass持ちにだけ追加するライト版も書いてみた。
ダウンロードはスクリプトファイル2種と、jQuery版に修正したAutoExternalLinkプラグインファイルのセット。
元ソースからの入れ替えとかは自己責任でお願いします。

wordpressプラグイン本体の改造はこちらの記事で解説していますが、
zipに修正済みのプラグインファイルも突っ込んどいたので上書きでおk。動作デモはこのブログそのものです。

jQueryプラグインなので普通のサイトでも使えると思います。
varは1.2.6以上対応です多分。(1.2.6と1.3.2でしか確認してない)

Header

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.jExternalLink.plugin.js"></script>
<script type="text/javascript">
//<!&#91;CDATA&#91;
$(document).ready(function(){
	$("#main").jExternalLink();
});
//&#93;&#93;>
</script>

上記指定で#main以下にあるaタグを全てチェックします。

Element.jExternalLink({options});

Elementは$(“#main”)みたいな書き方で。クラスやセレクタも使えます。

Optionは次の通り。mootools版と同じです

  • open:
    元openType。”js”にするとwindow.openで開きます。デフォルトは”blank”
  • elements:
    CSSのセレクタで細かい指定が出来ます。デフォルトは”a”
    例:”a[href*=’mailto:’]” →全てのメールリンクタグ
  • iconSrc:
    アイコンのsrc。デフォルトは’external.gif’
  • iconW:
    アイコンの横幅。デフォルトは”12″
  • iconH:
    アイコンの高さ。デフォルトは”11″
  • iconAlt:
    アイコンのalt属性。デフォルトは “”
  • linkTitle:
    別窓リンクのタイトル。デフォルトは”リンクを新しいウインドウで開く”
  • excludeStr:
    ここで指定した文字列がhref内に含まれていた場合は、別窓リンクアイコンを追加しません。
    指定は配列形式で→[“tenderfeel.xsrv.jp”,”http://example.com”]
  • includeClass:
    ここで指定したクラスが含まれていた場合は、アイコンを必ず追加します。デフォルトは”newwin”
  • escapeTag:
    ここで指定したタグが親要素である場合は、アイコンを追加しません。
    指定は配列形式で→[“h2”]

“jExternalLink” をダウンロード WTN-jExternalLink.zip – 604回のダウンロード – 6 kB

簡易版プラグイン jExternalLink Lite

relとかclassとか、aタグに何らかの属性がある場合にのみ別窓アイコン追加する簡易版です。
上のプラグインでは、リンクの子要素が画像だった場合アイコンを追加しませんが、
こちらにはそのアクションは入れてありません。

使い方は上と同じ。

Option

  • open:
    元openType。”js”にするとwindow.openで開きます。デフォルトは”blank”
  • elements:
    CSSのセレクタで細かい指定が出来ます。ここで指定した値の属性を持っているかチェックさせる。
    デフォルトは”a[rel*=externallink]”
  • iconSrc:
    アイコンのsrc。デフォルトは’external.gif’
  • iconW:
    アイコンの横幅。デフォルトは”12″
  • iconH:
    アイコンの高さ。デフォルトは”11″
  • iconAlt:
    アイコンのalt属性。デフォルトは “”
  • linkTitle:
    別窓リンクのタイトル。デフォルトは”リンクを新しいウインドウで開く”

“jExternalLink” をダウンロード WTN-jExternalLink.zip – 604回のダウンロード – 6 kB

updates

  • 2008-3-23 ver1.1 画像があった場合のアイコン挿入部分の条件変更

Leave a Comment.