Ignite UI™ API ヘルプ

ui.igColorPickerSplitButton

コードサンプル

<!DOCTYPE HTML>
<html>
<head>
    <title>Color Picker Split Button 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 () {
            $("#color-picker-split-forecolor").igColorPickerSplitButton({
                items: [{
                    name: "textColor",
                    label: "Font Color",
                    icon: "ui-igbutton-forecolor"
                }],
                defaultItemName: "textColor",
                selectedTextColor: "red"
            });
 
            $("#color-picker-split-backcolor").igColorPickerSplitButton({
                items: [{
                    name: "backgroundColor",
                    label: "Background Color",
                    icon: "ui-igbutton-backcolor"
                }],
                defaultItemName: "backgroundColor",
                selectedTextColor: "red"
            });
        });
    </script>
    <style>
        body {
            margin-left: 150px;
        }
    </style>
</head>
<body>
    <div id="color-picker-split-forecolor"></div>
    <div id="color-picker-split-backcolor"></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.popover.js

infragistics.ui.toolbarbutton.js

infragistics.ui.splitbutton.js

infragistics.ui.colorpicker.js

継承

jQuery.widget

詳細の表示

defaultColor

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

ボタンのデフォルト色値を取得または設定します。

コードサンプル

// Initialize
$(".selector").igColorPickerSplitButton({
    defaultColor: "rgb(255, 255, 255)";
});
// Get
var defaultColor = $(".selector").igColorPickerSplitButton("option", "defaultColor");
// Set
$(".selector").igColorPickerSplitButton("option", "defaultColor", "#000");

defaultItemName
継承

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

デフォルトのボタン項目名。

コードサンプル

// Initialize
$(".selector").igColorPickerSplitButton({
    defaultItemName: "SplitButton",
});
// Get
var defaultItemName = $(".selector").igSplitButton("option", "defaultItemName");
// Set
$(".selector").igSplitButton("option", "defaultItemName", "SplitButton");

hasDefaultIcon

タイプ:

bool

デフォルト:

true

このオプションが true に設定される場合、igColorPickerSplitButton はアイコンと描画されます。

コードサンプル

// Initialize
$(".selector").igColorPickerSplitButton({
hasDefaultIcon: false;
});
// Get
var defaultIcon = $(".selector").igColorPickerSplitButton("option", "hasDefaultIcon");

items

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

ボタン項目。

コードサンプル

// Initialize
$(".selector").igColorPickerSplitButton({
    items: [{
        name: "textColor",
        label: "Font Color",
        iconClass: "ui-igbutton-forecolor"
    }]
});
// Get
var items = $(".selector").igColorPickerSplitButton("option", "items");

iconClass
継承

タイプ:

string

デフォルト:

"ui-icon-gear"

項目の iconClass を表す CSS クラス。
label
継承

タイプ:

string

デフォルト:

"Button 1"

項目の表示ラベル。
name
継承

タイプ:

string

デフォルト:

"button1"

項目名。

swapDefaultEnabled
継承

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

その他のボタンが選択されたとき、デフォルトボタンを切り替えるかどうかを指定します。

コードサンプル

//Initialize
$(".selector").igSplitButton({
    swapDefaultEnabled: true
});
// Get
var swapDefaultEnabled = $(".selector").igSplitButton("option", "swapDefaultEnabled");
// Set
$(".selector").igSplitButton("option", "swapDefaultEnabled", true);

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

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

詳細の表示

click
継承

キャンセル可能:: false

イベントは、ボタンがクリックされると発生します。関数には引数 evt および ui が必要です。ui.item を使用して、igSplitButton 要素への参照を取得します。

コードサンプル

//Initialize
$(".selector").igSplitButton({
    click: function (evt, ui) {...}
});
//Bind after initialization
$(document).on("igsplitbuttonclick", ".selector", function (evt, ui) {
    // return reference to the igSplitButton element
    ui.item
    // return type of the event
    evt.type
});

collapsed
継承

キャンセル可能:: false

ボタンの縮小後に発生するイベント。関数は引数 evt および ui を受け取ります。ui.owner を使用して igSplitButton への参照を取得します。

コードサンプル

//Initialize
$(".selector").igSplitButton({
    collapsed: function (evt, ui) {...}
});
//Bind after initialization
$(document).on("igsplitcollapsed", ".selector", function (evt, ui) {
    // return reference to the igSplitButton
    ui.owner
    // return type of the event
    evt.type
});

collapsing
継承

キャンセル可能:: true

ボタン項目が縮小される前に発生するイベント。関数は引数 evt および ui を受け取ります。ui.owner を使用して igSplitButton への参照を取得します。

コードサンプル

//Initialize
$(".selector").igSplitButton({
    collapsing: function (evt, ui) {...}
});
//Bind after initialization
$(document).on("igsplitcollapsing", ".selector", function (evt, ui) {
    // return reference to the igSplitButton
    ui.owner
    // return type of the event
    evt.type
});

expanded
継承

キャンセル可能:: false

ボタンの展開後に発生するイベント。関数は引数 evt および ui を受け取ります。ui.owner を使用して igSplitButton への参照を取得します。

コードサンプル

//Initialize
$(".selector").igSplitButton({
    expanded: function (evt, ui) {...}
});
//Bind after initialization
$(document).on("igsplitexpanded", ".selector", function (evt, ui) {
    // return reference to the igSplitButton
    ui.owner
    // return type of the event
    evt.type
});

expanding
継承

キャンセル可能:: true

ボタン項目が展開される前に発生するイベント。関数は引数 evt および ui を受け取ります。ui.owner を使用して igSplitButton への参照を取得します。

コードサンプル

//Initialize
$(".selector").igSplitButton({
    expanding: function (evt, ui) {...}
});
//Bind after initialization
$(document).on("igsplitexpanding", ".selector", function (evt, ui) {
    // return reference to the igSplitButton
    ui.owner
    // return type of the event
    evt.type
});

詳細の表示

collapse

.igColorPickerSplitButton( "collapse", e:object );

返却型:

object

返却型の説明:

igColorPickerSplitButton への参照を返します。
ウィジェットを縮小します。
- e
- タイプ:object
コードサンプル

$(".selector").igColorPickerSplitButton("collapse");
destroy

.igColorPickerSplitButton( "destroy" );

返却型:

object

返却型の説明:

エディターに初期化される要素への参照、または null 値、を返します。
ウィジェットを破棄します。
コードサンプル

$(".selector").igColorPickerSplitButton("destroy");
expand

.igColorPickerSplitButton( "expand", e:object );

返却型:

object

返却型の説明:

igColorPickerSplitButton への参照を返します。
ウィジェットを展開します。
- e
- タイプ:object
コードサンプル

$(".selector").igColorPickerSplitButton("expand");
setColor

.igColorPickerSplitButton( "setColor", color:string );

返却型:

object

返却型の説明:

igColorPickerSplitButton への参照を返します。
分割ボタンの色を設定します。
- color
- タイプ:string
- 設定する色値。
コードサンプル

$(".selector").igColorPickerSplitButton("setColor", "#f12cf0);
switchToButton
継承

.igColorPickerSplitButton( "switchToButton", button:object );
指定した igToolbar ボタンに切り替えます。
- button
- タイプ:object
- ボタン jQuery 要素。
コードサンプル

$(".selector").igSplitButton("switchToButton", $element);
toggle
継承

.igColorPickerSplitButton( "toggle", e:object );

返却型:

object

返却型の説明:

現在の igSplitButton への参照を返します。
ウィジェット状態を縮小と展開の間で切り替えます。
- e
- タイプ:object
- 展開/縮小する igSplitButton。
コードサンプル

$(".selector").igSplitButton( "toggle", e:object );
widget
継承

.igColorPickerSplitButton( "widget" );
このウィジェットを表す要素を返します。
コードサンプル

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

ui-state-active

ウィジェット基本要素のアクティブ状態の css。
ui-splitbutton-arrow

ウィジェットの矢印 css。
ui-corner-left

ウィジェットの左 div 要素 css。
ui-corner-right

ウィジェットの右 div 要素 css。
ui-splitbutton ui-widget ui-state-default

ウィジェット基本クラス css。
ui-state-focus

ウィジェット基本要素のフォーカス状態の css。
ui-splitbutton-hover

ウィジェット基本要素のホバー状態の css。

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

ui.igColorPickerSplitButton

コード サンプル

依存関係

継承

コードサンプル