ComponentOne Studio MVC5 Classic ヘルプ
ポップアップアニメーションの設定
MVC Classic ウィジェット > Wijpopup > ポップアップアニメーションの設定

wijpopup ウィジェットを表示するときに使用するアニメーションを簡単にカスタマイズできます。 以下の手順を実行します。

  1. ASP.NET MVC 5 Wijmo アプリケーション を作成します。
  2. ソリューションエクスプローラに移動して、Views フォルダ内の Shared フォルダを展開し、_Layout をダブルクリックしてファイルを開きます。
  3. 以下のマークアップを、@RenderBody() のすぐ後のページの <body> タグ内に追加します。
    ソースビュー
    コードのコピー 
    <div id="food">
    <img src="http://lorempixel.com/400/200/food/1/" alt="Popup Food!" />
</div>
<div>
    <input type="button" id="Button1" onclick="popupbeside();" value="popup" />
</div>

    このマークアップは、画像とボタンをページに追加します。 ボタンをクリックすると、画像が表示されます。

  4. 前の手順で追加した </div> 終了タグの後に、以下のマークアップを追加します。
    ソースビュー
    コードのコピー 
    <div class="options">
    <div class="option-row">
        <label>Show Duration</label>
        <select name="showDuration" id="showDuration" class="duration">
            <option value="200">200</option>
            <option value="400">400</option>
            <option value="800">800</option>
            <option value="1200">1200</option>
            <option value="1500">1500</option>
        </select>
    </div>
    <div class="option-row">
        <label>Show Effect</label>
        <select name="showEffect" id="showEffect" class="effect">
            <option value="show">None</option>
            <option value="blind">Blind</option>
            <option value="clip">Clip</option>
            <option value="drop">Drop</option>
            <option value="fade">Fade</option>
            <option value="fold">Fold</option>
            <option value="puff">Puff</option>
            <option value="pulsate">Pulsate</option>
            <option value="slide">Slide</option>
        </select>
    </div>
    <div class="option-row">
        <label>Hide Duration</label>
        <select name="hideDuration" id="hideDuration" class="duration">
            <option value="200">200</option>
            <option value="400">400</option>
            <option value="800">800</option>
            <option value="1200">1200</option>
            <option value="1500">1500</option>
        </select>
    </div>
    <div class="option-row">
        <label>Hide Effect</label>
        <select name="hideEffect" id="hideEffect" class="effect">
            <option value="hide">None</option>
            <option value="blind">Blind</option>
            <option value="clip">Clip</option>
            <option value="drop">Drop</option>
            <option value="fade">Fade</option>
            <option value="fold">Fold</option>
            <option value="puff">Puff</option>
            <option value="pulsate">Pulsate</option>
            <option value="slide">Slide</option>
        </select>
    </div>
</div>

    このマークアップは、実行時に画像をポップアップする位置を選択できる複数のドロップダウンボックスを追加します。

  5. 前の手順で追加した </div> 終了タグの後に、以下の jQuery スクリプトを追加して wijpopup ウィジェットを初期化します。
    ソースビュー
    コードのコピー 
    <script type="text/javascript">
    $(function () {
        $("#food").wijpopup({
            autoHide: true,
            position: {
                of: $('#Button1'),
                offset: '0 4'
            }
                         });
        $(".duration").bind("change keyup", function () {
            var o = {};
            o[$(this).attr('name')] = $(this).val() * 1;
            $("#food").wijpopup(o);
        });
        $(".effect").bind("change keyup", function () {
            var o = {};
            o[$(this).attr('name')] = $(this).val();
            $("#food").wijpopup(o);
        });
    });
    function popupbeside() {
        $("#food").wijpopup('show');
    }
</script>

    これによりポップアップとドロップダウンボックスが初期化されます。

このトピックの作業結果

［F5］を押してアプリケーションを実行し、ドロップダウンボックスからオプションを選択してポップアップの表示をカスタマイズし、〈ポップアップ〉ボタンをクリックして画像をポップアップします。

 

 

Copyright © GrapeCity inc. All rights reserved.