portas jam » Blog Archive » script.aculo.us.js で Apple iPhotoのページを真似してみる。

9月

script.aculo.us.js で Apple iPhotoのページを真似してみる。

「WWW WATCH」さんの「JavaScript でタブ切り替え UI を実装する」の記事に触発されて、早速 iPhotoと同様のページをコーディングしてみました。

もともと、Apple のサイトでも script.aculo.us が利用されているのでいい試みかな、と。

script.aculo.us 自体は、prototype.js に依存しています。タブの部分は面倒くさいので、同じ prototype.js に依存しているtabMaker.jsを利用しました。

HTML の <head>内に必要なライブラリを全て読込みましょう。

<link rel="stylesheet" type="text/css" href="tabMaker.css" />　//タブ部分のCSS
<script language="JavaScript" src="prototype.js" type="text/javascript"></script>
<script language="JavaScript" src="scriptaculous.js" type="text/javascript"></script>
<script language="JavaScript" src="tabMaker.js" type="text/javascript"></script>

タブ部分のHTML はこんな感じ。

<ul id="tabIndex">
  <li class="tab" onclick="execute()">Tab1</li>
  <li class="tab" onclick="execute()">Tab2</li>
  <li class="tab" onclick="execute()">Tab3</li>
</ul>

<div id="tabBoxIndex">
  <div id="column1" class="tabBox">コンテンツ1</div>
  <div id="column2" class="tabBox">コンテンツ2</div>
  <div id="column3" class="tabBox">コンテンツ3</div>
</div>

tabMaker.js はクリック時に、選択されたタブと非選択状態のタブとを CSS の class 指定を変更しています。

ですので、scriptaculous.js で用意されたメソッドは、tabmaker.js 内に記述してしまいます。

クリックされると、Effect.Fade で透明度を下げ、afterFinishInternal オプションでエフェクト終了時に今度はFade させそのエフェクトと同時にclass名をopen に変更して、表示内容を切り替えています。

Tab.prototype = {
    initialize: function(name, open) {
        this.name = name;
        this.page = name + 'Box';
        this.open = open;
    },
    styleTab: function() {
        if (this.open)
            this.setStyle('absolute', 'open', 'block');
        else
            this.setStyle('absolute', 'close', 'none');
            this.open = false;
        },
    setStyle: function(position, className, display){
        var page = $(this.page).style;
        var name = $(this.name);
        new Effect.Fade("tabBoxIndex", {
        from:0, // 開始時透明度
        to:0, // 終了時透明度
        delay:0, // 開始までの秒数
        fps:60, // フレームレート
        duration: 0.1, // アニメーションする時間(秒)
        afterFinishInternal: function(effect) {
            new Effect.Fade("tabBoxIndex", {
                from:0.0, // 開始時透明度
                to:1.0, // 終了時透明度
                delay:0, // 開始までの秒数
                fps:60, // フレームレート
                duration: 0.3, // アニメーションする時間(秒)
                beforeStartInternal: function(effect) {
                    page.display = display;
                    page.position = position;
                }
                });
            }
        });
        name.className = className;
    }
}

あとは、CSS でレイアウト、見た目を Apple ぽくして出来上がりです。
（何気にタブメニューの箇所の CSS ではまりました。選択された状態時に背景画像を指定しているのですが、その選択されたタブの上下のタブ間にあるヘアラインを消えるようにするには、ネガティブマージンを利用することで解決できました。）

■サンプルを見る（tabmaker.js + scriptaculous.js）

じつは、僕自身 javascript ばりばりだぜ〜！という訳でもないので、この方法がシンプルかどうか怪しいな〜、なんて思っていたらjQuery UI なる素敵なライブラリが後公開されていました。prototype ベースではありませんが、こちらを利用する方がシンプルに判りやすくできました。

■サンプルをみる（jQuery UI）

ところで、Apple は Mac だけではなく、web ページでもちょっとした効果を使うのが巧いですね。「ギミックつかいまくってるぜ〜」みたいな嫌みが無いのがいいです。

Posted by Tadaki under ,
You can leave a response, or trackback from your own site.