全て展開

すべて折りたたむ

ページのみを含む基本の wijwizard ウィジェットの HTML マークアップは、次のようになります。

<h2>Wizard with Pages Only</h2>
<div id="wizard1" class="mywizard">
    <div>
        Content for the first page.
    </div>
    <div>
        Content for the second page.
    </div>
</div>

次の jQuery スクリプトでウィジェットを初期化できます。

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $(".mywizard").wijwizard();
    });        
</script>

ここで説明しているマークアップとスクリプトの結果は次のようになります。矢印ボタンをクリックすると、ページが変わります。

ページとタイトルを含む wijwizard ウィジェットの HTML マークアップは、次のようになります。

ドロップダウンしてページとタイトルのマークアップを参照します

<h2>Wizard with Pages and Titles</h2>
<div id="wizard2" class="mywizard">
    <ul>
        <li>
            <h1>Step 1</h1>
            Description of step 1.
        </li>
        <li>
            <h1>Step 2</h1>
            Description of step 2.
        </li>
    </ul>
    <div>
        Content for step 1.
    </div>
    <div>
        Content for step 2.
    </div>
</div>

同じ jQuery スクリプトでウィジェットを初期化できます。

ここで説明しているマークアップとスクリプトの結果は次のようになります。戻るボタンと次へボタンをクリックすると、ページが変わります。

関連トピック

参照

Copyright © GrapeCity inc. All rights reserved.