最近 Javascript を使い始めました。
「手始めに、ひとつ汎用的なコントロールを作ってみようか。(←ライブラリ開発者の習性)」
というわけで、あちこち使いまわせるカレンダを作ってみました。
「手始めに、ひとつ汎用的なコントロールを作ってみようか。(←ライブラリ開発者の習性)」
というわけで、あちこち使いまわせるカレンダを作ってみました。
- calendar.js (Javascript)
- calendar.css (カレンダ用スタイルシート)
このカレンダーをページに埋め込むに方法 (Javascript) は以下の通り:
ですが、カレンダが「ただ表示されるだけ」では利用価値がありません。
ユーザが選択した日付を取得するなどのインタラクティブな処理ができないと困ります。
次のエントリでは、その方法について解説します。
担当: 成田 (しかし、Ajax はバッドノウハウの集大成だと思う。)
<script type="text/javascript"> <!-- //初期化関数 function init(){ //Calendar オブジェクトを作成 var c =new Calendar("my_calendar", "カレンダのテスト", document.body); //位置指定, 表示 c.setPos(512, 128); c.show(); } //初期化関数 (init) をページのロード終了時に実行するよう指定 window.onload =init; //--> </script> |
まずは、Calendar クラスのオブジェクトの生成。
コンストラクタには引数として以下の 3つを指定します。
引数は、x, y 座標 (単位: ピクセル) です。
最後に、show メソッドでカレンダを「表示」状態に設定してください。(初期状態では「非表示」)
これで、あなたのページにもカレンダが表示されるようになったはず。コンストラクタには引数として以下の 3つを指定します。
- カレンダ要素のID (ドキュメント内で一意)
- キャプションテキスト
- 親要素 (殆どの場合 document.body)
引数は、x, y 座標 (単位: ピクセル) です。
最後に、show メソッドでカレンダを「表示」状態に設定してください。(初期状態では「非表示」)
ですが、カレンダが「ただ表示されるだけ」では利用価値がありません。
ユーザが選択した日付を取得するなどのインタラクティブな処理ができないと困ります。
次のエントリでは、その方法について解説します。
担当: 成田 (しかし、Ajax はバッドノウハウの集大成だと思う。)