記事一覧

mootoolsで別窓表示

prototype.jsを利用した別窓表示はすでに解説されているのですが、
mootoolsを使った別窓表示は
英語で紹介されているものぐらいしか見当たらなかったので解説。
XHTML1.1 SE でなんとtarget復活?との話もありますが、まだ先の話になりそう。

【出来ること】
●target="_blank"の代わりにrel="popup"を使うことで
 リンクを別窓を開くことができる。XHTML1.0対策。
●開くウィンドウのサイズを決めることができる。
 (拍手やアンケートフォームなどに便利)

【参考サイト】
・moopop: “unobtrusive” popups with mootools | a pint of javascript (and general web stuff)

続き

moopop.js 設置方法

1. mootools download builder からmootools.jsをダウンロード。
  「Core」「Element.Selectors」「Window.DomReady」にチェックを入れ、
  最下部のDOWNLOADボタンを押してください。

2.上記の参考サイト下部 - Download moopop with documentationから
  moopop.jsをダウンロード。

3.header.htmlの<head>~</head>内に次を記入。

<script type="text/javascript" src="${INFO_URL}skin/mootools.js"></script>
<script type="text/javascript" src="${INFO_URL}skin/moopop.js"></script>

4.別窓リンクにしたい所に、rel="popup"を追加。

<a href="http://www.google.com" rel="popup[600,400]">popup google at 600x400</a>

と記入すると、ウィンドウサイズが600x400で固定されてポップアップされます。

おまけ: 自分で別窓を開くか選べるJavaScript

普通のリンクに別窓表示用アイコンが自動でくっつきます。
強制的に別窓を開くのが好みでない方はこちらのほうがいいかも。
(mootoolsは不要)

【参考サイト】
・新しいウインドウを開くべき? - LogJET

jet.js 設置方法

1.上記サイト下部からjet.jsをダウンロード。
 「diarypro/skin」フォルダの中にjet.jsを入れる。

2.「diarpro/skin」フォルダの中に、「image」フォルダを作り
  別窓リンク用のアイコン(new_win.gif)を入れる。

3.header.htmlの<head>~</head>内に次のように記入。

<script type="text/javascript" src="${INFO_URL}skin/jet.js"></script>

画像をいれるフォルダや画像の名前を変えたい場合、
jet.jsをエディタで開いた24行目あたり

anchorImage.src = '/image/new_win.gif';

を書き換えてください。

TRACKBACK

未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/01/23(金)20時16分 受信

COMMENT

■未承認 ... 2014/07/15(火) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2014/11/19(水) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/01/25(日) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/01/29(木) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/02/10(火) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/03/06(金) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/03/13(金) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/04/08(水) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/06/18(木) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/06/18(木) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/06/19(金) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2016/06/13(月) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2017/03/14(火) edit・delete

管理者に承認されるまで内容は表示されません。