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

[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

HTML:
  1. <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  2. <script type="text/javascript" src="jquery.jExternalLink.plugin.js"></script>
  3. <script type="text/javascript">
  4. //<![CDATA[
  5. $(document).ready(function(){
  6.     $("#main").jExternalLink();
  7. });
  8. //]]>
  9. </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

簡易版プラグイン 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

updates

  • 2008-3-23 ver1.1 画像があった場合のアイコン挿入部分の条件変更
このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加

Comments:0

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://tenderfeel.xsrv.jp/jquery/402/trackback/
Listed below are links to weblogs that reference
[jQuery]リンクに新しいウィンドウを開くアイコンを自動で追加する from WebTecNote

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

最近の投稿
最近の修正
  • そしてこのSQLはわれながらよく書いたと思う 2010-11-15
  • CSVの列っていう方がいいのかな…118項目だった 2010-11-15
  • 楽天のCSVの項目が116個もあった衝撃 2010-11-15
  • オフィスで香水臭振りまくのは迷惑だと知れ 2010-11-15
  • ぐあー フレグランステロやー 2010-11-15
  • More updates...

Powered by Twitter Tools

Tag Cloud
おすすめサーバー・他
メタ情報

Return to page top