jQuery

[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');
			}
        }
    });

[jQuery]イメージマップでTooltip表示するサンプル

2008/08/04 jQuery No comments

「イメージマップのホットスポットにマウスオーバーしたら説明表示出るように出来ない?」って言われて書いたやつ。
非表示にしてるブロック要素を表示してるだけなので、画像とかテキストとか割とフリーダムに出せる。

jQuery1.2.6用。

jQueryのマウスイベントには以下プロパティ提供されていて

  • pageX/Y : ページの左上を0としたマウスポインタの位置
  • clientX/Y : ブラウザのドキュメント表示領域を0としたマウスポインタの位置

特別なことしなくてもイベントが発生した時のマウスポインタの位置を取得することが出来る。
(さらに…)

[jQuery]サムネイルクリックで画像変更(+effect)

2008/08/02 jQuery 6 comments , ,

前にmootools1.2で作ったのと似たものをjQueryでも書いたので晒します。
このスクリプトは画像切り替えだけです。

動作にはjQuery1.2.6が必要です。

(さらに…)