ComponentOne Studio MVC5 Classic ヘルプ
ギャラリーのページャの設定
MVC Classic ウィジェット > Wijgallery > ギャラリーのページャの設定

ページャを追加し、wijgallery ウィジェットのページャスタイルを変更できます。この機能を利用するには、単に pagerType オプションと pagerPosition オプションを設定します。例については、Web サイト（ http://demo.componentone.com/ASPNET/MVCExplorer/gallery/Paging ）にアクセスし、MVC コントロールエクスプローラの Gallery > Paging サンプルのライブデモをご覧ください。

ページャタイプを設定するには、以下の手順を実行します。

  1. ASP.NET MVC 5 Wijmo アプリケーション を作成します。
  2. ソリューションエクスプローラに移動して、Views フォルダ内の Shared フォルダを展開し、_Layout をダブルクリックしてファイルを開きます。
  3. 以下のマークアップを、@RenderBody() のすぐ後のページの <body> タグ内に追加します。
    ソースビュー
    コードのコピー 
    <div>
    <div id="wijgallery" class="">
        <ul class="">
            <li class=""><a href="http://lorempixum.com/750/300/sports/1">
                <img alt="1" src="http://lorempixum.com/200/150/sports/1" title="キャプション 1" />
            </a></li>
            <li class=""><a href="http://lorempixum.com/750/300/sports/2">
                <img alt="2" src="http://lorempixum.com/200/150/sports/2" title="キャプション 2" />
            </a></li>
            <li class=""><a href="http://lorempixum.com/750/300/sports/3">
                <img alt="3" src="http://lorempixum.com/200/150/sports/3" title="キャプション 3" />
            </a></li>
            <li class=""><a href="http://lorempixum.com/750/300/sports/4">
                <img alt="4" src="http://lorempixum.com/200/150/sports/4" title="キャプション 4" />
            </a></li>
            <li class=""><a href="http://lorempixum.com/750/300/sports/5">
                <img alt="5" src="http://lorempixum.com/200/150/sports/5" title="キャプション 5" />
            </a></li>
            <li class=""><a href="http://lorempixum.com/750/300/sports/6">
                <img alt="6" src="http://lorempixum.com/200/150/sports/6" title="キャプション 6" />
            </a></li>
            <li class=""><a href="http://lorempixum.com/750/300/sports/7">
                <img alt="7" src="http://lorempixum.com/200/150/sports/7" title="キャプション 7" />
            </a></li>
            <li class=""><a href="http://lorempixum.com/750/300/sports/8">
                <img alt="8" src="http://lorempixum.com/200/150/sports/8" title="キャプション 8" />
            </a></li>
            <li class=""><a href="http://lorempixum.com/750/300/sports/9">
                <img alt="9" src="http://lorempixum.com/200/150/sports/9" title="キャプション 9" />
            </a></li>
            <li class=""><a href="http://lorempixum.com/750/300/sports/10">
                <img alt="10" src="http://lorempixum.com/200/150/sports/10" title="キャプション 10" />
            </a></li>
        </ul>
    </div>
</div>

    このマークアップは、ギャラリーウィジェットのコンテンツをページに追加します。

  4. 前の手順で追加した </div> 終了タグの後に、以下の jQuery スクリプトを入力して wijgallery ウィジェットを初期化します。
    ソースビュー
    コードのコピー 
    <script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#wijgallery").wijgallery({
            showPager:true,
            showCounter:false
        });
    });
</script>
<style type="text/css">
    .wijmo-wijcarousel-text span
    {
        padding:5px;
    }
    #wijgallery
    {
        width:750px;
        height:300px;
    }
</style>

    ギャラリーは数値ページャスタイルを使用します。

このトピックの作業結果

［F5］を押してアプリケーションを実行し、ギャラリーは数値ページャスタイルを使用することを確認します。

 

 

Copyright © GrapeCity inc. All rights reserved.