ui.igColorPickerSplitButton

ui.igColorPickerSplitButton_image

コード サンプル

<!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.ui.shared.js
infragistics.ui.popover.js
infragistics.ui.toolbarbutton.js
infragistics.ui.splitbutton.js
infragistics.ui.colorpicker.js

継承

  • defaultColor

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

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

    コード サンプル

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

  • defaultItemName
    継承

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

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

    コード サンプル

     
        //Initialize
        $(".selector").igColorPickerSplitButton({
            defaultItemName: "SplitButton"
        });
 
        // Get
        var defaultItemName = $(".selector").igColorPickerSplitButton("option", "defaultItemName");
 
        // Set
        $(".selector").igColorPickerSplitButton("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").igColorPickerSplitButton({
            swapDefaultEnabled: true
        });
		
        //Get 
        var swapDefaultEnabled = $(".selector").igColorPickerSplitButton("option", "swapDefaultEnabled");  
 
        //Set 
        $(".selector").igColorPickerSplitButton("option", "swapDefaultEnabled", true);

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

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

詳細の表示

  • click
    継承

    キャンセル可能:
    false

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

    コード サンプル

     
        //Initialize
        $(".selector").igColorPickerSplitButton({
            click: function (evt, ui) {...}
        });
            
        //Delegate
        $(document).delegate(".selector", "igcolorpickersplitbuttonclick", function (evt, ui) {
            //return reference to color object
            ui.owner
				    //return type of the event
				    evt.type
        });

  • collapsed
    継承

    キャンセル可能:
    false

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

    コード サンプル

     
          //Initialize
          $(".selector").igColorPickerSplitButton({
              collapsed: function (evt, ui) {...}
          });
            
          //Delegate
          $(document).delegate(".selector", "igcolorpickersplitbuttonclick", function (evt, ui) {
              //return reference to igColorPickerSplitButton object
              ui.owner
				      //return type of the event
				      evt.type
          });

  • collapsing
    継承

    キャンセル可能:
    true

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

    コード サンプル

     
        //Initialize
        $(".selector").igColorPickerSplitButton({
            collapsing: function (evt, ui) {...}
        });
            
        //Delegate
        $(document).delegate(".selector", "igcolorpickersplitbuttonclick", function (evt, ui) {
            //return reference to igSplitButton object
            ui.owner
				    //return type of the event
				    evt.type
        });

  • expanded
    継承

    キャンセル可能:
    false

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

    コード サンプル

     
          //Initialize
          $(".selector").igColorPickerSplitButton({
              expanded: function (evt, ui) {...}
          });
            
          //Delegate
          $(document).delegate(".selector", "igcolorpickersplitbuttonclick", function (evt, ui) {
              //return reference to igColorPickerSplitButton object
              ui.owner
				      //return type of the event
				      evt.type
          });

  • expanding
    継承

    キャンセル可能:
    true

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

    コード サンプル

     
          //Initialize
          $(".selector").igColorPickerSplitButton({
              expanding: function (evt, ui) {...}
          });
            
          //Delegate
          $(document).delegate(".selector", "igcolorpickersplitbuttonclick", function (evt, ui) {
              //return reference to igColorPickerSplitButton object
              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").igColorPickerSplitButton("switchToButton", jQueryObjButton);

  • 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。

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