Popup

Popup

概要

機能

サンプル

ポップオーバー（オーナー要素を持つポップアップ）

トリガーのカスタマイズ

ShowTrigger および HideTrigger プロパティを選択して、ポップアップを表示または非表示にします。

設定

説明

Popup は、オーナー要素を使用してポップアップの表示/非表示を制御することができます。show-trigger 属性と hide-trigger 属性は、オーナー要素がクリックされたときやポップアップがフォーカスを失ったときに、ポップアップを表示または非表示にするかどうかを決定します。

IsResizable ：マウスでエッジをドラッグしてポップアップのサイズを変更できるかどうかを決定する値を取得または設定します。

IsDraggableプロパティ：ポップアップをそのヘッダーでマウスによってドラッグできるかどうかを示す値を取得または設定します。ヘッダは、 '.wj-dialog-header' または '.modal-header' の　CSS　セレクタによって識別されます。ダイアログに 'wj-dialog-header' または '.modal-header'　クラスを持つ要素が含まれていない場合、ユーザーがポップアップをドラッグすることができません。

OnClientDraggedプロパティ：ポップアップがドラッグされた後に発生するクライアント側の関数を取得または設定します。
OnClientDraggingプロパティ：ポップアップがドラッグされようとしているときに発生するクライアント側の関数を取得または設定します。
OnClientPositionChangedプロパティ： Dragging イベントと Dragged イベントの間で、ユーザーがポップアップを移動するときに発生するクライアント関数を取得または設定します。
OnClientPositionChangingプロパティ： Dragging イベントと Dragged イベントの間で、ユーザーがポップアップを移動するときに発生するクライアント関数を取得または設定します。
OnClientResizedプロパティ：ポップアップがサイズ変更された後に発生するクライアント関数を取得または設定します。
OnClientResizingプロパティ：ポップアップがサイズ変更されようとしているときに発生するクライアント関数を取得または設定します。
OnClientSizeChangedプロパティ： Resizing イベントと Resized イベントの間で、ユーザーがポップアップのサイズを変更するときに発生するクライアント関数を取得または設定します。
OnClientSizeChangingプロパティ： Resizing イベントと Resized イベントの間で、ユーザーがポップアップのサイズを変更するときに発生するクライアント関数を取得または設定します。

ソース

IndexController.cs

using Microsoft.AspNetCore.Mvc;
using System;
using MvcExplorer.Models;
using System.Collections.Generic;
using C1.Web.Mvc;
using System.Linq;

namespace MvcExplorer.Controllers
{
    public partial class PopupController : Controller
    {
        public ActionResult Index()
        {
            var settings = new ClientSettingsModel
            {
                Settings = new Dictionary<string, object[]>
                {
                    {"ShowTrigger", Enum.GetValues(typeof(PopupTrigger)).Cast<object>().ToArray()},
                    {"HideTrigger", Enum.GetValues(typeof(PopupTrigger)).Cast<object>().ToArray()}
                }
            };
            settings.LoadRequestData(Request);
            ViewBag.DemoSettingsModel = settings;
            return View();
        }
    }
}

Index.cshtml

@{
    ViewBag.DemoSettings = true;
    ClientSettingsModel settings = ViewBag.DemoSettingsModel;
}
@section Styles{
    <style>
        .btn {
            height: auto;
        }

        .popover {
            display: block;
        }

        .tab-content > .tab-pane {
            display: block;
        }
    </style>
}
<label>@Html.Raw(PopupRes.Index_Text2)</label>
<!-- The popup owners. -->
<button id="btn1" type="button" class="btn btn-default">
    @Html.Raw(PopupRes.Index_ClickToShowPopupForm)
    <br>
    <small>@Html.Raw(PopupRes.Index_Description1)</small>
</button>

<button id="btn2" type="button" class="btn btn-default">
    @Html.Raw(PopupRes.Index_ClickToShowPopupForm)
    <br>
    <small>@Html.Raw(PopupRes.Index_Description2)</small>
</button>

<button id="btn3" type="button" class="btn btn-default">
    @Html.Raw(PopupRes.Index_ClickToShowPopupForm)
    <br>
    <small>(@Html.Raw(PopupRes.Index_Description3)</small>
</button>
<button id="eventPopupBtn" type="button" class="btn btn-default">
    @Html.Raw(PopupRes.Index_ClickToShowPopupWithEvents)
    <br>
    <small>(ShowTrigger=Click, HideTrigger=Click, IsResizable=True, IsDraggable=True)</small>
</button>
<br />
<br />

<strong style="color:red">@Html.Raw(PopupRes.Index_Title4)</strong>
<br />
<p style="color:red">@Html.Raw(PopupRes.Index_Description5)</p>

<button id="btn4" type="button" class="btn btn-default">
    <small>(@Html.Raw(PopupRes.Index_Description4)</small>
</button>
<br />
<br />
<br />

<c1-popup class="popover" style="display:none;" id="popup1" owner="#btn1" hide-trigger="Click" is-resizable="true">
    <h3 class="popover-title">
        @Html.Raw(PopupRes.Index_Title)
    </h3>
    <div class="popover-content">
        @Html.Raw(PopupRes.Index_Text0)
    </div>
</c1-popup>

<c1-popup class="popover" style="display:none;" id="popup2" owner="#btn2" hide-trigger="Blur">
    <h3 class="popover-title">
        @Html.Raw(PopupRes.Index_Title)
    </h3>
    <div class="popover-content">
        @Html.Raw(PopupRes.Index_Text0)
    </div>
</c1-popup>

<c1-popup class="popover" style="display:none;" id="popup3" owner="#btn3" hide-trigger="None">
    <h3 class="popover-title">
        @Html.Raw(PopupRes.Index_Title)
    </h3>
    <div class="popover-content ">
        <form name="popoverForm">
            <p>@Html.Raw(PopupRes.Index_Text0)</p>
            <pre>2 + 3 = <span class="">5</span></pre>
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon">@@</div>
                    <input class="form-control" type="email" placeholder="@PopupRes.Index_EnterEmail">
                </div>
            </div>
            <div class="form-actions">
                <button type="button" class="btn btn-danger wj-hide">@Html.Raw(PopupRes.Index_Close)</button>
                <button type="button" class="btn btn-primary wj-hide">@Html.Raw(PopupRes.Index_SaveChanges)</button>
            </div>
        </form>
    </div>
</c1-popup>

<c1-popup class="popover" style="display:none;" id="eventPopup" owner="#eventPopupBtn" show-trigger="Click" hide-trigger="Click"
          is-resizable="true" is-draggable="true" dragging="onDragging" dragged="onDragged" position-changing="onPositionChanging"
          position-changed="onPositionChanged" resizing="onResizing" resized="onResized" size-changing="onSizeChanging" size-changed="onSizeChanged">
    <h3 class="wj-dialog-header" style="margin:0">
        @Html.Raw(PopupRes.Index_Title)
    </h3>
    <div class="popover-content">
        <div class="container">
            <ul>
                <li>onDragging</li>
                <li>onDragged</li>
                <li>onPositionChanging</li>
                <li>onPositionChanged</li>
                <li>onResizing</li>
                <li>onResized</li>
                <li>onSizeChanging</li>
                <li>onSizeChanged</li>
            </ul>
        </div>
    </div>
</c1-popup>

<c1-popup class="popover" style="display:none;" id="popup4" owner="#btn4" show-trigger="None" hide-trigger="None">
    <h3 class="popover-title">
        @Html.Raw(PopupRes.Index_Title)
    </h3>
    <div class="popover-content">
        @Html.Raw(PopupRes.Index_Text0)
    </div>
</c1-popup>

@section Scripts{
    <script>
        function setProperty(property, value) {
            var control = wijmo.Control.getControl('#popup4');
            if (control) {
                control[property] = value;
            }
        }

        function customChangeShowTrigger(popup, value) {
            setProperty('showTrigger', value);
        }

        function customChangeHideTrigger(popup, value) {
            setProperty('hideTrigger', value);
        }

        //events
        function onDragging() {
            console.log("onDragging!!!")
        }
        function onDragged() {
            console.log("onDragged!!!")
        }
        function onPositionChanging() {
            console.log("onPositionChanging!!!")
        }
        function onPositionChanged() {
            console.log("onPositionChanged!!!")
        }
        function onResizing() {
            console.log("onResizing!!!")
        }
        function onResized() {
            console.log("onResized!!!")
        }
        function onSizeChanging() {
            console.log("onSizeChanging!!!")
        }
        function onSizeChanged() {
            console.log("onSizeChanged!!!")
        }
    </script>
}

@section Description{
    <p>@Html.Raw(PopupRes.Index_Text1)</p>
    <p>@Html.Raw(PopupRes.Index_Text3)</p>
    <p>@Html.Raw(PopupRes.Index_IsDraggable_Description)</p>
    <p>
        @Html.Raw(PopupRes.Index_OnClientDragged_Description)
        <br />@Html.Raw(PopupRes.Index_OnClientDragging_Description)
        <br />@Html.Raw(PopupRes.Index_OnClientPositionChanged_Description)
        <br />@Html.Raw(PopupRes.Index_OnClientPositionChanging_Description)
        <br />@Html.Raw(PopupRes.Index_OnClientResized_Description)
        <br />@Html.Raw(PopupRes.Index_OnClientResizing_Description)
        <br />@Html.Raw(PopupRes.Index_OnClientSizeChanged_Description)
        <br />@Html.Raw(PopupRes.Index_OnClientSizeChanging_Description)
    </p>
}

マニュアル

新しいコントロール

人気のコントロール

データ管理

データの視覚化

ナビゲーションとレイアウト

ドキュメント

スケジュール

入力と編集

チュートリアル

新機能

導入ガイド（英語）

サンプルアプリケーション（英語）

データ管理

データの視覚化

ナビゲーションとレイアウト

ドキュメント

スケジュール

入力と編集

チュートリアル

新機能

導入ガイド（英語）

サンプルアプリケーション（英語）

概要

機能

タイトル

タイトル

タイトル

タイトル

タイトル

設定

説明