HTML 設定

このプラグインは、デフォルトで、CSSクラス名 "navi" を検索し、要素内にナビゲーションボタンを自動生成します。 前の設定では、スクロールの上に、次の DIV を配置しています。

<!-- wrapper for navigator elements -->
<div class="navi"></div>

その後、プラグインは空の DIV を次のような構造に変換します:

<!-- wrapper -->
<div class="navi">
  <a href="0" class="active"/>
  <a href="1" class=""/>
  <a href="2" class=""/>
</div>

次のような、scrollable-navigator.css ファイルでナビゲータをスタイリングしています:

/* position and dimensions of the navigator */
.navi {
    margin-left:328px;
    width:200px;
    height:20px;
}
 

/* items inside navigator */
.navi a {
    width:8px;
    height:8px;
    float:left;
    margin:3px;
    background:url(/media/img/scrollable/arrow/navigator.png) 0 0 no-repeat;
    display:block;
    font-size:1px;
}
 
/* mouseover state */
.navi a:hover {
    background-position:0 -8px;
}
 
/* active state (current page state) */
.navi a.active {
    background-position:0 -16px;
}

次のデモで行っているように、 代わりに手動でナビゲータのリンクを生成することができます。

JavaScript 設定

// initialize scrollable together with the navigator plugin
$("#navigator").scrollable().navigator();                     

ナビゲータ·プラグインのドキュメントを参照してください。

自動スクロール・プラグイン

自動スクロールを作ります。スクロールの下のアクションボタンで再生することができます。 マウスでスクロールをインタラクトすると、自動スクロールが一時停止します。

スタンドアロン・デモ

JavaScript 設定

今回は、プラグインへ2つの設定オプションを指定しています。 autoplay 設定オプションを無効にすることにより、ページロード時の自動スクロールが スタートしないようにしています。 全てのツールと同じように、ツールのプログラム・インタフェースに容易にアクセスできるように、 プラグインは、api 設定オプションもサポートします。 API は、アクションボタンで使用されています。

// initialize scrollable together with the autoscroll plugin
var root = $("#autoscroll").scrollable({circular: true}).autoscroll({ autoplay: false });
 
// provide scrollable API for the action buttons
window.api = root.data("scrollable");

アクションボタン

pause と stop の違いは、ユーザがマウスによりスクロールとインタラクトする場合、 自動スクロールが一時停止状態にあるときに再生が再開されるということです。

<div id="actionButtons">
	<button type="button" onClick="api.play()">Play</button>
	<button type="button" onClick="api.pause()">Pause</button>
	<button type="button" onClick="api.stop()">Stop</button>
</div>

自動スクロール·プラグインのドキュメントを参照してください。

チェーン・プラグイン

ここでは、すべてのプラグインを一緒に使用しています。mousewheel と circular オプションも使用可能にしています。

スタンドアロン・デモ

JavaScript 設定

// heeeeeeeeeeere we go.
$("#chained").scrollable({circular: true, mousewheel: true}).navigator().autoscroll({
	interval: 3000
});