Ajax,Javascript、ユーザーの行動を視覚的＆システム的に補助するスクリプトサンプル設置方法
入力補助
calendar.js,mootools.js
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>カレンダー入力</title>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="calendar.rc4.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
myCal1 = new Calendar({ date1: 'Y/m/d' }, { direction: 1, tweak: {x: 6, y: 0} });
});
</script>
<style>
/* Calendar: a Javascript class for Mootools that adds accessible and unobtrusive date pickers to your form elements <http://electricprism.com/aeron/calendar> */
/* Default CSS for Calendar (navigation: 1), Copyright (c) 2007 Aeron Glemann <http://electricprism.com/aeron> */
body{margin:20px; font-size:12px;}
form{height:200px;}
.hidden {
opacity: 0;
position: absolute;
}
.visible {
opacity: 1;
}
input.calendar,
select.calendar {
width: 99px;
}
button.calendar {
background: url(calendar-icon.gif);
border: 0;
cursor: pointer;
height: 20px;
margin-right: 6px;
background-color:#000;
width: 20px;
}
button.calendar:hover,
button.calendar.active {
background-position: 0 20px;
}
div.calendar {
background: url(calendar.png) no-repeat;
height: 195px;
padding: 0 6px;
text-align: center;
width: 147px;
}
div.calendar * {
margin: 0;
padding: 0;
}
div.calendar div {
background: none !important;
cursor: move;
height: 185px;
overflow: hidden;
padding-top: 10px;
position: relative;
width: 147px;
}
div.calendar caption {
color: #333;
font: normal 12px/16px Arial, Helvetica, sans-serif;
padding-top: 6px;
text-align: center;
width: 100%;
}
div.calendar caption a {
cursor: pointer;
display: block;
height: 12px;
overflow: hidden;
position: absolute;
text-indent: -100px;
top: 17px;
width: 11px;
}
div.calendar caption a.prev {
background-image: url(calendar-prev.gif);
left: 0;
}
div.calendar caption a.next {
background-image: url(calendar-next.gif);
right: 0;
}
div.calendar caption a:hover {
background-position: 0 12px;
}
div.calendar caption span {
height: 25px;
position: relative;
text-align: center;
}
div.calendar caption span.month {
padding-right: 8px;
}
div.calendar caption span.month:after {
content: ',';
}
div.calendar table {
background: #FFF;
border: 0;
border-collapse: collapse;
border-spacing: 0;
cursor: default;
margin: 0 auto;
overflow: hidden;
width: 147px;
}
div.calendar td,
div.calendar th {
border: 0;
color: #FF9900;
font: normal 12px Arial, Helvetica, sans-serif;
height: 21px;
text-align: center;
width: 21px;
}
div.calendar td {
color: #FFF;
background-color:#F9F9F9;
font-size: 11px;
}
div.calendar td.invalid {
color: #999;
}
div.calendar td.today {
font-weight:bold;
}
div.calendar td.valid {
background: url(calendar-valid.gif);
color:#FF9900;
cursor: pointer;
}
div.calendar td.active,
div.calendar td.hover {
color: #FFF;
background-color:#FF9900;
cursor: pointer;
}
</style>
</head>
<body>
<form action="/" class="long">
<label>予約希望日</label>
<input id="date1" name="date1" type="text" />
</form>
</body>
</html>
入力フォームで日付を入力するのは意外とめんどくさいです。
そんな時に役に立つのが、このcalendar.js。
入力項目の隣に、カレンダーを表示しクリックすることで日付を入力できるようになります。
実装には、mootoolsと、オリジナルの画像が必要となります。
製作元のサイトへ行き、calendar.rc4.jsとmootools.jsをダウンロードします。
calendar.jsでも大丈夫ですが、月を日本語にする場合を想定してrc4の方を使用します。
基本となるスクリプトを読み込ませます。
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="calendar.rc4.js"></script>
次にトリガーとなる記述をします。
<script type="text/javascript">
window.addEvent('domready', function() {
myCal1 = new Calendar({ date1: 'Y/m/d' }, { direction: 1, tweak: {x: 6, y: 0} });
});
</script>
myCal1のdate1というのが、後で設定する日付を入力するフォームに当てるID名となります。
次のY/m/dはデータの順番です。Yは西暦、mは月、dは日です。
間のスラッシュは任意で変更可能ですが、日本語を使う場合は文字コードに注意してください。
これでヘッダーの設定が終了します。
日付データを入力するinputの設置は簡単です。
<input id="date1" name="date1" type="text" />
このように、先ほどヘッダーで定義したID、date1を与えるだけで完了します。
基本的にはこれで完了しますが、製作元のサイトでは、画像やCSSをまとめてダウンロードできません。
なので、自分でセッティングする必要があります。
<form action="">
<label for="date1">Date</label>
<input class="calendar" readonly="readonly" id="date1" name="date1" type="text">
<button class="calendar" type="button"></button>
</form>
日付入力のタグはこのような形で表示されます。
このbuttonというところに、カレンダーが背景画像として表示されるわけです。
次はカレンダーのソースですが、以下のようになっています。
<div class="calendar march" style="left: 34px; visibility: hidden; opacity: 0; position: absolute; top: 30px; z-index: 1000; display: none;">
<div>
<table><caption><span class="month">March</span><span class="year">2009</span><a class="next">></a></caption>
<thead>
<tr>
<th title="Sunday">S</th><th title="Monday">M</th><th title="Tuesday">T</th><th title="Wednesday">W</th><th title="Thursday">T</th><th title="Friday">F</th><th title="Saturday">S</th>
</tr>
</thead>
<tbody>
<tr>
<td class="invalid">1</td>
<td class="invalid today">15</td>
<td title="" class="valid">19</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
thead内に月やら年、それからネクストボタン等が配置されています。
次にtbody内に日にちが表示されます。
上記では４つしかありませんが、それは説明上省略している為です。
tdに設定されているクラスの説明は以下の通りです。
invalid … 過去
today … 今日
valid … 未来
クラス無し … 来月の日にち
あとはサンプルのCSSを参考に独自のカレンダーを実装できると思います。
月の表示を日本語にしたい場合は、jsファイルの先頭当りに該当する箇所があるのでそこを変更します。
フォームというのは、Webサイトにおいて最終的に誘導するセクションとなる場合が多く、フォーム離脱率、カート離脱率といった言葉もあるぐらいに重要視されています。
ユーザーにとって、コンテンツというのは閲覧するものであり、フォームというのは作業を行わなければならないページですので、 意識が続かず脱落する場合が多いと思います。
Webサイト設計者にとって、そのユーザーの意識を継続させる為の障害は出来るだけ取り除きたいものです。
そんな時に役立つスクリプトの一つですかね、これは。
SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。
画像表示
コンテンツ表示
ナビゲーション
ユーザー補助
その他
