Ignite UI™ API ヘルプ

ui.igToolbar

コードサンプル

<!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-1.9.1.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

継承

jQuery.widget

詳細の表示

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。

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

ui.igToolbar

コード サンプル

依存関係

継承

コードサンプル