Ignite UI™ API ヘルプ

ui.igRadialMenu

igRadialMenu は、Microsoft OneNote ラジアルメニュースタイルのツールおよび機能を提供します。ドロップダウンのネストされた階層の代わりに円形のメニューを提供します。コンテキストメニューとして使用できます。igRadialMenu で関連するサブメニュー項目にドリルダウン、その後メインレベルのメニュー項目に戻る機能も提供されます。

コードサンプル

<!doctype html>
<html>
<head>
    <!-- Infragistics Combined CSS -->
    <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
    <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
    <!-- jQuery Core -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <!-- jQuery UI -->
    <script src="js/jquery-ui.js" type="text/javascript"></script>    
    <!-- Infragistics Combined Scripts -->
      <script src="js/infragistics.core.js" type="text/javascript"></script>
      <script src="js/infragistics.dv.js" type="text/javascript"></script>
      <script type="text/javascript">
            $("#radialMenu").igRadialMenu({
            width: "300px",
            height: "300px",
            items:
            [
                {
                    name: "button1",
                    header: "Bold",
                    click: function () { alert("Bold pressed"); }
                },
 
                {
                    name: "button2",
                    header: "Italic",
                    click: function () { alert("Italic pressed"); }
                },
 
                {
                    type: "coloritem",
                    header: "Color",
                    items:
                    [
                        {
                            type: "colorwell",
                            color: "#FFFF00"
                        },
                        {
                            type: "colorwell",
                            color: "#C00000"
                        },
                        {
                            type: "colorwell",
                            color: "#008000"
                        },
                        {
                            type: "colorwell",
                            color: "#002060"
                        },
                        {
                            type: "colorwell",
                            color: "#000000"
                        }
                    ]
                },
                {
                    type: "numericgauge",
                    wedgeSpan: "5",
                    ticks: "8,9,10,11,12,13,14,16,18,20,22,24,26,28,36,48",
                    value: "16"
                }
            ]
        });
    </script>
</head>
<body>
    <div id="radialMenu"></div>
</body>
</html>

依存関係

jquery.js

jquery-ui.js

infragistics.util.js

infragistics.util.jquery.js

infragistics.ui.widget.js

infragistics.ext_core.js

infragistics.ext_collections.js

infragistics.ext_collectionsextended.js

infragistics.dv_interactivity.js

infragistics.dv_core.js

infragistics.dv_jquerydom.js

infragistics.ext_ui.js

infragistics.radialmenu.js

継承

jQuery.widget

詳細の表示

centerButtonClosedFill

タイプ:: string
デフォルト:: null

IsOpen プロパティが false の場合、メニューの中央ボタンの背景を返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    centerButtonClosedFill : "#FF0000"
});  
  
//Get 
var color = $(".selector").igRadialMenu("option", "centerButtonClosedFill");  
  
//Set 
$(".selector").igRadialMenu("option", "centerButtonClosedFill", "#FF0000");

centerButtonClosedStroke

タイプ:: string
デフォルト:: null

IsOpen プロパティが false の場合、中央ボタンのリングのアウトラインに使用されるブラシを返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    centerButtonClosedStroke : "#FF0000"
});  
  
//Get 
var color = $(".selector").igRadialMenu("option", "centerButtonClosedStroke");  
  
//Set 
$(".selector").igRadialMenu("option", "centerButtonClosedStroke", "#FF0000");

centerButtonContentHeight

タイプ:: number
デフォルト:: 28

中央ボタンコンテンツの高さを取得または設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    centerButtonContentHeight : 30
});  
  
//Get 
var height = $(".selector").igRadialMenu("option", "centerButtonContentHeight");  
  
//Set 
$(".selector").igRadialMenu("option", "centerButtonContentHeight", 30);

centerButtonContentWidth

タイプ:: number
デフォルト:: 28

中央ボタンコンテンツの幅を取得または設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    centerButtonContentWidth : 30
});  
  
//Get 
var width = $(".selector").igRadialMenu("option", "centerButtonContentWidth");  
  
//Set 
$(".selector").igRadialMenu("option", "centerButtonContentWidth", 30);

centerButtonFill

タイプ:: string
デフォルト:: null

IsOpen プロパティが true の場合、メニューの中央ボタンの背景を返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    centerButtonFill : "#FF0000"
});  
  
//Get 
var color = $(".selector").igRadialMenu("option", "centerButtonFill");  
  
//Set 
$(".selector").igRadialMenu("option", "centerButtonFill", "#FF0000");

centerButtonHotTrackFill

タイプ:: string
デフォルト:: null

マウスポインターがメニューの中央ボタンの上にある場合、背景を取得または設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    centerButtonHotTrackFill : "#FF0000"
});  
  
//Get 
var color = $(".selector").igRadialMenu("option", "centerButtonHotTrackFill");  
  
//Set 
$(".selector").igRadialMenu("option", "centerButtonHotTrackFill", "#FF0000");

centerButtonHotTrackStroke

タイプ:: string
デフォルト:: null

マウスポインターが中央ボタンの上にある場合、リングのアウトラインのブラシを取得または設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    centerButtonHotTrackStroke : "#FF0000"
});  
  
//Get 
var color = $(".selector").igRadialMenu("option", "centerButtonHotTrackStroke");  
  
//Set 
$(".selector").igRadialMenu("option", "centerButtonHotTrackStroke", "#FF0000");

centerButtonStroke

タイプ:: string
デフォルト:: null

IsOpen が true の場合、中央ボタンのリングのアウトラインに使用されるブラシを返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    centerButtonStroke : "#FF0000"
});  
  
//Get 
var color = $(".selector").igRadialMenu("option", "centerButtonStroke");  
  
//Set 
$(".selector").igRadialMenu("option", "centerButtonStroke", "#FF0000");

centerButtonStrokeThickness

タイプ:: number
デフォルト:: 0

メニューの内部リングのアウトラインの幅を取得または設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    centerButtonStrokeThickness : 3
});  
  
//Get 
var thickness = $(".selector").igRadialMenu("option", "centerButtonStrokeThickness");  
  
//Set 
$(".selector").igRadialMenu("option", "centerButtonStrokeThickness", 3);      

currentOpenMenuItemName

タイプ:: string
デフォルト:: null

子が表示されているメニュー項目の名前を取得または設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    currentOpenMenuItemName : "button1"
});  
  
//Get 
var currentItem = $(".selector").igRadialMenu("option", "currentOpenMenuItemName");  
  
//Set 
$(".selector").igRadialMenu("option", "currentOpenMenuItemName", "button1");       

font

タイプ:: string
デフォルト:: null

コントロールのフォント。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    font : "Arial"
});  
  
//Get 
var f = $(".selector").igRadialMenu("option", "font");  
  
//Set 
$(".selector").igRadialMenu("option", "font", "Arial");     

isOpen

タイプ:: bool
デフォルト:: false

メニューの項目が表示されているかどうかを示すブール値を返すか、設定します。閉じた場合、中央ボタンのみが描画されます。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    isOpen : true
});  
  
//Get 
var is_open = $(".selector").igRadialMenu("option", "isOpen");  
  
//Set 
$(".selector").igRadialMenu("option", "isOpen", true);      

items

タイプ:: array
デフォルト:: []
要素タイプ:: object

メニューの項目を取得または設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    items:
    [
      {
        name: "button1",
        header: "Button 1"
      },
      {
        name: "button2",
        header: "Button 2"
      }
    ]
});  
  
//Get 
var items = $(".selector").igRadialMenu("option", "items");  
  
//Set 
$(".selector").igRadialMenu("option", "items", [
  {
    name: "button1", header: "Button 1"
  },
  {
    name: "button2", header: "Button 2"
  }
]);

autoRotateChildren

タイプ:: bool
デフォルト:: true

子がこの要素の場所で整列するために回転されるかどうかを示すブール値を返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    autoRotateChildren : true
});  
  
//Get 
var auto_rotate = $(".selector").igRadialMenu("option", "autoRotateChildren");  
  
//Set 
$(".selector").igRadialMenu("option", "autoRotateChildren", true);      

autoUpdateRecentItem

タイプ:: bool
デフォルト:: false

子項目がクリックされたときに、RecentItem プロパティが更新されるかどうかを示すブール値を返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    autoUpdateRecentItem : true
});  
  
//Get 
var auto_update = $(".selector").igRadialMenu("option", "autoUpdateRecentItem");  
  
//Set 
$(".selector").igRadialMenu("option", "autoUpdateRecentItem", true);      

checkBehavior

タイプ:: enumeration
デフォルト:: none

IsChecked プロパティを変更する方法を示す値を返すか、設定します。

メンバー

none
タイプ:string
項目はチェックできません。
checkBox
タイプ:string
項目はチェック可能で、他の項目に影響せずにチェックまたはチェック解除できます。
radioButton
タイプ:string
項目はチェックできます。同じ GroupName を持つ項目から一度に 1 項目のみチェックすることが可能です。チェック付きの項目のチェックは解除できません。
radioButtonAllowAllUp
タイプ:string
項目はチェックできます。同じ GroupName を持つ項目から一度に 1 項目のみチェックすることが可能です。チェック付きの項目のチェックを解除すると、すべての項目のチェックを解除します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    items:
    [
      {
        name: "item1",
        checkBehavior: "checkBox"
      }
    ]
});  
  
//Get 
var value = $(".selector").igRadialMenu("itemOption", "item1", "checkBehavior");  
  
//Set 
$(".selector").igRadialMenu("itemOption", "item1", "checkBehavior", "checkBox");          

checked

タイプ:: object
デフォルト:: null

Cancel="false" IsChecked が true に変更されるときに発生します。
関数の最初の引数は ui です。
メニューウィジェットへの参照を取得するために ui.owner を使用します。
ui.item を使用して、項目への参照を取得します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    items:
    [
        {
            name: "button1",
            checked: function (evt) {
                // Get reference to the menu item object
                evt.item;
            }
        }
    ]
});  

checkedHighlightBrush

タイプ:: string
デフォルト:: null

チェックされたときにツール内で表示される円弧に使用されるブラシを返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    checkedHighlightBrush : "#FF0000"
});  
  
//Get 
var color = $(".selector").igRadialMenu("option", "checkedHighlightBrush");  
  
//Set 
$(".selector").igRadialMenu("option", "checkedHighlightBrush", "#FF0000");          

childItemPlacement

タイプ:: enumeration
デフォルト:: asChildren

子項目が表示される場所を示す列挙体を返すか、設定します。

メンバー

asChildren
タイプ:string
項目は、親の xamRadialMenu アウターリングのボタンをクリックすることにより、アクセスできる別のレベル内に表示されます。
asSiblingsWhenChecked
タイプ:string
項目は、IsChecked が true に設定されている限り、親の兄弟として表示されます。
none
タイプ:string
子項目は表示されません。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    childItemPlacement : "asChildren"
});  
  
//Get 
var placement = $(".selector").igRadialMenu("option", "childItemPlacement");  
  
//Set 
$(".selector").igRadialMenu("option", "childItemPlacement", "asChildren");            

click

タイプ:: object
デフォルト:: null

Cancel="false" 項目領域がクリックされたときに発生します。
関数の最初の引数は ui です。
メニューウィジェットへの参照を取得するために ui.owner を使用します。
ui.item を使用して、項目への参照を取得します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    items:
    [
        {
            name: "button1",
            click: function (evt) {
                // Get reference to the menu item object
                evt.item;
            }
        }
    ]
});

closed

タイプ:: object
デフォルト:: null

Cancel="false" 子項目を表示した後に項目に戻るときに呼び出されます。
関数の最初の引数は ui です。
メニューウィジェットへの参照を取得するために ui.owner を使用します。
ui.item を使用して、項目への参照を取得します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    items:
    [
        {
            name: "button1",
            closed: function (evt) {
                // Get reference to the menu item object
                evt.item;
            }
        }
    ]
});

color

タイプ:: object
デフォルト:: null

項目が表す色を返すか、取得します。
注: Color プロパティが設定されると、複数のブラシプロパティが変更されます。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    items:
    [
      {
        name: "item1",
        color: "#FF0000"
      }
    ]
});  
  
//Get 
var color = $(".selector").igRadialMenu("itemOption", "item1", "color");  
  
//Set 
$(".selector").igRadialMenu("itemOption", "item1", "color", "#FF0000");           

colorChanged

タイプ:: object
デフォルト:: null

Cancel="false" Color プロパティが変更されたときに呼び出すイベント。
関数の最初の引数は ui です。
メニューウィジェットへの参照を取得するために ui.owner を使用します。
ui.oldValue を使用して、以前の値を取得します。
ui.newValue を使用して、新しい値を取得します。
ui.item を使用して、項目への参照を取得します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    items:
    [
        {
            name: "button1",
            colorChanged: function (evt) {
                // Get reference to the menu item object
                evt.item;
            }
        }
    ]
});

colorWellClick

タイプ:: object
デフォルト:: null

Cancel="false" 子孫カラーウェルの項目領域がクリックされたときに発生します。
関数の最初の引数は ui です。
メニューウィジェットへの参照を取得するために ui.owner を使用します。
ui.item を使用して、項目への参照を取得します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    items:
    [
        {
            name: "button1",
            colorWellClick: function (evt) {
                // Get reference to the menu item object
                evt.item;
            }
        }
    ]
});

foreground

タイプ:: string
デフォルト:: null

メニュー項目の内部領域の前景を返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    items:
    [
      {
        name: "item1",
        foreground: "#FF0000"
      }
    ]
});  
  
//Get 
var color = $(".selector").igRadialMenu("itemOption", "item1", "foreground");  
  
//Set 
$(".selector").igRadialMenu("itemOption", "item1", "foreground", "#FF0000"); 

groupName

タイプ:: string
デフォルト:: null

チェック済みを解除する項目を決定するときに、グループ化される RadioButton タイプを識別するために使用する名前を返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    items:
    [
      {
        name: "item1",
        groupName: "group1"
      }
    ]
});  
  
//Get 
var color = $(".selector").igRadialMenu("itemOption", "item1", "groupName");  
  
//Set 
$(".selector").igRadialMenu("itemOption", "item1", "groupName", "group1"); 

header

タイプ:: object
デフォルト:: null

メニュー項目のヘッダーを返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    items:
    [
      {
        name: "item1",
        header: "Click Me"
      }
    ]
});  
  
//Get 
var value = $(".selector").igRadialMenu("itemOption", "item1", "header");  
  
//Set 
$(".selector").igRadialMenu("itemOption", "item1", "header", "Click Me");              

highlightBrush

タイプ:: string
デフォルト:: null

トラックされたときにツール内で表示される円弧に使用されるブラシを返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    highlightBrush : "#FF0000"
});  
  
//Get 
var color = $(".selector").igRadialMenu("option", "highlightBrush");  
  
//Set 
$(".selector").igRadialMenu("option", "highlightBrush", "#FF0000");           

iconUri

タイプ:: string
デフォルト:: null

項目の画像の URI を取得または設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    items:
    [
      {
        name: "item1",
        iconUri: "../folder/image.png"
      }
    ]
});  
  
//Get 
var imgPath = $(".selector").igRadialMenu("itemOption", "item1", "iconUri");  
  
//Set 
$(".selector").igRadialMenu("itemOption", "item1", "iconUri", "../folder/image.png");           

innerAreaFill

タイプ:: string
デフォルト:: null

メニュー項目の内部領域の背景を返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    innerAreaFill : "#FF0000"
});  
  
//Get 
var color = $(".selector").igRadialMenu("option", "innerAreaFill");  
  
//Set 
$(".selector").igRadialMenu("option", "innerAreaFill", "#FF0000");              

innerAreaHotTrackFill

タイプ:: string
デフォルト:: null

ポインターの下にあるメニュー項目の内部領域の背景を返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    innerAreaHotTrackFill : "#FF0000"
});  
  
//Get 
var color = $(".selector").igRadialMenu("option", "innerAreaHotTrackFill");  
  
//Set 
$(".selector").igRadialMenu("option", "innerAreaHotTrackFill", "#FF0000");          

innerAreaHotTrackStroke

タイプ:: string
デフォルト:: null

ポインターの下にあるメニュー項目の内部領域のデフォルト境界線のブラシを返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    innerAreaHotTrackStroke : "#FF0000"
});  
  
//Get 
var color = $(".selector").igRadialMenu("option", "innerAreaHotTrackStroke");  
  
//Set 
$(".selector").igRadialMenu("option", "innerAreaHotTrackStroke", "#FF0000");

innerAreaStroke

タイプ:: string
デフォルト:: null

メニュー項目の内部領域のデフォルト境界線のブラシを返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    innerAreaStroke : "#FF0000"
});  
  
//Get 
var color = $(".selector").igRadialMenu("option", "innerAreaStroke");  
  
//Set 
$(".selector").igRadialMenu("option", "innerAreaStroke", "#FF0000");

innerAreaStrokeThickness

タイプ:: number
デフォルト:: 1

メニュー項目の内部領域の境界線の太さを返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    innerAreaStrokeThickness : 3
});  
  
//Get 
var thickness = $(".selector").igRadialMenu("option", "innerAreaStrokeThickness");  
  
//Set 
$(".selector").igRadialMenu("option", "innerAreaStrokeThickness", 3);  

isChecked

タイプ:: bool
デフォルト:: false

項目がチェック済みとして表示されるかどうかを示すブール値を返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    items:
    [
      {
        name: "item1",
        isChecked: true
      }
    ]
});  
  
//Get 
var ch = $(".selector").igRadialMenu("itemOption", "item1", "isChecked");  
  
//Set 
$(".selector").igRadialMenu("itemOption", "item1", "isChecked", true);      

isEnabled

タイプ:: bool
デフォルト:: true

項目が有効かどうかを示すブール値を返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    items:
    [
      {
        name: "item1",
        isEnabled: true
      }
    ]
});  
  
//Get 
var en = $(".selector").igRadialMenu("itemOption", "item1", "isEnabled");  
  
//Set 
$(".selector").igRadialMenu("itemOption", "item1", "isEnabled", true);

isToolTipEnabled

タイプ:: bool
デフォルト:: true

ツールチップが項目に表示されるかどうかを示すブール値を返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    items:
    [
      {
        name: "item1",
        isToolTipEnabled: true
      }
    ]
});  
  
//Get 
var value = $(".selector").igRadialMenu("itemOption", "item1", "isToolTipEnabled");  
  
//Set 
$(".selector").igRadialMenu("itemOption", "item1", "isToolTipEnabled", true);           

name

タイプ:: string
デフォルト:: null

メニュー内の項目の一意の名前を取得または設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    items:
    [
      {
        name: "item1",
      }
    ]
});  
  
//Set 
$(".selector").igRadialMenu("itemOption", "item1", "name", "item2");            

opened

タイプ:: object
デフォルト:: null

Cancel="false" 子項目を表示するために移動したときに呼び出されます。
関数の最初の引数は ui です。
メニューウィジェットへの参照を取得するために ui.owner を使用します。
ui.item を使用して、項目への参照を取得します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    items:
    [
        {
            name: "button1",
            opened: function (evt) {
                // Get reference to the menu item object
                evt.item;
            }
        }
    ]
});          

outerRingButtonFill

タイプ:: string
デフォルト:: null

メニュー項目のアウターリング内のボタンのデフォルトの境界線を返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    outerRingButtonFill : "#FF0000"
});  
  
//Get 
var color = $(".selector").igRadialMenu("option", "outerRingButtonFill");  
  
//Set 
$(".selector").igRadialMenu("option", "outerRingButtonFill", "#FF0000");          

outerRingButtonForeground

タイプ:: string
デフォルト:: null

メニューのアウターリングのボタンの前景のブラシを返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    outerRingButtonForeground : "#FF0000"
});  
  
//Get 
var color = $(".selector").igRadialMenu("option", "outerRingButtonForeground");  
  
//Set 
$(".selector").igRadialMenu("option", "outerRingButtonForeground", "#FF0000");          

outerRingButtonHotTrackFill

タイプ:: string
デフォルト:: null

ポインターの下にあるメニュー項目のアウターリング内のボタンの背景のブラシを返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    outerRingButtonHotTrackFill : "#FF0000"
});  
  
//Get 
var color = $(".selector").igRadialMenu("option", "outerRingButtonHotTrackFill");  
  
//Set 
$(".selector").igRadialMenu("option", "outerRingButtonHotTrackFill", "#FF0000");          

outerRingButtonHotTrackForeground

タイプ:: string
デフォルト:: null

ポインターの下のメニュー項目のアウターリング内のボタンの前景を返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    outerRingButtonHotTrackForeground : "#FF0000"
});  
  
//Get 
var color = $(".selector").igRadialMenu("option", "outerRingButtonHotTrackForeground");  
  
//Set 
$(".selector").igRadialMenu("option", "outerRingButtonHotTrackForeground", "#FF0000");          

outerRingButtonHotTrackStroke

タイプ:: string
デフォルト:: null

ポインターの下にあるメニュー項目のアウターリング内のデフォルト境界線のブラシを返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    outerRingButtonHotTrackStroke : "#FF0000"
});  
  
//Get 
var color = $(".selector").igRadialMenu("option", "outerRingButtonHotTrackStroke");  
  
//Set 
$(".selector").igRadialMenu("option", "outerRingButtonHotTrackStroke", "#FF0000");           

outerRingButtonStroke

タイプ:: string
デフォルト:: null

メニュー項目のアウターリング内のデフォルト境界線のブラシを返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    outerRingButtonStroke : "#FF0000"
});  
  
//Get 
var color = $(".selector").igRadialMenu("option", "outerRingButtonStroke");  
  
//Set 
$(".selector").igRadialMenu("option", "outerRingButtonStroke", "#FF0000");           

outerRingButtonStrokeThickness

タイプ:: number
デフォルト:: 1

メニュー項目のアウターリング内のボタンのアウトラインの幅を返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    outerRingButtonStrokeThickness : 3
});  
  
//Get 
var thickness = $(".selector").igRadialMenu("option", "outerRingButtonStrokeThickness");  
  
//Set 
$(".selector").igRadialMenu("option", "outerRingButtonStrokeThickness", 3);  

pendingValue

タイプ:: object
デフォルト:: NaN

ユーザーが要素を操作する間に、値を返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    items:
    [
      {
        name: "item1",
        pendingValue: 5
      }
    ]
});  
  
//Get 
var pv = $(".selector").igRadialMenu("itemOption", "item1", "pendingValue");  
  
//Set 
$(".selector").igRadialMenu("itemOption", "item1", "pendingValue", 5);           

pendingValueChanged

タイプ:: object
デフォルト:: null

Cancel="false" PendingValue プロパティが変更されたときに呼び出すイベント。
関数の最初の引数は ui です。
メニューウィジェットへの参照を取得するために ui.owner を使用します。
ui.oldValue を使用して、以前の値を取得します。
ui.newValue を使用して、新しい値を取得します。
ui.item を使用して、項目への参照を取得します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    items:
    [
        {
            name: "button1",
            pendingValueChanged: function (evt) {
                // Get reference to the menu item object
                evt.item;
                 
                // Get the old value
                evt.oldItem
                 
                // Get the new value
                evt.newItem
            }
        }
    ]
});

pendingValueNeedleBrush

タイプ:: string
デフォルト:: null

PendingValue を表す線を描画するブラシを取得または設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    pendingValueNeedleBrush : "#FF0000"
});  
  
//Get 
var color = $(".selector").igRadialMenu("option", "pendingValueNeedleBrush");  
  
//Set 
$(".selector").igRadialMenu("option", "pendingValueNeedleBrush", "#FF0000");            

recentItemName

タイプ:: string
デフォルト:: null

最近使用した項目を表す子項目の名前を取得または設定します。注: 関連付けられた最近使用した子項目の値を自動的に設定するため、その他の項目プロパティを {RecentItem} に設定できます。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    recentItemName : "botton1"
});  
  
//Get 
var ri = $(".selector").igRadialMenu("option", "recentItemName");  
  
//Set 
$(".selector").igRadialMenu("option", "recentItemName", "botton1");            

reserveFirstSlice

タイプ:: bool
デフォルト:: false

最初の目盛の前にスペースを残すかどうかを示すブール値を返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    reserveFirstSlice : true
});  
  
//Get 
var is_open = $(".selector").igRadialMenu("option", "reserveFirstSlice");  
  
//Set 
$(".selector").igRadialMenu("option", "reserveFirstSlice", true);            

smallIncrement

タイプ:: number
デフォルト:: 1

値を増加または減少させるときに PendingValue が調整される量を返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    smallIncrement : 2
});  
  
//Get 
var value = $(".selector").igRadialMenu("option", "smallIncrement");  
  
//Set 
$(".selector").igRadialMenu("option", "smallIncrement", 2);           

tickBrush

タイプ:: string
デフォルト:: null

目盛りを描画するために使用されるブラシを取得または設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    tickBrush : "#FF0000"
});  
  
//Get 
var color = $(".selector").igRadialMenu("option", "tickBrush");  
  
//Set 
$(".selector").igRadialMenu("option", "tickBrush", "#FF0000");            

ticks

タイプ:: object
デフォルト:: null

目盛りの値を取得または設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    items:
    [
      {
        name: "item1",
        ticks: "5px,6px,8px,10px,12px"
      }
    ]
});  
  
//Get 
var t = $(".selector").igRadialMenu("itemOption", "item1", "ticks");  
  
//Set 
$(".selector").igRadialMenu("itemOption", "item1", "ticks", 5);           

toolTip

タイプ:: object
デフォルト:: null

ラジアルメニュー項目に表示されるツールチップを返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    items:
    [
      {
        name: "item1",
        toolTip: "This is item 1"
      }
    ]
});  
  
//Get 
var tt = $(".selector").igRadialMenu("itemOption", "item1", "toolTip");  
  
//Set 
$(".selector").igRadialMenu("itemOption", "item1", "toolTip", "This is item 1");           

trackEndColor

タイプ:: object
デフォルト:: null

トラックの終了色を返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    items:
    [
      {
        name: "item1",
        trackEndColor: "#FF0000"
      }
    ]
});  
  
//Get 
var color = $(".selector").igRadialMenu("itemOption", "item1", "trackEndColor");  
  
//Set 
$(".selector").igRadialMenu("itemOption", "item1", "trackEndColor", "#FF0000");            

trackStartColor

タイプ:: object
デフォルト:: null

トラックの開始色を返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    items:
    [
      {
        name: "item1",
        trackStartColor: "#FF0000"
      }
    ]
});  
  
//Get 
var color = $(".selector").igRadialMenu("itemOption", "item1", "trackStartColor");  
  
//Set 
$(".selector").igRadialMenu("itemOption", "item1", "trackStartColor", "#FF0000");           

type

タイプ:: enumeration
デフォルト:: button

提供されているか項目のタイプを示す値を取得または設定します。

メンバー

button
タイプ:string
.
coloritem
タイプ:string
.
colorwell
タイプ:string
.
list
タイプ:string
.
numericitem
タイプ:string
.
numericgauge
タイプ:string

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    items:
    [
      {
        name: "item1",
        type: "colorwell"
      }
    ]
});  
  
//Get 
var t = $(".selector").igRadialMenu("itemOption", "item1", "type");  
  
//Set 
$(".selector").igRadialMenu("itemOption", "item1", "type", "colorwell");           

unchecked

タイプ:: object
デフォルト:: null

Cancel="false" IsChecked が false に変更されるときに発生します。
関数の最初の引数は ui です。
メニューウィジェットへの参照を取得するために ui.owner を使用します。
ui.item を使用して、項目への参照を取得します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    items:
    [
        {
            name: "button1",
            unchecked: function (evt) {
                // Get reference to the menu item object
                evt.item;
            }
        }
    ]
});

value

タイプ:: number
デフォルト:: NaN

数値項目の値を取得または設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    items:
    [
      {
        name: "item1",
        value: 5
      }
    ]
});  
  
//Get 
var t = $(".selector").igRadialMenu("itemOption", "item1", "value");  
  
//Set 
$(".selector").igRadialMenu("itemOption", "item1", "value", 5);             

valueChanged

タイプ:: object
デフォルト:: null

Cancel="false" Value プロパティが変更されたときに呼び出すイベント。
関数の最初の引数は ui です。
メニューウィジェットへの参照を取得するために ui.owner を使用します。
ui.oldValue を使用して、以前の値を取得します。
ui.newValue を使用して、新しい値を取得します。
ui.item を使用して、項目への参照を取得します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    items:
    [
        {
            name: "button1",
            valueChanged: function (evt) {
                // Get reference to the menu item object
                evt.item;
            }
        }
    ]
});

valueNeedleBrush

タイプ:: string
デフォルト:: null

Value を表すために使用されるブラシを取得または設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    items:
    [
      {
        name: "item1",
        valueNeedleBrush: "#FF0000"
      }
    ]
});  
  
//Get 
var color = $(".selector").igRadialMenu("itemOption", "item1", "valueNeedleBrush");  
  
//Set 
$(".selector").igRadialMenu("itemOption", "item1", "valueNeedleBrush", "#FF0000");            

wedgeIndex

タイプ:: number
デフォルト:: -1

項目が配置されるウィジェットを返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    items:
    [
      {
        name: "item1",
        wedgeIndex: 3
      }
    ]
});  
  
//Get 
var wIndex = $(".selector").igRadialMenu("itemOption", "item1", "wedgeIndex");  
  
//Set 
$(".selector").igRadialMenu("itemOption", "item1", "wedgeIndex", 3);            

wedgeSpan

タイプ:: number
デフォルト:: 1

項目が占めるウィジェットの数を返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    items:
    [
      {
        name: "item1",
        wedgeSpan: 4
      }
    ]
});  
  
//Get 
var wSpan = $(".selector").igRadialMenu("itemOption", "item1", "wedgeSpan");  
  
//Set 
$(".selector").igRadialMenu("itemOption", "item1", "wedgeSpan", 4);            

language
継承

タイプ:: string
デフォルト:: "en"

ウィジェットのロケール言語設定を取得または設定します。

コードサンプル

    //Initialize
$(".selector").igRadialMenu({
    language: "ja"
});
 
// Get
var language = $(".selector").igRadialMenu("option", "language");
 
// Set
$(".selector").igRadialMenu("option", "language", "ja");

locale
継承

タイプ:

object

デフォルト:

null

ウィジェットのロケール設定を取得または設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
locale: {}
});

// Get
var locale = $(".selector").igRadialMenu("option", "locale");

// Set
$(".selector").igRadialMenu("option", "locale", {});

menuBackground

タイプ:: string
デフォルト:: null

ラジアルメニューのバッキングのブラシを取得または設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    menuBackground : "#FF0000"
});  
  
//Get 
var color = $(".selector").igRadialMenu("option", "menuBackground");  
  
//Set 
$(".selector").igRadialMenu("option", "menuBackground", "#FF0000"); 

menuItemOpenCloseAnimationDuration

タイプ:: number
デフォルト:: 250

IsOpen プロパティが変更されるときにアニメーションを実行する期間を返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    menuItemOpenCloseAnimationDuration : 350
});  
  
//Get 
var duration_ms = $(".selector").igRadialMenu("option", "menuItemOpenCloseAnimationDuration");  
  
//Set 
$(".selector").igRadialMenu("option", "menuItemOpenCloseAnimationDuration", 350);       

menuItemOpenCloseAnimationEasingFunction

タイプ:: object
デフォルト:: null

IsOpen が変更されるときに発生するアニメーションに適用されるイージング関数を返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    items:
    [
        {
            name: "button1",
            menuItemOpenCloseAnimationEasingFunction: function (evt) {
                // Get reference to the menu item object
                evt.item;
            }
        }
    ]
});

menuOpenCloseAnimationDuration

タイプ:: number
デフォルト:: 250

IsOpen プロパティが変更されるときにアニメーションを実行する期間を返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    menuOpenCloseAnimationDuration : 350
});  
  
//Get 
var duration_ms = $(".selector").igRadialMenu("option", "menuOpenCloseAnimationDuration");  
  
//Set 
$(".selector").igRadialMenu("option", "menuOpenCloseAnimationDuration", 350);        

menuOpenCloseAnimationEasingFunction

タイプ:: object
デフォルト:: null

IsOpen が変更されるときに発生するアニメーションに適用されるイージング関数を返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    items:
    [
        {
            name: "button1",
            menuOpenCloseAnimationEasingFunction: function (evt) {
                // Get reference to the menu item object
                evt.item;
            }
        }
    ]
});

minWedgeCount

タイプ:: number
デフォルト:: 8

メニューによって表示されるウェッジの最小数を取得または設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    minWedgeCount : 5
});  
  
//Get 
var min_wedges = $(".selector").igRadialMenu("option", "minWedgeCount");  
  
//Set 
$(".selector").igRadialMenu("option", "minWedgeCount", 5);

outerRingFill

タイプ:: string
デフォルト:: null

メニューの外部リングの背景を取得または設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    outerRingFill : "#FF0000"
});  
  
//Get 
var color = $(".selector").igRadialMenu("option", "outerRingFill");  
  
//Set 
$(".selector").igRadialMenu("option", "outerRingFill", "#FF0000"); 

outerRingStroke

タイプ:: string
デフォルト:: null

外部リングのアウトラインのブラシを取得または設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    outerRingStroke : "#FF0000"
});  
  
//Get 
var color = $(".selector").igRadialMenu("option", "outerRingStroke");  
  
//Set 
$(".selector").igRadialMenu("option", "outerRingStroke", "#FF0000"); 

outerRingStrokeThickness

タイプ:: number
デフォルト:: 0

メニューの外部リングのアウトラインの幅を取得または設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    outerRingStrokeThickness : 3
});  
  
//Get 
var thickness = $(".selector").igRadialMenu("option", "outerRingStrokeThickness");  
  
//Set 
$(".selector").igRadialMenu("option", "outerRingStrokeThickness", 3);  

outerRingThickness

タイプ:: number
デフォルト:: 26

メニューの外部リングの太さを取得または設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    outerRingThickness : 35
});  
  
//Get 
var thickness = $(".selector").igRadialMenu("option", "outerRingThickness");  
  
//Set 
$(".selector").igRadialMenu("option", "outerRingThickness", 35);  

pixelScalingRatio

タイプ:

number

デフォルト:

NaN
regional
継承

タイプ:

enumeration

デフォルト:

defaults

ウィジェットの領域設定を取得または設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
regional: "ja"
});
// Get
var regional = $(".selector").igRadialMenu("option", "regional");
// Set
$(".selector").igRadialMenu("option", "regional", "ja");

rotationAsPercentageOfWedge

タイプ:: number
デフォルト:: -0.5

単一のウェッジ/スライスの幅のパーセンテージとして表現される項目の開始角度を返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    rotationAsPercentageOfWedge : 0.5
});  
  
//Get 
var degree = $(".selector").igRadialMenu("option", "rotationAsPercentageOfWedge");  
  
//Set 
$(".selector").igRadialMenu("option", "rotationAsPercentageOfWedge", 0.5);       

rotationInDegrees

タイプ:: number
デフォルト:: -90

項目の開始角度を度数で取得または設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    rotationInDegrees : -180
});  
  
//Get 
var degree = $(".selector").igRadialMenu("option", "rotationInDegrees");  
  
//Set 
$(".selector").igRadialMenu("option", "rotationInDegrees", -180); 

wedgePaddingInDegrees

タイプ:: number
デフォルト:: 0

各ウェッジの周りの余白量を角度で返すか、設定します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    wedgePaddingInDegrees : 15
});  
  
//Get 
var degree = $(".selector").igRadialMenu("option", "wedgePaddingInDegrees");  
  
//Set 
$(".selector").igRadialMenu("option", "wedgePaddingInDegrees", 15); 

Ignite UI コントロールイベントの詳細については、
Ignite UI でイベントを使用するを参照してください。

注: API メソッドの呼び出しは、API ヘルプに特に記述がない限り、操作に関連するイベントはプログラムによって発生されません。これらのイベントは各ユーザー操作によってのみ呼び出されます。

詳細の表示

closed

キャンセル可能:: false

IsOpen プロパティが False に変更したときに発生します。
関数の最初の引数は ui です。
メニューウィジェットへの参照を取得するために ui.owner を使用します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    items:
    [
        {
            name: "button1",
            closed: function (evt) {
                // Get reference to the menu item object
                evt.item;
            }
        }
    ]
});

opened

キャンセル可能:: false

IsOpen プロパティが True に変更したときに発生します。
関数の最初の引数は ui です。
メニューウィジェットへの参照を取得するために ui.owner を使用します。

コードサンプル

//Initialize
$(".selector").igRadialMenu({
    items:
    [
        {
            name: "button1",
            opened: function (evt) {
                // Get reference to the menu item object
                evt.item;
            }
        }
    ]
});

詳細の表示

changeGlobalLanguage
継承

.igRadialMenu( "changeGlobalLanguage" );
ウィジェットの言語をグローバルの言語に変更します。グローバルの言語は $.ig.util.language の値です。
コードサンプル

$(".selector").igRadialMenu("changeGlobalLanguage");
changeGlobalRegional
継承

.igRadialMenu( "changeGlobalRegional" );
ウィジェットの地域設定をグローバルの地域設定に変更します。グローバルの地域設定は $.ig.util.regional にあります。
コードサンプル

$(".selector").igRadialMenu("changeGlobalRegional");
changeLocale
継承

.igRadialMenu( "changeLocale", $container:object );
指定したコンテナーに含まれるすべてのロケールを options.language で指定した言語に変更します。
注: このメソッドは珍しいシナリオのみで使用されます。language または locale オプションのセッターを参照してください。
- $container
- タイプ:object
- オプションのパラメーター: 設定しない場合、ウィジェットの要素を $container として使用します。
コードサンプル

$(".selector").igRadialMenu("changeLocale");
destroy

.igRadialMenu( "destroy" );
ウィジェットを破棄します。
コードサンプル

$(".selector").igRadialMenu("destroy");
exportVisualData

.igRadialMenu( "exportVisualData" );
ユニットテストで支援するためにラジアルメニューからビジュアルデータをエクスポートします。
コードサンプル

var data = $(".selector").igRadialMenu("exportVisualData");
flush

.igRadialMenu( "flush" );
続行の前に保留中の作業をラジアルメニューで描画するように強制します。
コードサンプル

$(".selector").igRadialMenu("flush");
itemOption

.igRadialMenu( "itemOption", itemKey:string, key:string, value:object );

返却型:

object

返却型の説明:

値パラメーターが未定義された場合、プロパティの値。それ以外の場合、プロパティが変更されたかどうかを示すブール値。
指定したキーの作成した項目のプロパティの値を取得または設定します。
- itemKey
- タイプ:string
- 項目の名前。
- key
- タイプ:string
- プロパティ/オプションの名前。
- value
- タイプ:object
- プロパティの新しい値、または現在の値を取得するために undefined。
コードサンプル

//Get
var value = $(".selector").igRadialMenu("itemOption", "optionName");

//Set
$(".selector").igRadialMenu("itemOption", "optionName", "optionValue");
styleUpdated

.igRadialMenu( "styleUpdated" );
メニューの描画で使用されるスタイル設定情報が更新された可能性があることをラジアルメニューに通知します。
コードサンプル

var response = $(".selector").igRadialMenu("styleUpdated");

ui-radialmenu

メイン要素に適用されるクラスを取得します: ui-radialMenu。
ui-radialmenu-tooltip ui-corner-all

ツールチップ要素に適用されるクラス: ui-radialmenu-tooltip ui-corner-all。
ui-html5-non-html5-supported-message ui-helper-clearfix ui-html5-non-html5

radialMenu を HTML5 と互換性のないブラウザーで開いたときに表示されるメイン要素に適用されるクラスを取得します。

Ignite UI for jQuery | API リファレンス

ui.igRadialMenu

コード サンプル

依存関係

継承

コードサンプル