STUDIO KINGDOM » javascript http://www.studio-kingdom.com PHPによるWebプログラミングやAdobeソフトによるWEBデザインなどなど Tue, 31 Mar 2009 15:37:13 +0000 http://wordpress.org/?v=2.8.4 ja hourly 1 Yahoo UIに入門してみた http://www.studio-kingdom.com/javascript/410 http://www.studio-kingdom.com/javascript/410#comments Sun, 25 Jan 2009 12:23:30 +0000 admin http://www.studio-kingdom.com/?p=410 最近浅く広い、この手のエントリ多いです。Yahoo UIが何気に優秀という噂を聞きつけて、どうしても試してみたくなったので。
Ajaxのおさらいをしていて、ちょうどYahooUIの項目もあったのでサンプルプログラムを改良して、多少実践向けにして晒してみたくなったという事情もあります。
おさらいに使用した本はこちら。

10日でおぼえるAjax 入門教室
10日でおぼえるAjax 入門教室

posted with amazlet at 09.01.25
漆尾 貴義
翔泳社
売り上げランキング: 120488
Amazon.co.jp で詳細を見る

この本、結構おススメ。IEでAjaxする方法を解説⇒次はFireFoxで⇒各ブラウザ毎に処理を振り分け⇒innterHTMLやCSSの説明⇒prototype.js登場といった感じで、Ajaxに必要なことを基礎から追って順に説明してくれるので分かりやすいです。
Yahoo UI Library リファレンスの[■Calendar]⇒[Calendar]も参考にしてます。
で、カスタマイズしたプログラムはこんな感じ。

image

  • カレンダー表示リンクを押すとカレンダーが表示。
  • 入力欄が空でリンクを押された場合は当月を表示、日付が入力されていたら対象月を表示。
  • カレンダー上で日付をクリックするとyyyy/mm/dd形式で入力欄に日付が入り、カレンダーが閉じる。
  • (入力欄の日付エラーチェックはしてません。アルファベットとか入れるとトンデモカレンダーが表示されます(>_<))

では、実際に作ってみましょう。まずはYahooUIをダウンロードしてきます。
http://developer.yahoo.com/yui/

image

使用するのはbuildフォルダ内のファイル群になります。作成するプログラムと同じフォルダ階層にbuildフォルダを移し、フォルダ名をyuiに変更してください。
肝心のプログラムは、下記の通り。

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html>
<head><title>Yahoo UI カレンダー入力</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="yui/yahoo/yahoo.js"></script>
<script type="text/javascript" src="yui/dom/dom.js"></script>
<script type="text/javascript" src="yui/event/event.js"></script>
<script type="text/javascript" src="yui/calendar/calendar.js"></script>
<script type="text/javascript" src="prototype.js"></script>
<link type="text/css" rel="stylesheet" href="yui/calendar/assets/calendar.css">
<script type="text/javascript" language="javascript">
// <![CDATA[
function onloaded(){
Element.hide("cal1Container");
}

function showCal(arg){
var cal1;

var ary_arg;
var json_arg;
var json_pagedate;
var json_selected;

var tmp_dt;
var tmp_dt_year;
var tmp_dt_month;
var tmp_dt_date;

//YAHOO.widget.Calendarオブジェクトに渡すjson引数値
//josn引数設定例　{ pagedate:"2/2007",selected:"2/10/2007-2/15/2007"}
if(arg){
ary_arg = arg.split("/");	//[0]=年　[1]=月　[2]=日
json_pagedate = ary_arg[1] + "/" + ary_arg[0];
json_selected = ary_arg[1] + "/" + ary_arg[2] + "/" + ary_arg[0];
json_arg = '{ pagedate:"' + json_pagedate + '",selected:"' + json_selected + '"}';
}

//カレンダー描画
if(arg){
cal1 = new YAHOO.widget.Calendar("cal1","cal1Container", eval("("+json_arg+")"));
} else {
cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
}

cal1.selectEvent.subscribe(function(type,args) {
//alert(cal1.getSelectedDates()[0]);
tmp_dt = cal1.getSelectedDates()[0];
tmp_dt_year = tmp_dt.getFullYear();
tmp_dt_month = tmp_dt.getMonth() + 1;
tmp_dt_date = tmp_dt.getDate();
document.form1.set_dt.value = tmp_dt_year + "/" + tmp_dt_month + "/" + tmp_dt_date;
Element.hide("cal1Container");
});
cal1.render();
Element.show("cal1Container");
}
// ]]>
</script>
</head>
<body onload="onloaded()">
<form name="form1">
<input id="set_dt" type="text" value="" size="12" />
<a href="javascript:void(0)" onclick="showCal(document.form1.set_dt.value)">カレンダー表示</a>
<div id="cal1Container"></div>
</form>
</body>
</html>

変数がやたら多くて美しくないですなぁ、即興で作ったのでご勘弁を。
バグ等あったら教えてください。

]]> http://www.studio-kingdom.com/javascript/410/feed 0