ui.igToolbar

ui.igToolbar_image

コード サンプル

<!DOCTYPE HTML>
<html>
<head>
    <title>Toolbar Demo</title>

	<!-- 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.lob.js" type="text/javascript"></script>
    <script type="text/javascript">
			$(function () {
                $('#toolbar').igToolbar({
                    "name": "textToolbar",
                    "displayName": "text manipulation toolbar",
                    "isExpanded": true,
                    "collapseButtonIcon": "ui-igbutton-collapse",
                    "expandButtonIcon": "ui-igbutton-expand",
                    "items": [{
                        "name": "Bold",
                        "type": "button",
                        "scope": null,
                        "props": {
                            "allowToggling": {
                                "value": true
                            },
                            "isBold": {
                                "value": false,
                                "action": "_isSelectedAction"
                            },
                            "boldButtonTooltip": {
                                "value": "Bold",
                                "action": "_tooltipAction"
                            },
                            "boldButtonIcon": {
                                "value": "ui-igbutton-bold",
                                "action": "_buttonIconAction"
                            }
                        }
                    }, {
                        "name": "Italic",
                        "type": "button",
                        "props": {
                            "isItalic": {
                                "value": false,
                                "action": "_isSelectedAction"
                            },
                            "italicButtonTooltip": {
                                "value": "Italic",
                                "action": "_tooltipAction"
                            },
                            "italicButtonIcon": {
                                "value": "ui-igbutton-italic",
                                "action": "_buttonIconAction"
                            }
                        }
                    }, {
                        "name": "Underline",
                        "type": "button",
                        "props": {
                            "isUnderline": {
                                "value": false,
                                "action": "_isSelectedAction"
                            },
                            "underlineButtonTooltip": {
                                "value": "Underline",
                                "action": "_tooltipAction"
                            },
                            "underlineButtonIcon": {
                                "value": "ui-igbutton-underline",
                                "action": "_buttonIconAction"
                            }
                        }
                    }, {
                        "name": "Strikethrough",
                        "type": "button",
                        "props": {
                            "isStrikethrough": {
                                "value": false,
                                "action": "_isSelectedAction"
                            },
                            "strikethroughButtonTooltip": {
                                "value": "Strikethrough",
                                "action": "_tooltipAction"
                            },
                            "strikethroughButtonIcon": {
                                "value": "ui-igbutton-strikethrough",
                                "action": "_buttonIconAction"
                            }
                        }
                    }, {
                        "name": "increasefontsize",
                        "type": "button",
                        "handler": "_increaseFontSize",
                        "props": {
                            "allowToggling": {
                                "value": false
                            },
                            "isIncreaseFont": {
                                "value": false,
                                "action": "_isSelectedAction"
                            },
                            "increaseFontButtonTooltip": {
                                "value": "Increase Font Size",
                                "action": "_tooltipAction"
                            },
                            "increaseFontButtonIcon": {
                                "value": "ui-igbutton-increasefontsize",
                                "action": "_buttonIconAction"
                            }
                        }
                    }, {
                        "name": "decreasefontsize",
                        "type": "button",
                        "handler": "_decreaseFontSize",
                        "props": {
                            "allowToggling": {
                                "value": false
                            },
                            "isDecreaseFont": {
                                "value": false,
                                "action": "_isSelectedAction"
                            },
                            "decreaseFontButtonTooltip": {
                                "value": "Decrease Font Size",
                                "action": "_tooltipAction"
                            },
                            "decreaseFontButtonIcon": {
                                "value": "ui-igbutton-decreasefontsize",
                                "action": "_buttonIconAction"
                            }
                        }
                    }]
                });
            });
    </script>
    <style> 
        #toolbar_collapseButton {
            display: none;
        }
    </style>
</head>
<body>
    <div id="toolbar"></div>
</body>
</html>

依存関係

jquery.js
jquery.ui.core.js
jquery.ui.widget.js
infragistics.util.js
infragistics.util.jquery.js
infragistics.ui.shared.js
infragistics.ui.widget.js
infragistics.ui.popover.js
infragistics.ui.toolbarbutton.js
infragistics.ui.splitbutton.js
infragistics.ui.colorpicker.js
infragistics.ui.colorpickersplitbutton.js
infragistics.ui.combo.js

継承

  • allowCollapsing

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

    ツールバーを最小化できるかどうかを取得または設定します。

    コード サンプル

     
                //Initialize
                $(".selector").igToolbar({
                    allowCollapsing: true
                });

                // Get
                var allowCollapsing = $(".selector").igToolbar("option", "allowCollapsing");

                // Set
                $(".selector").igToolbar("option", "allowCollapsing", false);

  • collapseButtonIcon

    タイプ:
    string
    デフォルト:
    "ui-igbutton-collapsed"

    collapseButtonIcon に適用される CSS クラス。

    コード サンプル

     
                //Initialize
                $(".selector").igToolbar({
                    collapseButtonIcon: "ui-igbutton-collapsed"
                });

                // Get
                var collapseButtonIcon = $(".selector").igToolbar("option", "collapseButtonIcon");

                // Set
                $(".selector").igToolbar("option", "collapseButtonIcon", "ui-igbutton-collapsed");

  • displayName

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

    ウィジェットの表示名。

    コード サンプル

     
                //Initialize
                $(".selector").igToolbar({
                    displayName: "toolbar"
                });

                // Get
                var displayName = $(".selector").igToolbar("option", "displayName");

                // Set
                $(".selector").igToolbar("option", "displayName", "toolbar");

  • expandButtonIcon

    タイプ:
    string
    デフォルト:
    "ui-igbutton-expanded"

    ［展開］/[縮小] ボタンのアイコンに適用される CSS クラス。

    コード サンプル

     
                //Initialize
                $(".selector").igToolbar({
                    expandButtonIcon: "ui-igbutton-expanded"
                });

                // Get
                var expandButtonIcon = $(".selector").igToolbar("option", "expandButtonIcon");

                // Set
                $(".selector").igToolbar("option", "expandButtonIcon", "ui-igbutton-expanded");

  • height

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

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

    コード サンプル

     
                 //Initialize
                $(".selector").igToolbar({
                    height: 200
                });

                // Get
                var height = $(".selector").igToolbar("option", "height");

                // Set
                $(".selector").igToolbar("option", "height", 150);

  • isExpanded

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

    ウィジェットが最初に展開されるかどうかを取得または設定します。

    コード サンプル

     
                //Initialize
                $(".selector").igToolbar({
                    isExpanded: true
                });

                // Get
                var isExpanded = $(".selector").igToolbar("option", "isExpanded");

                // Set
                $(".selector").igToolbar("option", "isExpanded", false);

  • items

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

    ツールバーの項目を取得または設定します。

    コード サンプル

     
                //Initialize
                $(".selector").igToolbar({
                    items: [{
                        "name": "Italic",
                        "type": "button",
                        "props": {
                            "isItalic": {
                                "value": false,
                                "action": "_isSelectedAction"
                            },
                            "italicButtonTooltip": {
                                "value": "Italic",
                                "action": "_tooltipAction"
                            },
                            "italicButtonIcon": {
                                "value": "ui-igbutton-italic",
                                "action": "_buttonIconAction"
                            }
                        },
                        "name": "Italic",
                        "type": "button",
                        "props": {
                            "isItalic": {
                                "value": false,
                                "action": "_isSelectedAction"
                            },
                            "italicButtonTooltip": {
                                "value": "Italic",
                                "action": "_tooltipAction"
                            },
                            "italicButtonIcon": {
                                "value": "ui-igbutton-italic",
                                "action": "_buttonIconAction"
                            }
                        }
                    }]
                });

                // Get
                var items = $(".selector").igToolbar("option", "items");

                // Set
                var items = [{
                                "name": "Italic",
                                "type": "button",
                                "props": {
                                    "isItalic": {
                                        "value": false,
                                        "action": "_isSelectedAction"
                                    },
                                    "italicButtonTooltip": {
                                        "value": "Italic",
                                        "action": "_tooltipAction"
                                    },
                                    "italicButtonIcon": {
                                        "value": "ui-igbutton-italic",
                                        "action": "_buttonIconAction"
                                    }
                                }
                            }];
                $(".selector").igToolbar("option", "items", items);

  • language
    継承

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

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

    コード サンプル

     
					//Initialize
				$(".selector").igToolbar({
					language: "ja"
				});

				// Get
				var language = $(".selector").igToolbar("option", "language");

				// Set
				$(".selector").igToolbar("option", "language", "ja");

  • locale

    タイプ:
    object
    デフォルト:
    {}

    • collapseButtonTitle

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

      縮小ボタンのタイトルを取得または設定します。

      コード サンプル

       
                //Initialize
                $(".selector").igToolbar({
                    locale: {
						collapseButtonTitle: "Collapse {0}"
					}
                });

                // Get
                var text = $(".selector").igToolbar("option", "locale").collapseButtonTitle;

                // Set
                $(".selector").igToolbar("option", "locale", {collapseButtonTitle: "Collapse {0}"});

    • expandButtonTitle

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

      展開ボタンのタイトルを取得または設定します。

      コード サンプル

       
				//Initialize
					$(".selector").igToolbar({
					locale: {
							expandButtonTitle: "Expand {0}"
						}
					});

					// Get
					var text = $(".selector").igToolbar("option", "locale").expandButtonTitle;

					// Set
					$(".selector").igToolbar("option", "locale", {expandButtonTitle: "Expand {0}"});

  • name

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

    ウィジェットの正式名。

    コード サンプル

     
                //Initialize
                $(".selector").igToolbar({
                    name: "textToolbar"
                });

                // Get
                var name = $(".selector").igToolbar("option", "name");

                // Set
                $(".selector").igToolbar("option", "name", "textToolbar");

  • regional
    継承

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

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

    コード サンプル

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

  • width

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

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

    コード サンプル

     
                //Initialize
                $(".selector").igToolbar({
                    width: 100
                });

                // Get
                var width = $(".selector").igToolbar("option", "width");

                // Set
                $(".selector").igToolbar("option", "width", 100);

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

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

詳細の表示

  • collapsed

    キャンセル可能:
    false

    項目が縮小された後に発生するイベント。

    コード サンプル

     
                /Initialize
                $(".selector").igToolbar({
                    collapsed: function (evt, ui) {...}
                });

                //Bind after initialization
                $(document).on("igtoolbarcollapsed", ".selector", function (evt, ui) {
                    //return reference to igToolbar object
                    ui.owner
                    //return type of the event
                    evt.type
                });

  • collapsing

    キャンセル可能:
    true

    イベントは項目が縮小する前に発生します。

    コード サンプル

     
                //Initialize
                $(".selector").igToolbar({
                    collapsing: function (evt, ui) {...}
                });

                //Bind after initialization
                $(document).on("igtoolbarcollapsing", ".selector", function (evt, ui) {
                    //return reference to igToolbar object
                    ui.owner
                    //return type of the event
                    evt.type
                });

  • expanded

    キャンセル可能:
    false

    項目が展開された後に発生するイベント。

    コード サンプル

     
                //Initialize
                $(".selector").igToolbar({
                    expanded: function (evt, ui) {...}
                });

                //Bind after initialization
                $(document).on("igtoolbarexpanded", ".selector", function (evt, ui) {
                    //return reference to igToolbar object
                    ui.owner
                    //return type of the event
                    evt.type
                });

  • expanding

    キャンセル可能:
    true

    項目が展開する前に発生するイベント。

    コード サンプル

     
                //Initialize
                $(".selector").igToolbar({
                    expanding: function (evt, ui) {...}
                });

                //Bind after initialization
                $(document).on("igtoolbarexpanding", ".selector", function (evt, ui) {
                    //return reference to igToolbar object
                    ui.owner
                    //return type of the event
                    evt.type
                });

  • itemAdded

    キャンセル可能:
    false

    項目が追加された後に発生するイベント。

    コード サンプル

     
                //Initialize
                $(".selector").igToolbar({
                    itemAdded: function (evt, ui) {...}
                });

                //Bind after initialization
                $(document).on("igtoolbaritemadded", ".selector", function (evt, ui) {
                    //return reference to igToolbar object
                    ui.owner
                    //return type of the event
                    evt.type
                });

  • itemDisable

    キャンセル可能:
    false

    項目が無効された後に発生します。

    コード サンプル

     
                //Initialize
                $(".selector").igToolbar({
                    itemDisable: function (evt, ui) {...}
                });

                //Bind after initialization
                $(document).on("igtoolbaritemdisable", ".selector", function (evt, ui) {
                    //return reference to igToolbar object
                    ui.owner
                    //return type of the event
                    evt.type
                });

  • itemEnabled

    キャンセル可能:
    false

    項目が有効された後に発生します。

    コード サンプル

     
                //Initialize
                $(".selector").igToolbar({
                    itemEnabled: function (evt, ui) {...}
                });

                //Bind after initialization
                $(document).on("igtoolbaritemenabled", ".selector", function (evt, ui) {
                    //return reference to igToolbar object
                    ui.owner
                    //return type of the event
                    evt.type
                });

  • itemRemoved

    キャンセル可能:
    false

    項目が削除された後に発生するイベント。

    コード サンプル

     
                //Initialize
                $(".selector").igToolbar({
                    itemRemoved: function (evt, ui) {...}
                });

                //Bind after initialization
                $(document).on("igtoolbaritemremoved", ".selector", function (evt, ui) {
                    //return reference to igToolbar object
                    ui.owner
                    //return type of the event
                    evt.type
                });

  • toolbarButtonClick

    キャンセル可能:
    false

    ツールバー ボタンのクリックの後に発生するイベント。

    コード サンプル

     
                //Initialize
                $(".selector").igToolbar({
                    toolbarButtonClick: function (evt, ui) {...}
                });

                //Bind after initialization
                $(document).on("igtoolbartoolbarbuttonclick", ".selector", function (evt, ui) {
                    //return reference to igToolbar object
                    ui.owner
                    //return type of the event
                    evt.type
                });

  • toolbarComboOpening

    キャンセル可能:
    true

    イベントはツールバーが開かれる前に発生します。

    コード サンプル

     
                //Initialize
                $(".selector").igToolbar({
                    toolbarComboOpening: function (evt, ui) {...}
                });

                //Bind after initialization
                $(document).on("igtoolbartoolbarcomboopening", ".selector", function (evt, ui) {
                    //return reference to igToolbar object
                    ui.owner
                    //return type of the event
                    evt.type
                });

  • toolbarComboSelected

    キャンセル可能:
    false

    ツールバー コンボの選択後に発生するイベント。

    コード サンプル

     
                //Initialize
                $(".selector").igToolbar({
                    toolbarComboSelected: function (evt, ui) {...}
                });

                //Bind after initialization
                $(document).on("igtoolbartoolbarcomboselected", ".selector", function (evt, ui) {
                    //return reference to igToolbar object
                    ui.owner
                    //return type of the event
                    evt.type
                });

  • toolbarCustomItemClick

    キャンセル可能:
    false

    カスタム項目にクリックされた後に発生するイベント。

    コード サンプル

     
                //Initialize
                $(".selector").igToolbar({
                    toolbarCustomItemClick: function (evt, ui) {...}
                });

                //Bind after initialization
                $(document).on("igtoolbartoolbarcustomitemclick", ".selector", function (evt, ui) {
                    //return reference to igToolbar object
                    ui.owner
                    //return type of the event
                    evt.type
                });

  • windowResized

    キャンセル可能:
    false

    ウィンドウがサイズ変更された後に発生します。

    コード サンプル

     
                //Initialize
                $(".selector").igToolbar({
                    windowResized: function (evt, ui) {...}
                });

                //Bind after initialization
                $(document).on("igtoolbarwindowresized", ".selector", function (evt, ui) {
                    //return type of the event
                    evt.type
                });

  • activateItem

    .igToolbar( "activateItem", index:object, activated:object );

    提供したインデックスと一致する項目をアクティブ化します。

    • index
    • タイプ:object
    • 項目のインデックス。
    • activated
    • タイプ:object
    • 有効にされたプロパティ値。

    コード サンプル

     
                // Set item to be active
                $(".selector").igToolbar("activateItem", 0, true);

                // Set item to be inactive
                $(".selector").igToolbar("activateItem", 0, false);

  • addItem

    .igToolbar( "addItem", item:object );

    ウィジェット項目の配列に項目を追加します。

    • item
    • タイプ:object
    • 追加される項目。

    コード サンプル

     
                $(".selector").igToolbar("addItem", {
					"name": "Italic",
					"type": "button",
					"props": {
						"isItalic": {
							"value": false,
							"action": "_isSelectedAction"
						},
						"italicButtonTooltip": {
							"value": "Italic",
							"action": "_tooltipAction"
						},
						"italicButtonIcon": {
							"value": "ui-igbutton-italic",
							"action": "_buttonIconAction"
						}
					}
				});

  • changeGlobalLanguage
    継承

    .igToolbar( "changeGlobalLanguage" );

    ウィジェットの言語をグローバルの言語に変更します。グローバルの言語は $.ig.util.language の値です。

    コード サンプル

     
				$(".selector").igToolbar("changeGlobalLanguage");

  • changeGlobalRegional
    継承

    .igToolbar( "changeGlobalRegional" );

    ウィジェットの地域設定をグローバルの地域設定に変更します。グローバルの地域設定は $.ig.util.regional にあります。

    コード サンプル

     
				$(".selector").igToolbar("changeGlobalRegional");

  • changeLocale

    .igToolbar( "changeLocale" );

  • deactivateAll

    .igToolbar( "deactivateAll" );

    すべてのボタンを非アクティブ化します。

    コード サンプル

     
                $(".selector").igToolbar("deactivateAll");

  • destroy

    .igToolbar( "destroy" );

    ウィジェットを破棄します。

    コード サンプル

     
                $(".selector").igToolbar("destroy");

  • disableItem

    .igToolbar( "disableItem", index:object, disabled:object );

    提供したインデックスと一致する項目を無効にします。

    • index
    • タイプ:object
    • 項目のインデックス。
    • disabled
    • タイプ:object
    • 無効にされたプロパティ値。

    コード サンプル

     
                // Set item to be disabled
                $('.selector').igToolbar('disableItem', 0, true);

                // Set item to be not disabled
                $('.selector').igToolbar('disableItem', 0, false);

  • getItem

    .igToolbar( "getItem", index:object );
    返却型:
    object
    返却型の説明:
    指定したインデックスを持つ項目。

    提供したインデックスと一致する項目を取得します。

    • index
    • タイプ:object
    • 項目のインデックス。

    コード サンプル

     
                $(".selector").igToolbar("getItem", 0);

  • removeItem

    .igToolbar( "removeItem", index:object );
    返却型:
    object
    返却型の説明:
    指定したインデックスを持つ項目。

    指定したインデックスと一致する項目を削除します。

    • index
    • タイプ:object
    • 項目のインデックス。

    コード サンプル

     
                $(".selector").igToolbar("removeItem", 0);

  • widget

    .igToolbar( "widget" );

    ウィジェットがインスタンス化された要因を返します。

    コード サンプル

     
                $(".selector").igToolbar("widget");

  • ig-toolbar-buttons-holder

    ウィジェットのツールバー ボタン ホルダーの css クラス。

  • ig-toolbar-separator ui-widget-content

    ウィジェットのツールバー セパレーター クラス css。

  • ui-state-default ui-igbutton-all-caps

    ウィジェットの縮小ボタン クラス css。

  • ui-widget ui-widget-content ui-igtoolbar ui-corner-all

    ウィジェット基本クラス css。

  • ui-widget ui-widget-content ui-igtoolbar ui-corner-all

    ウィジェット ラッパー クラス css。

Copyright © 1996 - 2024 Infragistics, Inc. All rights reserved.