フッター部分にコピーライトの表記をしますが、 年を自動的に更新するJSを書き留めておきます。
<address>Copyright © <script type="text/javascript">
var startYear = 2009;thisDate = new Date();thisYear = thisDate.getFullYear();if(startYear!=thisYear)
{document.write(startYear+"-"+thisYear);}else{document.write(startYear);}</script>
ソメイヨシノ. All Rights Reserved.</address>
<!--コピーライト-->
Javascript/AJAXの最近のブログ記事
という訳で、jQueryを利用した超簡単なタブ切り替えをメモ書きしておきます。
使い方は超簡単。下記のソースを<head>内へ挿入。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("a.btn_act").click(function(){
var connectCont = $("a.btn_act").index(this);
var showCont = connectCont+1;
$('.motion').css({display:'none'});
$('#motion_area'+(showCont)).fadeIn('slow');
$('a.btn_act').removeClass('active');
$(this).addClass('active');
});
});
</script>
<style type="text/css">
.motion {
width: 620px; /* タブ領域の広さ */
display: none;
}
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
タブ毎のコンテンツは<body>内に制作
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<a href="javascript:void(0);" class="btn_act active"><img src="tab1.gif" class="float_left" /></a>
<a href="javascript:void(0);" class="btn_act"><img src="tab2.gif" class="float_left" /></a>
<a href="javascript:void(0);" class="btn_act"><img src="tab3.gif" class="float_left" /></a>
<div class="clear"></div>
<div id="motion_area1" class="motion">
タブ1の内容
</div><!-- タブ１のコンテンツ -->
<div id="motion_area2" class="motion">
タブ2の内容
</div><!-- タブ１のコンテンツ -->
<div id="motion_area3" class="motion">
タブ3の内容
</div><!-- タブ１のコンテンツ -->
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
たった、これだけであります。
という事である案件で、Lightbox風のFancyboxを利用したのですが、
またもやIE6でつまづく・・。今回はしかも問題の解消断念。というより、ソースを追うより、別のIE6対応ライブラリを探して作り直した方が、早いと判断・・別のライブラリを使う事にしました。
IE6がある事で、検証・不具合対応に割く時間が増え、どれだけWeb制作業者が損害を被っていることか。
無視できるシェアなら、制作物に対し、早々とIE6サポート対象外を謳うところですが・・・。
昨日、GoogleAnalyticsで調べたIE6使用状況（シェア）は21％という事で、まだまだ多い・・・多すぎるorz
とあるクライアント様の案件で、イメージタブ切り替えとアコーディオンメニューの要望があり、
jquery他、よいライブラリは無いものかと物色しつつも、類似のものはありつつも適当なものが無く・・。
よいサンプルサイトをいくつか物色し、scriptを覗かせてもらうと、どれも独自で組んだもののようで、既存のライブラリのカスタマイズではない様子。カスタマイズではセッティング部分のみの変更でその他のロジックの部分はスルーしてきましたが、今回は辛抱強く追ってみました。
これは、なるほど・・新発見多数。ID,Classの操作関連を覚えるだけで、表現の幅が格段に広がるのだと再認識しました。と同時に今対応しているクライアント様のサイトはよいものが出来そうです。
昔から日常の流れを延々と繰り返したい自分にとって、学生時代の長期休暇や正月など、
強制的に休まされる感のあるイベントで、あまりテンションのあがるイベントではなかった。
・・・日常からあまり根をつめないからか。
という事で正月っぽい事は一切せずに、残務などをこなしている訳です。
今日は、空いた時間に、jQueryに代表される動的ライブラリを評価。
とことんFlash覚えないと今後厳しいかなと思っていた矢先、javascriptでここまでやれるのかという
くらい便利なライブラリがたくさんあるもんで。
スクリプトの中で、使用する画像などのパスがきってあるらしく、サンプルなどの
フォルダ構成をいじくると動かなくなる事が多く、少しとまどいましたが、いちいち
スクリプトの流れを追うほどのものでもないなと、そこはスルー。
一通り評価を終えたところで、今日は終了。
ユーザビリティの向上に役立ちそうなのはツリービューとソートテーブルとカレンダーくらいかな。
あとは装飾の域を出ない感じかな。
まぁその装飾にこだわらないといけないのがこの仕事なのだが。
バリデータはサーバサイドよりも、クライアントサイドで完結していた方が、
ユーザビリティ的にも、開発者にとってもメリットが大きいと感じる（サーバ側でも対策するが）。
と言うことでバリデータのライブラリを探して、一番よさげなものに辿り着く。
「jQuery Inline Form Validation Engine」
これは、テキストフィールドだけではなく、radio,checkbox項目のチェックや
他の項目との比較、その他もろもろ・・・ほとんどすべてのチェック方法を指定可能。
該当項目へのツールチップ表示なども完璧。
ドキュメントは英語。
使い方：
ヘッダに下記を指定
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript"></script>
フォームの項目にチェック方法指示
<input class="validate[required,custom[onlyLetter],length[0,100]]" name="firstname" type="text" />
チェック方法
optional: Special: Only validate when the field is not empty
required: Field is required
length[0,100] : Between x and x characters allowed
minCheckbox[7] : Set the maximum checkbox autorized for a group
confirm[fieldID] : Match the other field (ie:confirm password)
telephone : Match telephone regEx rule.
email : Match email regEx rule.
onlyNumber : Numbers only
noSpecialCaracters : No special characters allowed
onlyLetter : Letters only
date : Invalid date, must be in YYYY-MM-DD format
Profile
Name：someiyoshino
Home:Suginami Tokyo
HP1:www.someiyoshino.biz
HP2:www.seoby.biz
Blog:www.someiyoshino.biz/blog
Mail:info@someiyoshino.biz
