製品版のみの機能

ラジアルメニュー - ASP.NET MVC

このサンプルでは、ASP.NET MVC ヘルパーを使用して igRadialMenu を描画する方法を紹介します。このヘルパーは igRadialMenu コントロールのさまざまなオプションを設定し、必要な HTML および JavaScript を描画します。

このサンプルは、より大きい画面サイズのためにデザインされました。

モバイルデバイスで画面を回転、フルサイズ表示、またはその他のデバイスにメールで送信します。

コードビュー

クリップボードへコピー

ASP.NET ビュー
ASP.NET コントローラー

                @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/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/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/2024.1/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.dv.js"></script>
</head>
<body>

    @(
        Html.Infragistics().RadialMenu()
            .ID("rMenu")
            .Width("300px")
            .Height("300px")

            .Items(i =>
                {
                    i.Item("button1")
                        .Header("太字")
                        .IconUri("http://jp.igniteui.com/images/samples/radial-menu/Bold.png")
                        .ClientEvents(new Dictionary<string, string>() { { "click", "function(evt, ui) { alert('太字 をクリックしました'); }" } });

                    i.Item("button2")
                        .Header("イタリック")
                        .IconUri("http://jp.igniteui.com/images/samples/radial-menu/Italic.png")
                        .ClientEvents(new Dictionary<string, string>() { { "click", "function(evt, ui) { alert('イタリック をクリックしました'); }" } });
                    
                    i.ColorItem("colorItem1")
                        .Header("色")
                        .IconUri("http://jp.igniteui.com/images/samples/radial-menu/BColor.png")
                        .Items(si =>
                            {
                                si.ColorWell().Color("#FFFF00");
                                si.ColorWell().Color("#C00000");
                                si.ColorWell().Color("#008000");
                                si.ColorWell().Color("#002060");
                                si.ColorWell().Color("#000000");
                            });
                    
                    i.NumericGauge("numGauge1")
                        .WedgeSpan(5)
                        .Ticks(new double[] {8,9,10,11,12,13,14,16,18,20,22,24,26,28,36,48})
                        .Value(16);
                })
            .Render()
    )

</body>
</html>

                 using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace IgniteUI.SamplesBrowser.Controllers
{
    public class RadialMenuController : Controller
    {
        // GET: /RadialMenu/

        [ActionName("mvc-initialization")]
        public ActionResult RenderMenu()
        {
            return View("mvc-initialization");
        }
    }
}

Ignite UI for jQuery | サンプル

検索結果

ラジアルメニュー - ASP.NET MVC

コードビュー

Ignite UI for jQuery | サンプル

検索結果

ラジアル メニュー - ASP.NET MVC

コード ビュー

ラジアルメニュー - ASP.NET MVC

コードビュー