ページを開いたときにメッセージを表示するjQueryプラグイン
ウェブページを開いたときに注意メッセージを表示するjQueryプラグイン「jquery.opening.js」を作りました。
ページを開いたときにメッセージが表示されます。メッセージは変更できます。
「今後はこのメッセージを表示しない。」にチェックすると次回からは表示されません。クッキーを利用しています。
使い方
- プラグイン(jquery.opening.js)をダウンロードします。
- 別途、Downloads · carhartl/jquery-cookie · GitHubでjquery.cookie.jsをダウンロードします。※jQueryでcookieを使う | You Look Too Cool
- HTMLを書きます。後述のサンプルを参考にしてください。
- これらを同じフォルダに保存します。
$(document).ready(function(){
$("body").opening("ここにメッセージをセットします。");
});
$("body").opening("ここにメッセージをセットします。");
});
の部分のメッセージを書き換えます。
ページを開くとメッセージが表示されます。
サンプル
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sample - jquery.opening.js</title>
</head>
<body>
<h1>sample - jquery.opening.js</h1>
<p>本文です。</p>
<input type="button" id="delcookie" value="クッキーをクリア">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="jquery.opening.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
$("body").opening("ここにメッセージをセットします。");
});
//-->
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sample - jquery.opening.js</title>
</head>
<body>
<h1>sample - jquery.opening.js</h1>
<p>本文です。</p>
<input type="button" id="delcookie" value="クッキーをクリア">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="jquery.opening.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
$("body").opening("ここにメッセージをセットします。");
});
//-->
</script>
</body>
</html>
実験用に「クッキーをクリア」というボタンを付けておきました。クリックすると該当のクッキーがクリアされます。不要ならば削除してください。
またjquery.cookie.jsはローカル環境では動きません。サーバにアップする必要があります。
[ 2013年2月6日 | カテゴリー: JavaScript | タグ: jQuery , プラグイン ]
« 秀丸エディタでSublimeText2のショートカットを使う | 日付をカウントするユーザー定義関数「COUNTDATE」 »
コメントを残す