ui.igToolbarButton

ui.igToolbarButton_image

コード サンプル

	<!DOCTYPE HTML>
<html>
<head>
    <title>Toolbar 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 () {
                $("#toolbar-button-bold").igToolbarButton({
                    icons: {
                        primary: "ui-igbutton-bold",
                        secondary: null
                    }
                });

                $("#toolbar-button-justifyleft").igToolbarButton({
                    icons: {
                        primary: "ui-igbutton-justifyleft",
                        secondary: null
                    }
                });

                $("#toolbar-button-justifycenter").igToolbarButton({
                    icons: {
                        primary: "ui-igbutton-justifycenter",
                        secondary: null
                    }
                });

                $("#toolbar-button-justifyright").igToolbarButton({
                    icons: {
                        primary: "ui-igbutton-justifyright",
                        secondary: null
                    }
                });

                $("#toolbar-button-justifyfull").igToolbarButton({
                    icons: {
                        primary: "ui-igbutton-justifyfull",
                        secondary: null
                    }
                });
            });
    </script>
</head>
<body>
    <div id="toolbar-button-bold"></div>

    <div id="toolbar-button-justifyleft"></div>

    <div id="toolbar-button-justifycenter"></div>

    <div id="toolbar-button-justifyright"></div>

    <div id="toolbar-button-justifyfull"></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

継承

  • allowToggling

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

    ボタンの切り替えを有効/無効にします。

    コード サンプル

     
                    //Initialize
                    $(".selector").igToolbarButton({
                        allowToggling: true
                    });
    
                    // Get
                    var allowedToggling = $(".selector").igToolbarButton("option", "allowToggling");
    
                    // Set
                    $(".selector").igToolbarButton("option", "allowToggling", false);
                 
  • isSelected

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

    ツールバー ボタンが選択されるかどうかを取得または設定します。

    コード サンプル

     
                    //Initialize
                    $(".selector").igToolbarButton({
                        isSelected: false
                    });
    
                    // Get
                    var isSelected = $(".selector").igToolbarButton("option", "isSelected");
    
                    // Set
                    $(".selector").igToolbarButton("option", "isSelected", true);
                 

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

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

詳細の表示
  • activated

    キャンセル可能:
    false

    ツールバー ボタンのアクティブ化後に発生するイベント。
    関数は引数 evt および ui を受け取ります。
    ui.owner を使用してこの igToolbarButton への参照を取得します。

    コード サンプル

     
                    //Bind after initialization
                    $(document).on("igtoolbarbuttonactivated", ".selector", function(evt, ui) {
                        //use to obtain reference to the event browser
                        evt.originalEvent;
                        //return reference to igToolbarButton
                        ui.owner;
                    });
    
                    $(".selector").igToolbarButton({
                        activated: function(evt, ui) {
                        ...
                        }
                    });
                 
  • activating

    キャンセル可能:
    true

    ツールバー ボタンのアクティブ化前に発生するイベント。
    関数は引数 evt および ui を受け取ります。
    ui.owner を使用してこの igToolbarButton への参照を取得します。

    コード サンプル

     
                    //Bind after initialization
                    $(document).on("igtoolbarbuttonactivating", ".selector", function(evt, ui) {
                        //use to obtain reference to the event browser
                        evt.originalEvent;
                        //return reference to igToolbarButton
                        ui.owner;
                    });
    
                    $(".selector").igToolbarButton({
                        activating: function(evt, ui) {
                        ...
                        }
                    });
                 
  • deactivated

    キャンセル可能:
    false

    ツールバー ボタンの非アクティブ化後に発生するイベント。
    関数は引数 evt および ui を受け取ります。
    ui.owner を使用してこの igToolbarButton への参照を取得します。

    コード サンプル

     
                    $(".selector").igToolbarButton({
                        deactivated: function(evt, ui) {
                            //use to obtain reference to the event browser
                            evt.originalEvent;
                            //return reference to igToolbarButton
                            ui.owner;
                        }
                    });
    
                    //Bind after initialization
                    $(document).on("igtoolbarbuttondeactivated", ".selector", function(evt, ui) {
                        //return reference to igToolbarButton
                        ui.owner;
                    });
                 
  • deactivating

    キャンセル可能:
    true

    ツールバー ボタンの非アクティブ化前に発生するイベント。
    関数は引数 evt および ui を受け取ります。
    ui.owner を使用してこの igToolbarButton への参照を取得します。

    コード サンプル

     
                    $(".selector").igToolbarButton({
                        deactivating: function(evt, ui) {
                            //use to obtain reference to the event browser
                            evt.originalEvent;
                            //return reference to igToolbarButton
                            ui.owner;
                        }
                    });
    
                    $(document).on("igtoolbarbuttondeactivating", ".selector", function(evt, ui) {
                        //return reference to igToolbarButton
                        ui.owner;
                    });
                 
  • activate

    .igToolbarButton( "activate", event:object );

    ツールバー ボタンをアクティブにします。

    • event
    • タイプ:object

    コード サンプル

     
                    $(".selector").igToolbarButton("activate");
                 
  • deactivate

    .igToolbarButton( "deactivate", event:object );

    ツールバー ボタンを非アクティブ化します。

    • event
    • タイプ:object

    コード サンプル

     
                    $(".selector").igToolbarButton("deactivate");
                 
  • destroy

    .igToolbarButton( "destroy" );

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

    コード サンプル

     
                    $(".selector").igToolbarButton("destroy");
                 
  • toggle

    .igToolbarButton( "toggle" );

    ツールバー ボタンを切り替えします。

    コード サンプル

     
                    $(".selector").igToolbarButton("toggle");
                 
  • widget

    .igToolbarButton( "widget" );
    返却型:
    object
    返却型の説明:
    このウィジェットを表す要素を返します。

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

    コード サンプル

     
                    $('.selector').igToolbarButton("widget");
                 
  • ui-igtoolbarbutton

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