ポップアップ位置の設定

wijpopup ウィジェットの表示場所と表示方法を簡単にカスタマイズできます。以下の手順を実行します。

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

以下のマークアップを、@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>

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

前の手順で追加した </div> 終了タグの後に、以下のマークアップを追加します。

ソースビュー	コードのコピー
<div class="options"> <div class="option-row"> <label>My</label> <select id="my_horizontal"> <option value="left">left</option> <option value="center">center</option> <option value="right">right</option> </select> <select id="my_vertical"> <option value="top">top</option> <option value="middle">center</option> <option value="bottom">bottom</option> </select> </div> <div class="option-row"> <label>At</label> <select id="at_horizontal"> <option value="left">left</option> <option value="center">center</option> <option value="right">right</option> </select> <select id="at_vertical"> <option value="top">top</option> <option value="middle">center</option> <option value="bottom">bottom</option> </select> </div> <div class="option-row"> <label>Offset</label> <input id="offset" type="text" size="15" value="0 0" /> </div> <div class="option-row"> <label>Collision</label> <select id="collision_horizontal"> <option value="flip">flip</option> <option value="fit">fit</option> <option value="none">none</option> </select> <select id="collision_vertical"> <option value="flip">flip</option> <option value="fit">fit</option> <option value="none">none</option> </select> </div> </div>

ソースビュー

コードのコピー

<div class="options">
    <div class="option-row">
        <label>My</label>
        <select id="my_horizontal">
            <option value="left">left</option>
            <option value="center">center</option>
            <option value="right">right</option>
        </select>
        <select id="my_vertical">
            <option value="top">top</option>
            <option value="middle">center</option>
            <option value="bottom">bottom</option>
        </select>
    </div>
    <div class="option-row">
        <label>At</label>
        <select id="at_horizontal">
            <option value="left">left</option>
            <option value="center">center</option>
            <option value="right">right</option>
        </select>
        <select id="at_vertical">
            <option value="top">top</option>
            <option value="middle">center</option>
            <option value="bottom">bottom</option>
        </select>
    </div>
    <div class="option-row">
        <label>Offset</label>
        <input id="offset" type="text" size="15" value="0 0" />
    </div>
    <div class="option-row">
        <label>Collision</label>
        <select id="collision_horizontal">
            <option value="flip">flip</option>
            <option value="fit">fit</option>
            <option value="none">none</option>
        </select>
        <select id="collision_vertical">
            <option value="flip">flip</option>
            <option value="fit">fit</option>
            <option value="none">none</option>
        </select>
    </div>
</div>

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

前の手順で追加した </div> 終了タグの後に、以下の jQuery スクリプトを追加して wijpopup ウィジェットを初期化します。

ソースビュー	コードのコピー
<script type="text/javascript"> $(function () { $("#food").wijpopup({ autoHide: true, showEffect: 'blind', hideEffect: 'blind' }); }); function popupbeside() { $("#food").wijpopup('show', { of: $('#Button1'), my: $('#my_horizontal').val() + ' ' + $('#my_vertical').val(), at: $('#at_horizontal').val() + ' ' + $('#at_vertical').val(), offset: $('#offset').val(), collision: $("#collision_horizontal").val() + ' ' + $("#collision_vertical").val() }); } </script>

ソースビュー

コードのコピー

<script type="text/javascript">
    $(function () {
        $("#food").wijpopup({
        autoHide: true,
        showEffect: 'blind',
        hideEffect: 'blind'
        });
    });
    function popupbeside() {
        $("#food").wijpopup('show', {
            of: $('#Button1'),
            my: $('#my_horizontal').val() + ' ' + $('#my_vertical').val(),
            at: $('#at_horizontal').val() + ' ' + $('#at_vertical').val(),
            offset: $('#offset').val(),
            collision: $("#collision_horizontal").val() + ' ' + $("#collision_vertical").val()
        });
    }
</script>

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

このトピックの作業結果

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