コンテンツペインの拡張方向の変更

wijaccordion ウィジェットでは、ユーザーは上、下、左、または右からペインのコンテンツを拡張できます。この機能を利用するには、単に expandDirection オプションを設定します。 Web サイト (http://demo.componentone.com/ASPNET/MVCExplorer/accordion/ExpandDirection) にアクセスし、MVC コントロールエクスプローラの Accordion > ExpandDirection サンプルのライブデモをご覧ください。.

ASP.NET MVC 4 Wijmo インターネットアプリケーションを作成します。
ソリューションエクスプローラで、Views → Shared フォルダを展開し、_Layout.cshtml をダブルクリックしてファイルを開きます。

以下のマークアップをページの <body> タグ内に追加します。

ソースビュー	コードのコピー
<div id="accordion"> <h3>ペイン 1</h3> <div> <p> ペイン 1 のコンテン </p> </div> <h3>ペイン 2</h3> <div> <p> ペイン 2 のコンテンツ </p> </div> <h3> ペイン 3</h3> <div> <p> ペイン 3 のコンテンツ </p> </div> <h3> ペイン 4</h3> <div> <p> ペイン 4 のコンテンツ </p> </div> </div>

ソースビュー

コードのコピー

<div id="accordion">
<h3>ペイン 1</h3>
                <div>
                    <p>
                        ペイン 1 のコンテン
                    </p>
                </div>
                <h3>ペイン 2</h3>
                <div>
                    <p>
                        ペイン 2 のコンテンツ
                    </p>
                </div>
                             
                <h3>
                   ペイン 3</h3>
                <div>
                    <p>
                        ペイン 3 のコンテンツ
                    </p>
                </div>
                <h3>
                   ペイン 4</h3>
                <div>
                    <p>
                        ペイン 4 のコンテンツ
                    </p>
                </div>
</div>

前の手順で追加した終了タグの後に、以下の jQuery スクリプトを入力し、wijaccordion ウィジェットを初期化して expandDirection オプションを設定します。

ソースビュー	コードのコピー
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#accordion").wijaccordion({ expandDirection: "left" }); }); </script>

アプリケーションを実行し、いずれかのペインをクリックしてコンテンツが左へ拡張されることを確認します。.