jQuery tools ホーム·ページの設定

このドキュメントは、jQuery Tools ホームページ がどのように行われたか説明します。このドキュメントを読んでいる間は、別ブラウザのウィンドウ またはタブでデモのスタンドアロン版を開いておくことをお勧めします。

HTML コード

このデモでは、全体に対する1つのルート要素 div#scroll を持っており、 それはまた、スクロールのルート要素としても機能します。 スクロールの設定は、前のデモと同じ原則に従いますが、 今回は、2つを追加します:

1. ページがロードされたときに、表示される空のスクロール項目
2. ページがロードされたときに、空のスクロール項目の上に表示される、最初の "intro page"
3. スクロールナビゲータ（項目の下部にある）もまた、最初の "空" アイテムの項目を持っていますが、 クリックできないように見えなくしてあります。

<!-- 全体のルート要素 -->
<div id="scroll">
 
  <!-- スクロール項目 -->
  <div id="tools">
 
    <!-- 空の項目 -->
    <div class="tool"> </div>
 
    <!-- 項目 #1: タブ -->
    <div class="tool" style="background-image:url(tabs.jpg)">
      ... コンテンツ ...
    </div>
 
    <!-- .. 残りの項目 .. -->
 
    <!-- intro "ページ"  -->
    <div id="intro" class="tool" style="background:url(tools.jpg)">
      ... コンテンツ ...
    </div>
 
  </div>
 
  <!-- サムネイル -->
  <div id="thumbs" class="t">
 
    <!-- intro ページナビゲータボタン -->
    <a id="t0" class="active"></a>
 
    <!-- スクロールナビゲータのルート要素 -->
    <div class="navi">
 
      <!-- 最初の空 "ページ" のナビゲータ項目 -->
      <a style="display:none"></a>
 
      <!-- スクロール項目の残りのナビゲータ項目 -->
      <a id="t1"></a>
      <a id="t2"></a>
      <a id="t3"></a>
      <a id="t4"></a>
      <a id="t5"></a>
      <a id="t6"></a>
    </div>
 
  </div>
 
</div>

CSS コード

全てのjQueryツールの設定のように、CSSが最も難しい部分です。 ここでは、この詳細にそれ程深く取扱う訳ではありません。 いつものように、 最小限の設定における スクロール要素に関する同じ原則に従います。 ナビゲータ項目は、この1つの背景画像 を使用して、CSSスプライト技術により行われています。 各サムネイルに、それぞれ異なる背景位置を定義し、項目をクリックするか、マウスをのせるか、 または、それがアクティブなる時には、位置が変更されます。 ここに、最初のサムネイルのCSS設定があります。

  #t0.active { background-position:-21px 0 !important; }
  #t0:hover  { background-position:-21px -180px; }
  #t0:active { background-position:-21px -270px; }

JavaScript コード

デモのロジックは、最初のページが特別なもので、スクロール項目の外にあることです。 そのため、特別なロジックを使います。スクロール自身は通常通りにインストールされます。

// initialize scrollable with navigator plugin
$("#scroll").scrollable({ items: '#tools'}).navigator();

ここに、イントロページの特別なロジックがあります。

// get handle to the scrollable api
var api = $("#scroll").data("scrollable");
 
// this callback does the special handling of our "intro page"
api.onStart(function(e, i) {
 
// when on the first item: hide the intro
if (i) {
$("#intro").fadeOut("slow");
 
// otherwise show the intro
} else {
$("#intro").fadeIn(1000);
}
 
// toggle activity for the intro thumbnail
$("#t0").toggleClass("active", i == 0);
});
 
// a dedicated click event for the intro thumbnail
$("#t0").click(function() {
 
// seek to the beginning (the hidden first item)
$("#scroll").scrollable().begin();
 
});

注: デモは、矢印キーを使っても移動できます。