AutoExternalLink

[mootools] 別窓を開くアイコンとhrefの拡張子に応じたアイコンや属性を追加する

2009/07/17 CSS, MooTools No comments , ,

mooExternalLinkクラスがもっさりしすぎてたので書き直しついでに色々追加しました。
完全に別物になったので名前も変更。ver1.2.3にも対応しています。
mooExternalLinkLiteは様子見て配布しようかな。

jQuery版も追々書き換えたい…。

こんなことします。

  • リンクの前にファイルタイプアイコンを追加
  • 別窓で開くアイコンと属性を追加
  • PNG、JPG、GIFへのリンクにQuickBoxのrel属性を追加

上記3つはオン・オフ可。QuickBoxを使用する場合は別途ダウンロードが必要です。
ファイルタイプアイコンはhref末尾のpdfやzip等の拡張子で判別します。
有効な拡張子はドットを除いて2~3文字のものです。オプションで設定してない拡張子にはアイコンは出ません。

拡張子以外にhrefの内容で判別するものは次の通り

  • mailto: →mail
  • https:// →https
  • window.print() →print

矢印で示しているのはアイコン画像の拡張子より前の部分です。
print.pngという画像を用意すればプリンターのアイコンをつけることができます。

ViewDemo »
(さらに…)

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

2009/02/25 jQuery No comments , , , , ,

殴り書きは続く…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タグを全てチェックします。

(さらに…)

[jQuery]hrefのURLがフルパスの時だけ別窓を開く

2008/08/07 jQuery No comments ,

jQuery1.2.6用。別窓開くスクリプトの超簡易サンプル。
aタグを捜査してhrefに書かれたURLがhttpから始まってる場合のみtarget=”_blank”を追加する。

$("a").each(function (i) {
        if ($(this).attr('href').indexOf("http") != -1) {
         $(this).attr('target','_blank');
        }
    });

上のはIEでスルーされたのでwindow.openで分けてみる

$("a").each(function (i) {
        if ($(this).attr('href').indexOf("http") != -1) {
			if(jQuery.browser.msie){
				$(this).attr('onclick','window.open('this.href','status=yes,scrollbars=yes,directories=yes,menubar=yes,resizable=yes,toolbar=yes'); return false;');
			}else{
      		   $(this).attr('target','_blank');
			}
        }
    });

[WP]AutoExternalLinkプラグインをjQuery版にする

2008/07/17 plugin 4 comments , ,

AutoExternalLinkプラグインはprototypeが使われてます。
前回書いた[WP]AutoExternalLinkプラグイン修正は、prototypeを使ったVicuna用の改造方法でしたが、
今回はリクエストにお答えしてjQuery版に変更する方法を解説します。
ついでにwp_enqueue_script()への対応方法も載せてます。

プラグイン作者はinoccoさん、jsソースはFsikiさんが作られたものです。
この記事では改造部分のみ掲載しており、変更後のソースそのものは配布してません。

(さらに…)

[WP]AutoExternalLinkプラグイン修正

2008/06/15 plugin 4 comments , ,

inoccoさんが作成されたリンクに新しいウィンドウを開くアイコンを自動で追加するプラグイン
AutoExternalLinkをVicuna用に修正してみた話。

プラグイン添付のjsファイルはLogJETさんが作成されたそうなんですが、

  1. 表示エリアが見つからなかったときにエラーが出るのを直しておきたい。
  2. クラス名を2つ3つ並べて指定するとアイコンが出ないので、それもなんとかしたい。
  3. 今使ってるVicunaではヘッダにリンクを貼るとアイコンが出るので、hn要素以外のaタグに追加したい。
  4. iG:Syntax Hiliterのソースにはアイコン出ないようにしたい。

そのまま使えなかったので変えてみますた。
修正箇所は次の通りです。

(さらに…)