ui.igSplitButton

ui.igSplitButton_image

コード サンプル

<!DOCTYPE HTML>
<html>
<head>
    <title>Split Button Demos</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() {
                $("#split-button-list").igSplitButton({
                    items: [{
                        name: "InsertUnorderedList",
                        label: "Bullets",
                        icon: "ui-igbutton-unorderedlist"
                    }, {
                        name: "InsertOrderedList",
                        label: "Numbering",
                        icon: "ui-igbutton-orderedlist"
                    }],
                    defaultItemName: "InsertUnorderedList"
                });

                $("#split-button-indent").igSplitButton({
                    items: [{
                        name: "indent",
                        label: "Indent",
                        icon: "ui-igbutton-indent"
                    }, {
                        name: "outindent",
                        label: "Out intent",
                        icon: "ui-igbutton-removeindent"
                    }],
                    defaultItemName: "indent"
                });
            }
        });
    </script>
</head>
<body>
    <div id="split-button-list"></div>

    <div id="split-button-indent"></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.toolbarbutton.js

継承

  • defaultItemName

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

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

    コード サンプル

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

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

    ボタン項目。

    コード サンプル

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

      タイプ:
      string
      デフォルト:
      "ui-icon-gear"

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

    • label

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

      項目の表示ラベル。

      コード サンプル

       Moved to GitHub 
    • name

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

      項目名。

      コード サンプル

       Moved to GitHub 
  • 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.owner を使用して 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

    .igSplitButton( "collapse", [e:object] );
    返却型:
    object
    返却型の説明:
    現在の igSplitButton への参照を返します。

    ウィジェットを縮小します。

    • e
    • タイプ:object
    • オプション
    • このアクションを発生させたブラウザー イベントを示します (API 以外)。

    コード サンプル

     
                $(".selector").igSplitButton("collapse", evt);
                 
  • destroy

    .igSplitButton( "destroy" );

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

    コード サンプル

     
                $(".selector").igSplitButton("destroy");
                 
  • expand

    .igSplitButton( "expand", [e:object] );
    返却型:
    object
    返却型の説明:
    現在の igSplitButton への参照を返します。

    ウィジェットを展開します。

    • e
    • タイプ:object
    • オプション
    • このアクションを発生させたブラウザー イベントを示します (API 以外)。

    コード サンプル

     
                $(".selector").igSplitButton("expand", evt);
                 
  • switchToButton

    .igSplitButton( "switchToButton", button:object );

    指定した igToolbar ボタンに切り替えます。

    • button
    • タイプ:object
    • 切り替え先のボタン。

    コード サンプル

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

    .igSplitButton( "toggle", e:object );
    返却型:
    object
    返却型の説明:
    現在の igSplitButton への参照を返します。

    ウィジェット状態を縮小と展開の間で切り替えます。

    • e
    • タイプ:object
    • 展開/縮小する igSplitButton。

    コード サンプル

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

    .igSplitButton( "widget" );

    このウィジェットを表す要素を返します。

    コード サンプル

     $(".selector").igSplitButton("widget"); 
  • ui-state-active

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

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

  • ui-corner-right

  • ui-splitbutton ui-widget ui-state-default

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

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

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

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