今にも大雨がきそうです。 こんにちは、syantienです。
今日はWeb creators (ウェブクリエイターズ) 2010年 01月号 [雑誌]
のページ39にある、"浮かび上がるボックスにちょっとした情報表示する"にトライしてみます。
ウェブフォーム上でデータを更新した際に、"データが更新されました"みたいにちょっとしたポップアップっぽいのを表示できるといいですね。またはTwitterの更新をライブで表示するなども結構かっこいいかもしれません。
プラグインに使用されるライブラリーは
ステップ1の前にまずここにあるライブラリーをダウンロードしてアクセスしやすい場所に保存します。
ステップ1. まずライブラリーとプラグインが参照できるように以下のように
の中に書きます。
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="../../jscript/jquery-1.3.2.js" type="text/javascript"></script>
<script src="jquery.jgrowl_minimized.js" type="text/javascript"></script>
<link href="jquery.jgrowl.css" rel="stylesheet" type="text/css" />
今回はシンプルにただボタンを押すと、"ボタンを押しました"という意味のないメッセージを表示するようにします。
本に書いてあるように次はさっそくライブラリーを起動します。
<script type="text/javascript">
<!--
$(function(){
$.jGrowl("Hello, this is test for jGrowl");
});
//->
</script>
実際に動いているもの見る場合はこちらのページを見てください。
http://asp.syantien.com/samples/jGrowl1/Default.aspx
次回はさらにカスタマイズしたものを表示してみましょう。
参照した本