jsライブラリを使用してiPhone用のページを作ってみました。

せっかくiPhoneを買ったので、なにかしら勉強したいってことでiPhone用のページを最近流行りのjsなライブラリを使用して作ってみました。
iPhoneからアクセスするとそれっぽく表示されます。
http://moeten.info/maidcafe/?m=iphone&type=test3

iPhoneはJavaScriptが基本となるので、積極的にjsライブラリを使用すると、ＲＩＡ風なインターフェイスが作成できます。
今回作成する上でかなり役に立ったライブラリ

• jQuery
• YUI

です。
jQueryで便利だった関数

• prepend。特定のコンテナにオブジェを追加できる。画像ローディングで使用。
• load。特定のコンテナにロードしたオブジェ追加できる。各ページの読み込みで使用。

YUI

• animation。アニメーションライブラリ。読み込み完了時にアニメーション。
• tab。タブナビゲーター。内容もAjaxしてくれる。

まずはライブラリのインクルード。YUIは必要なライブラリだけをインクルードするので、注意。

  <!--jQuery-->
  <script type="text/javascript" src="/mylib/js/test/jquery_1_2_6/jquery-1.2.6.pack.js"></script>
  <!--YUI-->
  <link rel="stylesheet" type="text/css" href="/mylib/js/test/yui_2_6_0/build/tabview/assets/skins/sam/tabview.css" />
  <link rel="stylesheet" type="text/css" href="/mylib/js/test/yui_2_6_0/build/fonts/fonts-min.css" />
  <script type="text/javascript" src="/mylib/js/test/yui_2_6_0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
  <script type="text/javascript" src="/mylib/js/test/yui_2_6_0/build/connection/connection-min.js"></script>
  <script type="text/javascript" src="/mylib/js/test/yui_2_6_0/build/element/element-beta-min.js"></script>
  <script type="text/javascript" src="/mylib/js/test/yui_2_6_0/build/tabview/tabview-min.js"></script>
  <script type="text/javascript" src="/mylib/js/test/yui_2_6_0/build/animation/animation-min.js"></script>

次はメインとなるjs。デバッグはalertやFirefoxのFirebugですると便利です。

<script type="text/javascript">
function init(){
  myAnime("tid");
}
function myAnime(str){
    $("#myLoading").remove();
    if( str=="cid" ){
        widthTo=200;
    }else if( str=="sid" ){
        widthTo=280;
    }else{
        widthTo=150;
    }
    var attributes = { width: { from: 20, to: widthTo }};
    var anim = new YAHOO.util.Anim( str , attributes , 1.2 , YAHOO.util.Easing.backOut );
    anim.animate();
}
function onTidSelected(){
    //alert(tid.value);
    $("#test3").prepend("<div id=myLoading><img src=/image/top/iphone/ajax-loader2.gif></div>");
    $("#test1").load("./?m=iphone&type=test3&ajax=cid&tid=" + tid.value , function(){myAnime("cid");});
};
function onCidSelected(){
    //   alert(cid.value);
    $("#test3").prepend("<div id=myLoading><img src=/image/top/iphone/ajax-loader2.gif></div>");
    $("#test2").load("./?m=iphone&type=test3&ajax=sid&tid=" + tid.value + "&cid=" + cid.value , function(){myAnime("sid");});
};
function onSidSelected(){
    //   alert(sid.value);
    $("#test3").prepend("<div id=myLoading><img src=/image/top/iphone/ajax-loader2.gif></div>");
    $("#test3").load("./?m=iphone&type=test3&sid=" + sid.value );
};
</script>

肝となる部分がjQueryの関数で.load関数。

$("好きなコンテナ").load("欲しいファイル",完了時実行関数);

完了時実行関数にアニメーション関数を入れるとそれっぽくなります。
参考リンク
jQuery リファレンス
jQuery
Yahoo! UI Library のYUI ライブラリサンプル （Yahoo! UI Library）
YUI Library: Index of Official Examples