製品版のみの機能
ポップオーバー - ASP.NET MVC
このサンプルでは、ASP.NET MVC ヘルパー ラッパーを使用してポップオーバー コントロールの初期化を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
コントロールは、チェーン構文を使用して View で初期化されます。入力フィールドの上にホバーすると、ポップオーバーがアクティブ化されます。ボタンをクリックすると、カスタム スタイル設定されたポップオーバーが表示されます。
コード ビュー
クリップボードへコピー
@using Infragistics.Web.Mvc
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
</head>
<body>
<style type="text/css">
.ui-igpopover > .ui-widget-content {
padding: 5px;
background-color: #f9e6e7;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
border-left-color: none !important;
}
.ui-igpopover-arrow-left {
border-right-color: #f9e6e7;
}
.ui-igpopover-arrow-top {
border-bottom-color: #f9e6e7;
}
.ui-igpopover-arrow-bottom {
border-top-color: #f9e6e7;
}
.ui-igpopover-arrow-right {
border-left-color: #f9e6e7;
}
</style>
<div id="formPopover">
@(Html.Infragistics()
.TextEditor()
.ID("userNameEditor")
.TextMode(TextEditorTextMode.Text)
.Height("30px")
.PlaceHolder("ユーザー名")
.HtmlAttributes(new Dictionary<string, object> { { "title", "ユーザー名またはメール アドレスを入力してください。" } })
.Render()
)
<br />
<br />
@(Html.Infragistics()
.TextEditor()
.ID("passwordEditor")
.TextMode(TextEditorTextMode.Password)
.Height("30px")
.PlaceHolder("パスワード")
.HtmlAttributes(new Dictionary<string, object> { { "title", "パスワードを入力してください。" } })
.Render()
)
<br />
<br />
</div>
<input type="button" id="btnSubmit" />
@(Html.Infragistics().Popover()
.ID("formPopover input[title]")
.Direction(PopoverDirection.Right)
.Position(PopoverPosition.Balanced)
.HeaderTemplate(headerTemplate =>
{
headerTemplate.CloseButton(false);
})
.ShowOn(ShowOn.MouseEnter)
.Render())
<script>
$( function ()
{
$( "#btnSubmit" ).igButton( {
labelText: "サインイン",
click: function ()
{
showFormPopover($('#formPopover input[title]'));
}
} );
function showFormPopover( target )
{
target.igPopover( "show");
}
} );
</script>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace IgniteUI.SamplesBrowser.Controllers
{
public class PopoverController : Controller
{
//
// GET: /Popover/
[ActionName("aspnet-mvc-helper")]
public ActionResult AspNetMvcHelper()
{
return View("aspnet-mvc-helper");
}
}
}