mooExternalLinkクラスがもっさりしすぎてたので書き直しついでに色々追加しました。
完全に別物になったので名前も変更。ver1.2.3にも対応しています。
mooExternalLinkLiteは様子見て配布しようかな。
jQuery版も追々書き換えたい…。
こんなことします。
- リンクの前にファイルタイプアイコンを追加
- 別窓で開くアイコンと属性を追加
- PNG、JPG、GIFへのリンクにQuickBoxのrel属性を追加
上記３つはオン・オフ可。QuickBoxを使用する場合は別途ダウンロードが必要です。
ファイルタイプアイコンはhref末尾のpdfやzip等の拡張子で判別します。
有効な拡張子はドットを除いて２～３文字のものです。オプションで設定してない拡張子にはアイコンは出ません。
拡張子以外にhrefの内容で判別するものは次の通り
- mailto: →mail
- https:// →https
- window.print() →print
矢印で示しているのはアイコン画像の拡張子より前の部分です。
print.pngという画像を用意すればプリンターのアイコンをつけることができます。
除外・追加用のクラス
mooExternalLinkで使用していたincludeClassオプションは維持しました（addExtIconClassに変わりました）
- exiAdd ― 新しいウィンドウで開くアイコンを追加（オプションで変更可）
- expAdd ― 新しいウィンドウで開くイベントを追加
- exiSkip ― 新しいウィンドウで開くアイコンを追加しない
- icoSkip ― ファイルタイプアイコンを追加しない
- icoAdd-xxx ― ファイルタイプアイコンを追加する（ハイフンの後に拡張子をつける）
domready
window.addEvent('domready', function(){
new wtnLinkIcons();
});
上記指定でbody以下にあるaタグを全てチェックします。
new wtnLinkIcons([{options}]);
Optionは次の通り。
- areaID: “” [string]
アンカーを拾う要素のID。指定しない場合はbody内全てが対象になる - ExternalLink: true [true|false]
別窓を開く機能を使うならtrue。falseにするとアイコン・属性を追加しなくなる。 - linkTitle: “リンクを新しいウインドウで開く” [string]
新しいウィンドウで開くアイコンに貼るリンクのタイトル - addExtIconClass: “exiAdd” [string]
新しいウィンドウで開くアイコンを追加するためのクラス名 - open:“js”
ウィンドウを開く方法。jsはaddEvent(“click”)、blankはtarget=”_blank” - excludeStr:[] [array]
ここで指定した文字列がhref内に含まれていた場合は、別窓リンクアイコンを追加しません。
指定は配列形式で→[“tenderfeel.xsrv.jp”,”http://example.com”] - FiletypeIcon: true [true|false]
ファイルタイプのアイコンを表示するかどう。true=する false=しない - ImagetypeIcon: false [true|false]
PNG,GIF,JPGの画像へのリンクにもアイコンを追加するならtrue。
ただし、trueにした場合は文字リンクにだけアイコンを表示します。 - media:[“pdf”,”doc”,”zip”,”xls”,”mov”,”mp3″,”psd”,”swf”,”txt”,”wmv”,”.ai”,”exe”,”ppt”,”mpg”,”flv”] [array]
ファイルタイプのアイコンを表示する拡張子。ここに無いものは表示しません。
設定したファイルアイコンが必要になり、アイコンの名前はpsd.gifなど拡張子と同じものになります。 - iconType: “png” [string]
ファイルタイプアイコンの拡張子。ファイルごとに違う拡張子の設定は出来ない。 - iconDir: “images/filetype/” [string]
ファイルタイプアイコンのディレクトリ。最後はスラッシュで終わること。 - iconW: 16 [num]
アイコンの横幅。 - iconH: 16 [num]
アイコンの高さ。 - QuickBox: false [true|false]
画像ファイルへのリンクにQuickBox用のrel属性を追加するかどうか。
“wtnExternalLink” をダウンロード
wtnexternallink_v12.zip – 1370 回のダウンロード – 4.37 KBzipにはファイルタイプアイコンは含まれていません。
簡易版プラグイン mooExternalLink
relとかclassとか、aタグに何らかの属性がある場合にのみ別窓アイコン追加する簡易版です。
上のプラグインでは、リンクの子要素が画像だった場合アイコンを追加しませんが、
こちらにはそのアクションは入れてありません。
mootoolsのセレクタ指定で[rel=externallink]とすると、複数rel属性を設定しているものがスルーされてしまうので
オプションincludeRelで別に指定するようにしてあります。
Option
- open:
元openType。”js”にするとwindow.openで開きます。デフォルトは”blank” - elements:
もしmootoolsのcoreにSelectorsが含まれていたら、CSSのセレクタで細かい指定が出来ます。
例：’a[href^=mailto:]’ →全てのメールリンクタグ
詳しくはドキュメントを見てください。デフォルトは”a.newwin” - iconSrc:
アイコンのsrc。デフォルトは’external.gif’ - iconW:
アイコンの横幅。デフォルトは”12″ - iconH:
アイコンの高さ。デフォルトは”11″ - iconAlt:
アイコンのalt属性。デフォルトは “” - linkTitle:
別窓リンクのタイトル。デフォルトは”リンクを新しいウインドウで開く” - includeRel:
ここで指定したrel属性が含まれている場合はアイコンを追加します。デフォルトは”externallink”