外部コンテンツの表示

wijexpander ウィジェットに外部コンテンツを表示できます。この機能を利用するには、単に contentURL オプションを設定します。例については、Web サイト（ http://demo.componentone.com/ASPNET/MVCExplorer/expander/ContentURL）にアクセスし、MVC コントロールエクスプローラの Expander > ContentUrl サンプルのライブデモをご覧ください。

拡張方向を設定するには、以下の手順を実行します。

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

以下のマークアップを、@RenderBody() のすぐ後のページの <body> タグ内に追加します。

ソースビュー	コードのコピー
<div id="expanderContentUrl1"> <h3>componentone.com（クリックして縮小／拡張）</h3> <div style="height:400px;overflow:hidden;"> </div>

このマークアップは、１つのエクスパンダウィジェットのコンテンツをページに追加します。次の手順では、エクスパンダのコンテンツを設定します。

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

ソースビュー	コードのコピー
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#expanderContentUrl1").wijexpander({ contentUrl: "http://www.componentone.com/", expanded:true }); }); </script>

これにより、ComponentOne Web サイトがエクスパンダに表示されます。

このトピックの作業結果

［F5］を押してアプリケーションを実行し、ComponentOne Web サイトがウィジェットに表示されることを確認します。リンクをクリックして、エクスパンダ内で Web サイトを操作できることを確認します。