実行結果
設置サンプルのソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.leaveNotice.js"></script>
<script type="text/javascript">
$(function(){
$('a[target=_blank]').leaveNotice({siteName:'PHP & JavaScript Room'});
//Initiation for example 1
$('a.ex1').leaveNotice();
//Initiation for example 1
$('a.ex2').leaveNotice({
siteName:"PHP & JavaScript Room"
});
//Initiation for example 1
$('a.ex3').leaveNotice({
siteName:"PHP & JavaScript Room",
exitMessage:"<h1> {SITENAME}への訪問ありがとう!</h1><p>またお立ち寄りくださいませー!!</p>"
});
//Initiation for example 1
$('a.ex4').leaveNotice({
siteName:"PHP & JavaScript Room",
exitMessage:"<h3>{SITENAME}への訪問ありがとう!</h3><p>また遊びに来てねー!!</p>",
preLinkMessage:"<hr/><p>Have fun at:<br/><strong>{URL}</strong></p><hr/>",
timeOut:6000 /* 6秒後に遷移 */
});
//Initiation for example 1
$('a.ex5').leaveNotice({
siteName:"PHP & JavaScript Room",
exitMessage:"<h3> {SITENAME}への訪問ありがとうございました!!</h3><p>また遊びにきてくださいねー(・ωー).oO★</p>",
preLinkMessage:"<hr/><p>Have fun at:<br/><strong>{URL}</strong></p><hr/>",
overlayId:"custom-blackout",
messageBoxId:"custom-messageBox",
messageBoxHolder:"custom-messageHolder",
overlayAlpha:0.6
});
});
</script>
<!-- CSS -->
<style type="text/css">
/* The style for the blackout div that appears when the exit dialog is shown. */
#ln-blackout {position:fixed; top:0; left:0; width:100%; height:100%; background-color:#000;}
/* This style is for a container that holds the message dialog box. It has been added primarily to help with positioning. I know some people would complain about this, but it seems more efficient this way even it is isn't semanitc. */
#ln-messageHolder {position:fixed; top:150px; left:0; width:100%;}
/* This style is for the div that holds the actual exit dialog. */
#ln-messageBox {width:460px; margin:0 auto; min-height:200px; background-color:#fff; border:10px solid #e6e6e6; -moz-box-shadow:0 0 20px 10px #666; -webkit-box-shadow:0 0 20px #666; text-align:center; padding:20px;}
/* This style is applied to the link that closes the dialog. */
a#ln-cancelLink {background-color:#e6e6e6; font-weight:bold; padding:5px; color:#666; text-decoration:none; text-transform:uppercase; font-size:0.8em;}
a#ln-cancelLink:hover {background-color:#666; color:#e6e6e6;}
/* This style is for the box that holds the section that says where the user is being directed to. */
.setoff {background-color:#f2f2f2; padding:5px; margin:10px 0 20px 0;}
/* 例5 */
#custom-blackout {position:fixed; top:0; left:0; width:100%; height:100%; background-color:#ff6699;}
#custom-messageHolder {position:fixed; top:200px; left:0; width:100%;}
#custom-messageBox {width:400px; margin:0 auto; padding:120px 50px 20px 50px; background:#333 url(/content/img/ajax/custom-msg-box-bg.png) no-repeat top center; color:#fff; text-align:center; border:5px solid #ff6699; -moz-border-radius:15px; -webkit-border-radius:15px;}
#custom-messageBox * {color:#fff;}
#custom-messageBox hr {border-color:#666;}
#custom-messageBox a#ln-cancelLink {background-color:#666; color:#333;}
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1>設置サンプル</h1>
<p>参照: <a href='http://rewdy.com/tools/leavenotice-jquery-plugin'>LeaveNotice jQuery Plugin</a></p>
<!-- CODE -->
<h2>例1:デフォルト(オプションなし)</h2>
<p><a href="http://www.google.co.jp/" class="ex1">リンク</a></p>
<h3>例2:標準<span>(サイト名設定)</span></h3>
<p><a href="http://www.google.co.jp/" class="ex2">リンク</a></p>
<h3>例3:さよならメッセージをカスタマイズ</h3>
<p><a href="http://www.google.co.jp/" class="ex3">リンク</a></p>
<h3>例4:さよならメッセージとプレリンクメッセージをカスタマイズ</h3>
<p><a href="http://www.google.co.jp/" class="ex4">リンク</a></p>
<h3>例5:通知ダイアログのレイアウトをカスタマイズ</span></h3>
<p><a href="http://www.google.co.jp/" class="ex5">リンク</a></p>
<!-- / CODE -->
</div>
</body>
</html>