SCROLLABLE - jQuery TOOLS

[ スクロール・プラグインのアクション ] [ メニュー ] [ jQuery tools ホーム·ページの設定]

ブラウザの[戻る]ボタンナビゲーション

このデモは、タブ・デモを引継いで、スクロールできるようにします。タブ、コンテンツ・エリアおよびスクロールの下のアクション・ボタンをクリックしてみてください。このスクロールは、circular（始めも終りもない）に設定すると共に、ブラウザの[戻る]ボタンをサポートする navigator プラグインを使用しています。

ストーリ
機能
プラグイン
デモ

あなたのサイトにカスタムスクロールを追加します

このツールは、次のようなところで使用できます

この場所のようなホームページ
製品カタログ
ニュースティッカー
フォームでのカスタム選択ボックス
イメージギャラリ
ビデオ・プレイリスト
すべての種類のナビゲーションのシステム

このツールの主な設計目標は、視覚的なカスタマイズ、使い易さ とプログラム化可能性の提供です。ライブラリの最初のバージョンは2008年 1月3日にリリースされました。それ以来、このツールは、長い道のりを歩んできましたが、現在は安定している成熟した製品です。

豊富ですが単純です

横と縦のスクロール。
ナビゲーションボタン、APIコール、キーボードの矢印キー、およびマウスのスクロールホイールを使用しスクロールができる。
1 "ページ"に任意の量の項目。ページは可変幅にできる。
JavaScriptを1行も使用しないナビゲーションボタンの設定ができる。
この例のようなタブナビゲーションは、プログラミングせずにセットアップができる。
プログラムのアクションは、next、prev、seekTo、 begin、end が使用できる。
スクロール項目の動的な追加と削除。
onBeforeSeek と onSeek リスナによる、スクロールの経験をカスタマイズする機能。
始まりも終りもない無限ループを設定する能力。

このすべてが、たった 1.02 KB のファイルです! 比類がない。

拡張可能なアーキテクチャ

このツールは、他のツールと同じように、プラグインで拡張することができます。現在使用可能なプラグインは、次のとおりです:

autoscrollは、スクロール動作を自動的にし、高度な設定が可能です。
navigatorには、スクロール間のページを切り替えるためのナビゲーションボタンが用意されています。ブラウザの戻る（次へ）ボタンでスクロールできるように、履歴機能を有効にすることができます。

独自のプラグインを記述することもできます。デフォルトの動作を変更するもう1つの方法には、独自のアニメーション効果を作成する機能があります。実験の余地はたくさんあります！

素早く開始するため、最初にデモを学習する

スタンドアロン・デモ

HTML コード

ここでのトリックは、タブペイン上のスクロールを可能にすることと、ナビゲータ・プラグインをタブに使用可能にすることです。今回は、ナビゲーター項目は自動生成されませんので、自分たちで次のように作成します:

<!-- tabs work as navigator for scrollable -->
<ul id="tabs" class="css-tabs navi">
  <li><a id="t1" class="current" href="#story">The Story</a></li>
  <li><a id="t2" href="#features">Features</a></li>
  <li><a id="t3" href="#plugins">Plugins</a></li>
  <li><a id="t4" href="#demos">Demos</a></li>
</ul>

次に、以下のような構造のペインを設定します:

  <!-- tab panes -->
  <div id="flowpanes">
 
    <!-- wrapper for scrollable items -->
    <div class="items">
 
      <!-- the items -->
      <div> [ any HTML here ]</div>
      <div> [ any HTML here ]</div>
      <div> [ any HTML here ]</div>
      <div> [ any HTML here ]</div>
 
    </div>
 
  </div>

Below the panes we have our action buttons:

  <!-- "Previous" action -->
  <button class="prev">« Previous</button>
 
  <!-- "Next" action -->
  <button class="next">Next »</button>

These buttons do not need any programming and they will work on-the-fly. This is because by default the scrollable tool looks for elements whose class names are "prev" and "next".

CSS コード

Just like the tabs demo this setup has also been styled with this CSS file and it has been overridden with the following settings to enable scrolling:

	/* override the root element to enable scrolling */
	.css-panes {
        height: 410px;
        width: 702px;
		position:relative;
		overflow:hidden;
		clear:both;
        background-color: transparent;
	}
 
	/* override single pane */
	.css-panes div {
		float:left;
		display:block;
		width:660px;
		font-size:14px;
        background-color: transparent;
	}
 
	/* our additional wrapper element for the items */
	.css-panes .items {
		width:20000em;
		position:absolute;
		clear:both;
		margin:0;
		padding:0;
        border:0;
	}
 

	.css-panes .less, .css-panes .less a {
		color:#999 !important;
		font-size:11px;
	}

JavaScript コード

Here is the commented JavaScript setup.

    // wait until document is fully scriptable
    $(function() {
 
    // select #flowplanes and make it scrollable. use circular and navigator plugins
    $(".css-panes").scrollable({ circular: true, mousewheel: true }).navigator({
 
    // select #flowtabs to be used as navigator
    navi: ".css-tabs",
 
    // select A tags inside the navigator to work as items (not direct children)
    naviItem: 'a',
 
    // assign "current" class name for the active A tag inside navigator
    activeClass: 'current',
 
    // make browser's back button work
    history: true
 
    });
    });

Enclosing your call inside $(document).ready executes the script right after the document is scriptable. Read more about that from User's Manual.

[ スクロール・プラグインのアクション ] [ メニュー ] [ jQuery tools ホーム·ページの設定]