csstest：jQuery Tutorial Pluginを使ってチュートリアルページを作成

スクリプトとスタイルシートをインクルード

チュートリアルを表示する任意のページにスタイルシートとJavaScriptファイルをインクルードします。矢印の画像の位置を移動させたい場合、jquery.tutorial.cssファイルがある同じディレクトリに画像フォルダ"tutorial"をコピーしてください。そしてjquery.tutorial.css内の画像へのパスを更新してください。

<link href="css/jquery.tutorial.css" rel="stylesheet" type="text/css" media="screen" />
<script src="js/lib/jquery.1.6.2.min.js" type="text/javascript"></script>
<script src="js/jquery.tutorial.js" type="text/javascript"></script>

チュートリアルの設定

チュートリアルを設定するときに、いくつかのオプションがあります。チュートリアルを開始するには、アプリケーション内のどこからでも $('#tutorial').tutorial(); を呼び出す必要があります。必要に応じて呼び出し、この関数にオプションのオブジェクトに渡すことができます。

$('#tutorial').tutorial( options );

設定できるオプション

ロケーション

デフォルト： 'tl'

有効なウィンドウの位置の値のいずれかを以下に記述。
横幅

デフォルト： 320

整数のピクセル単位で指定。
不透明度

デフォルト： 0.4

オーバーレイの不透明度は0と1.0の間の小数。 1.0は不透明です。
トップに戻る

デフォルト： true

チュートリアル完了時に、ページのトップに戻す必要があるかどうか

チュートリアルの要素の構造

チュートリアルの要素は、単にスライドの要素のセットを含んでいるクラス tutorial のdivです。開始するには、ページにこのコードを追加します。

<div id="tutorial" class="tutorial">
    <!-- slides will go here -->
</div>

チュートリアルの要素は、以下の要素とHTML5のデータのプロパティを持つスライドのdiv要素の集合が含まれています。

<div data-target="#selector .for:target" data-arrow="tc" data-location="tl">
    <h1>Headline for Step 1</h1>
    <p>
        This is the message for Step 1.
    </p>
</div>

各ステップのdivは、data-target と data-arrow の両方のプロパティを設定する必要があります。チュートリアルの作成時に指定するオプションにdata-location のデフォルト値。ただし、特定のステップのチュートリアルウィンドウの位置を移動したい場合は、data-locationの"tl"で左上、"tr"で右上、"bl"で左下、"br"で右下に移動します。途中で、チュートリアルウィンドウの位置を変更したい場合は、次のステップでそれを戻す設定が必要です。

データを示す矢印画像は、"tc"で上部中央、"ml"で真ん中の左、"mr"で真ん中の右、"bc"で下中央に位置します。

ターゲット、矢印、およびウィンドウの位置を設定する

ターゲット

data-target プロパティは、ページ上の要素をターゲットにして、任意の有効なjQueryのセレクタである必要があります。すべての選択された要素は、ID（推奨）または最初の子要素を選択するセレクタ、n番目の要素、などにする必要があります。複数のセレクタを同時に選択した場合、その集合の最初の要素にデフォルトとして設定されます。

位置を示す矢印

位置を示す矢印には次のオプションがあります。

tc トップセンター
ml 真ん中左
mr 真ん中右
bc ボトムセンター

ウインドウの位置

ウインドウの位置には次のオプションがあります。

tl トップ左
tr トップ右
bl ボトム左
br ボトム右

チュートリアルを途中ウィンドウの位置を変更すると、それを変更前の状態に戻すまでは、ウィンドウの位置が新しい位置に残ることに注意する必要があります。

チュートリアルの表示とコントロールをプログラムで呼び出す

チュートリアルを開始するため、 $('#tutorial').tutorial();. #tutorial を簡単に呼び出すのは、すべてのスライドを含む要素のIDです。それは正常に動作するクラス tutorial が必要です。

次のスライド

次のスライドに移動するには、チュートリアルを初期化した同じ要素に次のメソッドを呼び出します。

$('#tutorial').tutorialNext();

ひとつ前のスライド

前のスライドに移動するには、チュートリアルを初期化した同じ要素に次のメソッドを呼び出します。

$('#tutorial').tutorialPrev();

チュートリアルのキャンセル

スライドショーを取り消すには、チュートリアルを初期化した同じ要素に次のメソッドを呼び出します。

$('#tutorial').tutorialCancel();

クレジットと詳細情報

jQuery Tutorial was written and coded by Mike Gioia over at ParticleBits. It was developed for PlaylistLove, an awesome music discovery and song recommendation service.

詳細情報は、以下のサイトへ