ui.igTileManager

ui.igTileManager_image
igTileManager は、データをタイルに処理して描画するレイアウト コントロールです。タイルはレスポンシブ グリッド レイアウトで表示され、コントロールは各タイルに対応するレイアウト構成を提供します。位置 (行スパンと列スパン) およびディメンション (行位置と列位置) を設定します。以下のコード スニペットは、igTileManager コントロールを初期化する方法を示します。

コード サンプル

 
<!doctype html>
<html>
<head>
    <!-- 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">
        var dataSource = [
			    {
				    name: 'Douglas Crockford', 
				    text: 'Douglas Crockford is an American computer programmer and entrepreneur who is best known for his ongoing involvement in the development of the JavaScript language, for having popularized the data format JSON (JavaScript Object Notation), and for developing various JavaScript related tools such as JSLint and JSMin. He is currently a senior JavaScript architect at PayPal, and is also a writer and speaker on JavaScript, JSON, and related web technologies such as the Yahoo! User Interface Library (YUI).',
				    skills: [
					    {description: 'JavaScript'},
					    {description: 'JSON'},
					    {description: 'HTML'},
					    {description: 'JSLint'}
				    ],
				    picture: 'http://www.caloni.com.br/blog/wp-content/uploads/crockford.png', 
				    linkedin: 'http://www.linkedin.com/groups?gid=3165057&trk=group-name'
			    },
			    {
				    name: 'John Resig',
				    text: 'John Resig is the Dean of Computer Science at Khan Academy and the creator of the jQuery JavaScript library. He\'s also the author of the books Pro JavaScript Techniques and Secrets of the JavaScript Ninja. Currently, John is located in Brooklyn, NY and enjoys studying Ukiyo-e (Japanese Woodblock Printing) in his spare time.',
				    skills: [
					    {description: 'JavaScript'},
					    {description: 'JSON'},
					    {description: 'HTML'},
					    {description: 'jQuery'}
				    ],
				    picture: 'http://4.bp.blogspot.com/-0lrkys7OhZk/TZpreRxfdRI/AAAAAAAAATw/p5wLKETGAV8/s640/John_Resig-1-2.jpg',
				    linkedin: 'http://www.linkedin.com/groups?viewMembers=&gid=100943&sik=1360507269893&goback=%2Eanp_100943_1360507269892_1'
			    },
			    {
				    name: 'Bill Gates',
				    text: 'William Henry "Bill" Gates III (born October 28, 1955) is an American programmer, inventor, business magnate and philanthropist. Gates is the former chief executive and current chairman of Microsoft, the world\'s largest personal-computer software company, which he co-founded with Paul Allen. He is consistently ranked among the world\'s wealthiest people and was the wealthiest overall from 1995 to 2009, excluding 2008, when he was ranked third; in 2011 he was the wealthiest American and the second wealthiest person. During his career at Microsoft, Gates held the positions of CEO and chief software architect, and remains the largest individual shareholder, with 6.4 percent of the common stock. He has also authored and co-authored several books.',
				    skills: [
					    {description: 'Entrepreneurship'},
					    {description: 'VB'},
					    {description: 'Operating Systems'},
					    {description: 'Programming Languages'}
				    ],
				    picture: 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTsQmMNuOjP0IQwB-i_zomFPeFuIuIk8bhetuZdecvi9RtJ34-g',
				    linkedin: 'http://www.linkedin.com/company/8736?trk=tyah'
			    },
			    {
				    name: 'Jon Skeet', 
				    text: 'Author of C# in Depth. Currently a software engineer at Google, London. Usually a Microsoft MVP (C#, 2003-2010, 2011-)',
				    skills: [
				       { description: 'C#' },
				       { description: '.NET' },
				       { description: 'Java' }
				    ],
				    picture: 'http://www.dnrtv.com/dnr_photos/JonSkeet.jpg',
				    linkedin: 'uk.linkedin.com/pub/jon-skeet/0/800/ba3'
			    }
		    ]; 

        $(function () {
            $('#dashboard').igTileManager({
              columnWidth: '50%',
              columnHeight: '50%',
              marginLeft: 10,
              marginTop: 10,
              height: 1000,
              width : 600,
              dataSource: dataSource,
              minimizedState: '<h3>${name}</h3><img src="${picture}" title="${name}" alt="error" />',
              maximizedState: '<h3>${name}</h3><img src="${picture}" title="${name}" alt="error" /><p>${text}</p>' +
                '<div style="clear: both">Skills:</div>' +
                '<ul>{{each ${skills} }}<li>${skills.description}</li>{{/each}}</ul>' +
                '<div>LinkedIn: <a href="${linkedin}" target="_blank">http://www.linkedin.com/profile</a></div>'
			});
        });
    </script>
</head>
<body>
    <div id="dashboard"></div>
</body>
</html>
    

関連サンプル

関連トピック

依存関係

jquery-1.9.1.js
jquery.ui.core.js
jquery.ui.widget.js
infragistics.templating.js
infragistics.datasource.js
infragistics.util.js
infragistics.util.jquery.js
infragistics.ui.widget.js
infragistics.ui.splitter.js
infragistics.ui.layoutmanager.js
infragistics.ui.tilemanager-en.js

継承

  • animationDuration

    タイプ:
    number
    デフォルト:
    500

    タイル マネージャーのアニメーションの期間を取得または設定します。

    コード サンプル

     
                    //Initialize
                    $(".selector").igTileManager({
                        animationDuration : 1000
                        });
    
                    //Get
                    var animationDuration = $(".selector").igTileManager("option", "animationDuration");
    
                    //Set
                    $(".selector").igTileManager("option", "animationDuration", 1000);
                 
  • cols

    タイプ:
    enumeration
    デフォルト:
    null

    コンテナーの列数を取得または設定します。

    メンバー

    • null
    • タイプ:object
    • 列数が自動的に計算されます。
    • number
    • タイプ:number
    • 列数は数値として設定できます。

    コード サンプル

     
                    //Initialize
                    $('.selector').igTileManager({
                        cols: 5
                    });
                    //Get
                    var cols = igTileManager("option", "cols");
                    //Set
                    $igTileManager("option", "cols", 5);
                 
  • columnHeight

    タイプ:
    enumeration
    デフォルト:
    null

    コンテナーの各列の高さを取得または設定します。

    メンバー

    • string
    • タイプ:string
    • 列の高さを数値、ピクセル (px)、パーセンテージ (%)、またはすべての列の間に高さを分割する * によって設定できます。
    • number
    • タイプ:number
    • 列高さをピクセル単位を表す数字に設定できます。
    • array
    • タイプ:array
    • 列の高さは各列の高さを指定する配列として設定できます。1 つ以上の列が * 値を持つ場合、残りの高さは列で均等に分割されます。
    • null
    • タイプ:object
    • 列の高さがコンテナーの高さおよびその他のオプションに基づいて計算されます。

    コード サンプル

     
                    //Initialize
                    $('.selector').igTileManager({
                        columnHeight: 150
                    });
                    //Get
                    var columnHeight = igTileManager("option", "columnHeight");
                    //Set
                    $igTileManager("option", "columnHeight", 150);
                 
  • columnWidth

    タイプ:
    enumeration
    デフォルト:
    null

    コンテナーの各列の幅を取得または設定します。

    メンバー

    • string
    • タイプ:string
    • 列幅を数値、ピクセル (px)、パーセンテージ (%)、またはすべての列の間に幅を分割する * によって設定できます。
    • number
    • タイプ:number
    • 列幅をピクセル単位を表す数字に設定できます。
    • array
    • タイプ:array
    • 列幅は各列幅を指定する配列として設定できます。1 つ以上の列が * 値を持つ場合、残りの幅は列で均等に分割されます。
    • null
    • タイプ:object
    • 列幅がコンテナー幅およびその他のオプションに基づいて計算されます。

    コード サンプル

     
                    //Initialize
                    $('.selector').igTileManager({
                        columnWidth: 150
                    });
                    //Get
                    var columnWidth = igTileManager("option", "columnWidth");
                    //Set
                    $igTileManager("option", "columnWidth", 150);
                 
  • dataSource

    タイプ:
    object
    デフォルト:
    null

    $.ig.DataSource が受け入れる有効なデータ ソース、または $.ig.DataSource 自体のインスタンスを指定します。

    コード サンプル

     
                    //Initialize
                    $(".selector").igTileManager({
                        dataSource : data
                    });
    
                    //Get
                    var data = $(".selector").igTileManager("option", "dataSource");
    
                    //Set
                    var dataSource = data;
                    $(".selector").igTileManager("option", "dataSource", dataSource);
                 
  • dataSourceType

    タイプ:
    string
    デフォルト:
    null

    データ ソースのタイプ ("json" など) を明示的に設定します。$.ig.DataSource 型とその type プロパティのドキュメントを参照してください。

    コード サンプル

     
                    //Initialize
                    $(".selector").igTileManager({
                        dataSourceType : "xml"
                    });
    
                    //Get
                    var type = $(".selector").igTileManager("option", "dataSourceType");
    
                    //Set
                    var type = "xml";
                    $(".selector").igTileManager("option", "dataSourceType", type);
                 
  • dataSourceUrl

    タイプ:
    string
    デフォルト:
    null

    $.ig.DataSource からデータを要求するには、$.ig.DataSource により承諾されたリモート URL を指定します。

    コード サンプル

     
                    //Initialize
                    $(".selector").igTileManager({
                        dataSourceUrl : "data.svc"
                    });
    
                    //Get
                    var url = $(".selector").igTileManager("option", "dataSourceUrl");
    
                    //Set
                    var url = "data.svc";
                    $(".selector").igTileManager("option", "dataSourceUrl", url);
                 
  • height

    タイプ:
    enumeration
    デフォルト:
    null

    コンテナーの高さを取得または設定します。

    メンバー

    • string
    • タイプ:string
    • 高さと幅はピクセル (px) およびパーセント (%) で設定できます。
    • number
    • タイプ:number
    • 高さと幅は数値としてピクセルで設定できます。
    • null
    • タイプ:object
    • 高さと幅をピクセル単位の数字に設定できます。

    コード サンプル

     
                    //Initialize
                    $(".selector").igTileManager({
                        height : 400
                    });
                    //Get
                    var height = $(".selector").igTileManager("option", "height");
                    //Set
                    $(".selector").igTileManager("option", "height", 400);
                 
  • items

    タイプ:
    enumeration
    デフォルト:
    null

    タイルの構成を取得または設定します。各タイルは rowSpan、colSpan、rowIndex、および colIndex によって記述されます。

    メンバー

    • array
    • タイプ:object
    • 各タイルの colSpan、rowSpan、colIndex、rowIndex 構成を持つ配列。
    • null
    • タイプ:object
    • rowSpan: 1 および colSpan: 1 のデフォルト タイル構成が使用されます。

    コード サンプル

     
                    //Initialize
                    $('.selector').igTileManager({
                            items: [{ colSpan: 1, rowSpan: 1, colIndex: 0, rowIndex: 0 },
                                    { colSpan: 2, rowSpan: 1, colIndex: 1, rowIndex: 0 },
                                    { colSpan: 3, rowSpan: 2, colIndex: 0, rowIndex: 1 },
                                    { colSpan: 3, rowSpan: 1, colIndex: 0, rowIndex: 3 }]
                    });
                    //Get
                    var items = igTileManager("option", "items");
                    //Set
                    //Items configuration can be set when the new configuration matches the number of items in the old configuration
                    var items = [{ colSpan: 1, rowSpan: 1, colIndex: 0, rowIndex: 0 },
                                    { colSpan: 2, rowSpan: 1, colIndex: 1, rowIndex: 0 },
                                    { colSpan: 3, rowSpan: 2, colIndex: 0, rowIndex: 1 },
                                    { colSpan: 3, rowSpan: 1, colIndex: 0, rowIndex: 3 }];
                    $('.selector').igTileManager("option", "items", items);
                 
  • language
    継承

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

    ウィジェットのロケール言語設定を取得または設定します。

    コード サンプル

     
    					//Initialize
    				$(".selector").igTileManager({
    					language: "ja"
    				});
    
    				// Get
    				var language = $(".selector").igTileManager("option", "language");
    
    				// Set
    				$(".selector").igTileManager("option", "language", "ja");
    			 
  • locale
    継承

    タイプ:
    object
    デフォルト:
    null

    ウィジェットのロケール設定を取得または設定します。

    コード サンプル

     
    					//Initialize
    				$(".selector").igTileManager({
    					locale: {}
    				});
    
    				// Get
    				var locale = $(".selector").igTileManager("option", "locale");
    
    				// Set
    				$(".selector").igTileManager("option", "locale", {});
    			 
  • marginLeft

    タイプ:
    number
    デフォルト:
    0

    タイル間の水平スペースを取得または設定します。

    number - タイル間の水平スペースを数値として設定できます。

    コード サンプル

     
                    //Initialize
                    $(".selector").igTileManager({
                        marginLeft : 15
                    });
    
                    //Get
                    var marginLeft = $(".selector").igTileManager("option", "marginLeft");
    
                    //Set
                    $(".selector").igTileManager("option", "marginLeft", 15);
                 
  • marginTop

    タイプ:
    number
    デフォルト:
    0

    タイル間の垂直スペースを取得または設定します。

    number - タイル間の垂直スペースを数値として設定できます。

    コード サンプル

     
                    //Initialize
                    $(".selector").igTileManager({
                        marginTop : 15
                    });
    
                    //Get
                    var marginTop = $(".selector").igTileManager("option", "marginTop");
    
                    //Set
                    $(".selector").igTileManager("option", "marginTop", 15);
                 
  • maximizedState

    タイプ:
    enumeration
    デフォルト:
    null

    最大状態のタイルのコンテンツを取得または設定します。

    メンバー

    • string
    • タイプ:string
    • HTML マークアップで初期化する場合、最大状態で表示するタイルの要素を指定する jQuery セレクターを提供する必要があります。データ ソースで初期化する場合、最大状態のために描画される igTemplate を提供する必要があります。
    • null
    • タイプ:object
    • 最大状態のタイルのコンテンツを全体表示します。

    コード サンプル

     
                    //Initialize
                    $('.selector').igTileManager({
                        maximizedState : 'div'
                    });
                    //Get
                    var maximizedState = $('.selector').igTileManager("option", "maximizedState");
                    //Set
                    var maximizedState = 'div';
                    $('.selector').igTileManager("option", "maximizedState", maximizedState);
                 
  • maximizedTileIndex

    タイプ:
    enumeration
    デフォルト:
    null

    最大タイルの配置とサイズ変更のために使用する項目構成のインデックスを取得または設定します。

    メンバー

    • number
    • タイプ:number
    • maximizedTileIndex を数字で設定できます。
    • null
    • タイプ:object
    • このオプションは無視されます。

    コード サンプル

     
                    //Initialize
                    $('.selector').igTileManager({
                            items: [{ colSpan: 1, rowSpan: 1, colIndex: 0, rowIndex: 0 },
                                { colSpan: 2, rowSpan: 1, colIndex: 1, rowIndex: 0 },
                                { colSpan: 3, rowSpan: 2, colIndex: 0, rowIndex: 1 },
                                { colSpan: 3, rowSpan: 1, colIndex: 0, rowIndex: 3 }],
                            maximizedTileIndex: 2
                    });
                    //Get
                    var maximizedTileIndex = $('.selector').igTileManager("option", "maximizedTileIndex");
                    //Set
                    var index = 1;
                    $('.selector').igTileManager("option", "maximizedTileIndex", index);
                 
  • minimizedState

    タイプ:
    enumeration
    デフォルト:
    null

    最小状態のタイルのコンテンツを取得または設定します。

    メンバー

    • string
    • タイプ:string
    • HTML マークアップで初期化する場合、最小状態で表示するタイルの要素を指定する jQuery セレクターを提供する必要があります。データ ソースで初期化する場合、最小状態のために描画される igTemplate を提供する必要があります。
    • null
    • タイプ:object
    • 最小状態でタイルのコンテンツを全体表示します。

    コード サンプル

     
                    //Initialize
                    $('.selector').igTileManager({
                        minimizedState : 'h1'
                    });
                    //Get
                    var minimizedState = $('.selector').igTileManager("option", "minimizedState");
                    //Set
                    var minimizedState = 'h1';
                    $('.selector').igTileManager("option", "minimizedState", minimizedState);
                 
  • preventMaximizingSelector

    タイプ:
    string
    デフォルト:
    "a, input"

    クリックしたときに最大化をトリガーしない要素を指定する jQuery セレクターを取得または設定します。

    コード サンプル

     
                    //Initialize
                    $('.selector').igTileManager({
                        preventMaximizingSelector : 'a, input'
                    });
    
                    //Get
                    var selector = $('.selector').igTileManager("option", "preventMaximizingSelector");
    
                    //Set
                    var selector = 'a, input';
                    $('.selector').igTileManager("option", "preventMaximizingSelector", selector);
                 
  • rearrangeItems

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

    コンテナーがサイズ変更されたときに項目を再配置するかどうかを取得または設定します。

    コード サンプル

     
                    //Initialize
                    $(".selector").igTileManager({
                        rearrangeItems : false
                    });
    
                    //Get
                    var rearrangeItems = $(".selector").igTileManager("option", "rearrangeItems");
    
                    //Set
                    $(".selector").igTileManager("option", "rearrangeItems", false);
                 
  • regional
    継承

    タイプ:
    enumeration
    デフォルト:
    en-US

    ウィジェットの領域設定を取得または設定します。

    コード サンプル

     
    				//Initialize
    				$(".selector").igTileManager({
    					regional: "ja"
    				});
    				// Get
    				var regional = $(".selector").igTileManager("option", "regional");
    				// Set
    				$(".selector").igTileManager("option", "regional", "ja");
    			 
  • requestType

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

    HTTP 要求メソッドを指定します。

    コード サンプル

     
                    //Initialize
                    $(".selector").igTileManager({
                            requestType : "get"
                    });
    
                    //Get
                    var requestType = $('.selector').igTileManager("option", "requestType");
    
                    //Set
                    var requestType = "get";
                    $('.selector').igTileManager("option", "requestType", requestType);
                 
  • responseContentType

    タイプ:
    string
    デフォルト:
    null

    応答オブジェクトの HTTP コンテンツ タイプを取得または設定します。「非同期 HTTP (Ajax) 要求の実行」を参照してください。

    コード サンプル

     
                    //Initialize
                    $(".selector").igTileManager({
                        responseContentType : 'application/x-www-form-urlencoded; charset=UTF-8'
                    )};
    
                    //Get
                    var respContentType = $('.selector').igTileManager("option", "responseContentType");
    
                    //Set
                    var respContentType = 'application/x-www-form-urlencoded; charset=UTF-8';
                    $('.selector').igTileManager("option", "responseContentType", respContentType);
                 
  • responseDataKey

    タイプ:
    enumeration
    デフォルト:
    null

    データ レコード配列が保持される場所を指定する応答のプロパティ (応答がラップされる場合)。$.ig.DataSource の responseDataKey を参照してください。

    メンバー

    • string
    • タイプ:string
    • 応答がラップされた場合にデータ レコードが保持されるプロパティの名前を指定します。
    • null
    • タイプ:object
    • このオプションは無視されます。

    コード サンプル

     
                    //Initialize
                    $('.selector').igTileManager({
                        responseDataKey : "d.results"
                    });
                    //Get
                    var responseDataKey = $('.selector').igTileManager("option", "responseDataKey");
                    //Set
                    var responseDataKey = "d.results";
                    $('.selector').igTileManager("option", "responseDataKey", responseDataKey);
                 
  • responseDataType

    タイプ:
    enumeration
    デフォルト:
    null

    データ ソースのタイプ ("json" など) を明示的に設定します。$.ig.DataSource 型とその type プロパティのドキュメントを参照してください。

    メンバー

    • string
    • タイプ:string
    • データ ソースのタイプ ("json" など) を明示的に設定します。$.ig.DataSource とその type プロパティのドキュメントを参照してください。
    • null
    • タイプ:object
    • このオプションは無視されます。

    コード サンプル

     
                    //Initialize
                    $('.selector').igTileManager({
                        responseDataType : "json"
                    });
                    //Get
                    var responseDataType = $('.selector').igTileManager("option", "responseDataType");
                    //Set
                    var responseDataType = "json";
                    $('.selector').igTileManager("option", "responseDataType", responseDataType);
                 
  • rightPanelCols

    タイプ:
    enumeration
    デフォルト:
    1

    タイルが最小化された場合、右パネルに表示される列の数を取得または設定します。

    メンバー

    • number
    • タイプ:number
    • 右パネルの列数を数値として設定します。最小値は 1 です。
    • null
    • タイプ:object
    • デフォルトの 1 列が使用されます。

    コード サンプル

     
                    //Initialize
                    $('.selector').igTileManager({
                        rightPanelCols: 2
                    });
                    //Get
                    var cols = $('.selector').igTileManager("option", "rightPanelCols");
                    //Set
                    var cols = 2;
                    $('.selector').igTileManager("option", "rightPanelCols", cols);
                 
  • rightPanelTilesHeight

    タイプ:
    enumeration
    デフォルト:
    null

    右パネルの最小化されたタイルの高さを取得または設定します。

    メンバー

    • number
    • タイプ:number
    • 最小化されたタイルの高さを数値として設定します。
    • null
    • タイプ:object
    • 列の高さに等しいデフォルト値が使用されます。

    コード サンプル

     
                    //Initialize
                    $('.selector').igTileManager({
                        rightPanelTilesHeight: 100
                    });
                    //Get
                    var height = $('.selector').igTileManager("option", "rightPanelTilesHeight");
                    //Set
                    var height = 100;
                    $('.selector').igTileManager("option", "rightPanelTilesHeight", height);
                 
  • rightPanelTilesWidth

    タイプ:
    enumeration
    デフォルト:
    null

    右パネルの最小化されたタイルの幅を取得または設定します。

    メンバー

    • number
    • タイプ:number
    • 最小化されたタイルの幅を数値として設定します。
    • null
    • タイプ:object
    • 列の幅に等しいデフォルト値が使用されます。

    コード サンプル

     
                    //Initialize
                    $('.selector').igTileManager({
                        rightPanelTilesWidth: 100
                    });
                    //Get
                    var width = $('.selector').igTileManager("option", "rightPanelTilesWidth");
                    //Set
                    var width = 100;
                    $('.selector').igTileManager("option", "rightPanelTilesWidth", width);
                 
  • rows

    タイプ:
    enumeration
    デフォルト:
    null

    コンテナーの行数を取得または設定します。

    メンバー

    • number
    • タイプ:number
    • 行数は数値として設定できます。
    • null
    • タイプ:object
    • 行数が自動的に計算されます。

    コード サンプル

     
                    //Initialize
                    $('.selector').igTileManager({
                        rows: 5
                    });
                    //Get
                    var rows = $('.selector').igTileManager("option", "rows");
                    //Set
                    var rows = 5;
                    $('.selector').igTileManager("option", "rows", rows);
                 
  • showRightPanelScroll

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

    タイルがオーバーフローされる場合、右パネルにスクロールバーを表示するかどうかを取得または設定します。

    コード サンプル

     
                    //Initialize
                    $('.selector').igTileManager({
                        showRightPanelScroll: true
                    });
    
                    //Get
                    var showRightScroll = $('.selector').igTileManager("option", "showRightPanelScroll");
    
                    //Set
                    var showRightScroll = true;
                    $('.selector').igTileManager("option", "rightPanelTilesWidth", showRightScroll);
                 
  • splitterOptions

    タイプ:
    object
    デフォルト:
    {}

    スプリッター機能を定義する container 変数の表現を構成します。

    コード サンプル

     
                    //Initialize
                    $('.selector').igTileManager({
                        splitterOptions: {
                            enabled: true,
                            collapsed: false,
                            collapsible: true
                        }
                    });
    
                    //Get
                    var splitterOptions = $(".selector").igTileManager("option", "splitterOptions");
    
                    //Set
                    var splitterOptions = { enabled : false };
                    $(".selector").igTileManager("option", "splitterOptions", splitterOptions);
                 
    • collapsed

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

      スプリッターが最初に縮小状態にあるかどうかを取得します。

      コード サンプル

       
                          //Initialize
                          $('.selector').igTileManager({
                              splitterOptions: {
                                  collapsed: true
                              }
                          });
      
                          //Get
                          var splitterOptions = $(".selector").igTileManager("option", "splitterOptions");
                          splitterOptions.collapsed;
                       
    • collapsible

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

      スプリッターを縮小できるかどうかを取得します。

      コード サンプル

       
                          //Initialize
                          $('.selector').igTileManager({
                              splitterOptions: {
                                  collapsible: true
                              }
                          });
      
                          //Get
                          var splitterOptions = $(".selector").igTileManager("option", "splitterOptions");
                          splitterOptions.collapsible;
                       
    • enabled

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

      スプリッターを有効にするかどうかを取得または設定します。

      コード サンプル

       
                          //Initialize
                          $('.selector').igTileManager({
                              splitterOptions: {
                                  enabled: true
                              }
                          });
      
                          //Get
                          var splitterOptions = $(".selector").igTileManager("option", "splitterOptions");
                          splitterOptions.enabled;
      
                          //Set
                          var splitterOptions = { enabled : false };
                          $(".selector").igTileManager("option", "splitterOptions", splitterOptions);
                       
    • events

      タイプ:
      object
      デフォルト:
      {}

      スプリッター イベントを取得または設定します。

      コード サンプル

       
                          //Initialize
                          $('.selector').igTileManager({
                              splitterOptions: {
                                  events: {
                                      collapsed: function(evt, ui) {
                                          //return reference to igSplitter
                                          ui.owner;
                                          // return index of collapsed panel
                                          ui.index;
                                      },
                                      expanded: function (evt, ui) {
                                          //return reference to igSplitter
                                          ui.owner;
                                          // return index of expanded panel
                                          ui.index;
                                      }
                                  }
                              }
                          });
      
                          //Get
                          var splitterOptions = $(".selector").igTileManager("option", "splitterOptions");
                          splitterOptions.events;
      
                          //Set
                          var splitterOptions = {
                              events : {
                                  collapsed: function(evt, ui) {...},
                                  expanded: function (evt, ui) {...}
                              }
                          }
                          $(".selector").igTileManager("option", "splitterOptions", splitterOptions);
                       
      • collapsed

        タイプ:
        object
        デフォルト:
        null

        縮小が実行された後に発生します。キャンセルできません。
        関数は引数 evt および ui を受け取ります。
        ui.owner を使用して、スプリッター インスタンスへの参照を取得します。
        ui.index を使用して、縮小されたパネルのインデックスを取得します。

        コード サンプル

         
                                //Initialize
                                $('.selector').igTileManager({
                                    splitterOptions: {
                                        events: {
                                            collapsed: function(evt, ui) {
                                                //return reference to igSplitter
                                                ui.owner;
                                                // return index of collapsed panel
                                                ui.index;
                                            }
                                        }
                                    }
                                });
        
                                //Get
                                var splitterOptions = $(".selector").igTileManager("option", "splitterOptions");
                                splitterOptions.events.collapsed;
        
                                //Set
                                var splitterOptions = {
                                    events : {
                                        collapsed: function(evt, ui) {...}
                                    }
                                }
                                $(".selector").igTileManager("option", "splitterOptions", splitterOptions);
                             
      • expanded

        タイプ:
        object
        デフォルト:
        null

        展開が実行された後に発生します。キャンセルできません。 関数は引数 evt および ui を受け取ります。
        ui.owner を使用して、スプリッター インスタンスへの参照を取得します。
        ui.index を使用して、展開されたパネルのインデックスを取得します。

        コード サンプル

         
                                //Initialize
                                $('.selector').igTileManager({
                                    splitterOptions: {
                                            events: {
                                                expanded: function (evt, ui) {
                                                //return reference to igSplitter
                                                ui.owner;
                                                // return index of expanded panel
                                                ui.index;
                                            }
                                        }
                                    }
                                });
        
                                //Get
                                var splitterOptions = $(".selector").igTileManager("option", "splitterOptions");
                                splitterOptions.events.expanded;
        
                                //Set
                                var splitterOptions = {
                                    events : {
                                        expanded: function (evt, ui) {...}
                                    }
                                }
                                $(".selector").igTileManager("option", "splitterOptions", splitterOptions);
                             
  • width

    タイプ:
    enumeration
    デフォルト:
    null

    コンテナーの幅を取得または設定します。

    メンバー

    • string
    • タイプ:string
    • コンテナーの幅はピクセル (px) およびパーセント (%) で設定できます。
    • number
    • タイプ:number
    • コンテナーの幅は数値としてピクセルで設定できます。

    コード サンプル

     
                    //Initialize
                    $('.selector').igTileManager({
                        width: 300
                    });
                    //Get
                    var width = $('.selector').igTileManager("option", "width");
                    //Set
                    $('.selector').igTileManager("option", "width", 300);
                 

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

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

詳細の表示
  • dataBinding

    キャンセル可能:
    true

    データバインドの実行前に発生します。
    関数は引数 evt および ui を受け取ります。
    ui.owner を使用して、データ バインディングを実行するタイル マネージャーへの参照を取得します。
    ui.dataSource を使用して、タイル マネージャーにデータ バインドする $.ig.DataSource への参照を取得します。

    コード サンプル

     
                    //Bind
                    $(document).delegate(".selector", "igtilemanagerdatabinding", function (evt, ui) {
                        // reference to igTileManager
                        ui.owner;
                        //reference to dataSource
                        ui.dataSource;
                    });
    
                    //Initialize
                    $(".selector").igTileManager({
                        dataBinding: function(evt, ui) {...}
                    });
                 
  • dataBound

    キャンセル可能:
    false

    データ バインディングが完了された後に発生します。
    関数は引数 evt および ui を受け取ります。
    ui.owner を使用して、データ バインディングを実行するタイル マネージャーへの参照を取得します。
    ui.dataView を使用して、タイル マネージャーにデータ バインドしているデータへの参照を取得します。
    ui.success を使用して、データ バインディングが正しく実行されたかどうかを取得します。
    ui.errorMessage を使用して、データ バインディングが失敗した場合のエラー メッセージを取得します。

    コード サンプル

     
                    //Bind
                    $(document).delegate(".selector", "igtilemanagerdatabound", function (evt, ui) {
                        // reference to igTilemanager
                        ui.owner;
                        // reference to the data the tile has been databound to.
                        ui.dataView;
                    });
    
                    //Initialize
                    $(".selector").igTileManager({
                        dataBound: function(evt, ui) {...}
                    });
                 
  • rendered

    キャンセル可能:
    false

    タイル マネージャーの描画が完了された後に発生します。
    関数は引数 evt および ui を受け取ります。
    ui.owner を使用して、描画を実行するタイル マネージャーへの参照を取得します。

    コード サンプル

     
                    //Bind
                    $(document).delegate(".selector", "igtilemanagerrendered", function (evt, ui) {
                        // reference to the tile.
                        ui.owner;
                    });
    
                    //Initialize
                    $(".selector").igTileManager({
                        rendered: function(evt, ui) {...}
                    });
                 
  • rendering

    キャンセル可能:
    true

    タイル マネージャーの描画が開始される前に発生します。
    関数は引数 evt および ui を受け取ります。
    ui.owner を使用して、描画を実行するタイル マネージャーへの参照を取得します。
    ui.tiles を使用して、タイル マネージャーが描画するタイルへの参照を取得します。データ ソースを使用する場合、これは提供されたデータに参照します。
    ui.items を使用して、タイル マネージャーの項目構成への参照を取得します。

    コード サンプル

     
                    //Bind
                    $(document).delegate(".selector", "igtilemanagerrendering", function (evt, ui) {
                        //reference to the tile.
                        ui.owner;
                        //reference to tiles
                        ui.tiles;
                        //reference to items
                        ui.items;
                    });
    
                    //Initialize
                    $(".selector").igTileManager({
                        rendering: function(evt, ui) {...}
                    });
                 
  • tileMaximized

    キャンセル可能:
    false

    タイル マネージャーのタイルが最大化された後に発生します。
    関数は引数 evt および ui を受け取ります。
    ui.owner を使用して、最大化されたタイルに属するタイル マネージャーへの参照を取得します。
    ui.tile を使用して、最大化されたタイルの jQuery 要素を取得します。

    コード サンプル

     
                    //Bind
                    $(document).delegate(".selector", "igtilemanagertilemaximized", function (evt, ui) {
                        //reference to the widget.
                        ui.owner;
                        //reference to the maximized tile
                        ui.tile;
                    });
    
                    //Initialize
                    $(".selector").igTileManager({
                        tileMaximized: function(evt, ui) {...}
                    });
                 
  • tileMaximizing

    キャンセル可能:
    true

    タイル マネージャーのタイルが最大化される前に発生します。
    関数は引数 evt および ui を受け取ります。
    ui.owner を使用して、タイルの最大化を実行するタイル マネージャーへの参照を取得します。
    ui.tile を使用して、最大化されているタイルの jQuery 要素を取得します。
    ui.minimizingTile を使用して、同期に最小化されているタイルへの参照を取得します。タイルが最小化されていない場合、null。

    コード サンプル

     
                    //Bind
                    $(document).delegate(".selector", "igtilemanagertilemaximizing", function (evt, ui) {
                        //reference to the widget.
                        ui.owner;
                        //reference to the tile that is going to be maximized.
                        ui.tile;
                        //reference to the tile that is going to be minimized or null if not any
                        ui.minimizingTile;
                    });
    
                    //Initialize
                    $(".selector").igTileManager({
                        tileMaximizing: function(evt, ui) {...}
                    });
                 
  • tileMinimized

    キャンセル可能:
    false

    タイル マネージャーのタイルが最小化された後に発生します。
    関数は引数 evt および ui を受け取ります。
    ui.owner を使用して、最小化されたタイルに属するタイル マネージャーへの参照を取得します。
    ui.tile を使用して、最小化されたタイルの jQuery 要素を取得します。

    コード サンプル

     
                    //Bind
                    $(document).delegate(".selector", "igtilemanagertileminimized", function (evt, ui) {
                        //reference to the widget
                        ui.owner;
                        //reference to the tile that was minimized
                        ui.tile;
                    });
    
                    //Initialize
                    $(".selector").igTileManager({
                        tileMinimized: function(evt, ui) {...}
                    });
                 
  • tileMinimizing

    キャンセル可能:
    true

    タイル マネージャーのタイルが最小化される前に発生します。
    関数は引数 evt および ui を受け取ります。
    ui.owner を使用して、タイルの最小化を実行するタイル マネージャーへの参照を取得します。
    ui.tile を使用して、最小化されているタイルの jQuery 要素を取得します。
    ui.maximizingTile を使用して、同期に最大化されているタイルへの参照を取得します。タイルが最大化されていない場合、null。

    コード サンプル

     
                    //Bind
                    $(document).delegate(".selector", "igtilemanagertileminimizing", function (evt, ui) {
                        //reference to the widget.
                        ui.owner;
                        //reference to the tile that is going to be minimized
                        ui.tile;
                        //reference to the tile that is going to be maximized or null if not any
                        ui.maximizingTile;
                    });
    
                    //Initialize
                    $(".selector").igTileManager({
                        tileMinimizing: function(evt, ui) {...}
                    });
                 
  • tileRendered

    キャンセル可能:
    false

    タイルがコンテナーに描画された後に発生したイベント。
    関数は引数 evt および ui を受け取ります。
    ui.owner を使用して、描画を実行するタイル マネージャーへの参照を取得します。
    ui.tile を使用して、描画されたタイルへの参照を取得します。

    コード サンプル

     
                    //Bind
                    $(document).delegate(".selector", "igtilemanagertilerendered", function (evt, ui) {
                        //reference to the widget.
                        ui.owner;
                        //reference to the tile
                        ui.tile;
                    });
    
                    //Initialize
                    $(".selector").igTileManager({
                        tileRendered: function(evt, ui) {...}
                    });
                 
  • tileRendering

    キャンセル可能:
    true

    タイルがコンテナーに描画される前に発生したイベント。
    関数は引数 evt および ui を受け取ります。
    ui.owner を使用して、描画を実行するタイル マネージャーへの参照を取得します。
    ui.tile を使用して、描画されているタイルへの参照を取得します。

    コード サンプル

     
                    //Bind
                    $(document).delegate(".selector", "igtilemanagertilerendering", function (evt, ui) {
                        //reference to the widget
                        ui.owner;
                        //reference to the tile.
                        ui.tile;
                    });
    
                    //Initialize
                    $(".selector").igTileManager({
                        tileRendering: function(evt, ui) {...}
                    });
                 
  • changeGlobalLanguage
    継承

    .igTileManager( "changeGlobalLanguage" );

    ウィジェットの言語をグローバルの言語に変更します。グローバルの言語は $.ig.util.language の値です。

    コード サンプル

     
    				$(".selector").igTileManager("changeGlobalLanguage");
    			 
  • changeGlobalRegional
    継承

    .igTileManager( "changeGlobalRegional" );

    ウィジェットの地域設定をグローバルの地域設定に変更します。グローバルの地域設定は $.ig.util.regional にあります。

    コード サンプル

     
    				$(".selector").igTileManager("changeGlobalRegional");
    			 
  • changeLocale
    継承

    .igTileManager( "changeLocale", $container:object );

    ウィジェット要素のすべてのロケールを options.language に指定される言語に変更します。
    注: このメソッドは珍しいシナリオのみで使用されます。language または locale オプションのセッターを参照してください。

    • $container
    • タイプ:object
    • オプションのパラメーター: 設定しない場合、ウィジェットの要素を $container として使用します。

    コード サンプル

     
    				$(".selector").igTileManager("changeLocale");
    			 
  • dataBind

    .igTileManager( "dataBind" );

    これによって、TileManager が (ローカルまたはリモートの) データ ソースにデータ バインドされ、すべてのデータが再描画されます。

    コード サンプル

     
                    $(".selector").igTileManager("dataBind");
                 
  • destroy

    .igTileManager( "destroy" );
    返却型:
    object

    ウィジェット インスタンス (クライアント オブジェクト) を削除します。インスタンスへアクセスできなくなるため、すべてのイベント ハンドラーが機能しなくなり、すべての子ウィジェットが破棄されます。またウィジェットの外にある自動生成された HTML コンテンツ (デタッチされたポップアップ、ドロップダウンなど) を削除します。

    コード サンプル

     
                    $(".selector").igTileManager("destroy");
                 
  • layoutManager

    .igTileManager( "layoutManager" );
    返却型:
    object
    返却型の説明:
    このタイル マネージャーに関連付けられたレイアウト マネージャーを返します。

    このタイル マネージャーに関連付けられたレイアウト マネージャーを返します。

    コード サンプル

     
                    $(".selector").igTileManager("layoutManager");
                 
  • maximize

    .igTileManager( "maximize", $tileToMaximize:object, [animDuration:number], [event:object] );

    特定のタイルを最大化します。

    • $tileToMaximize
    • タイプ:object
    • 最大化するタイル要素の jQuery オブジェクトを指定します。
    • animDuration
    • タイプ:number
    • オプション
    • この最大化操作のアニメーション期間を指定します。
    • event
    • タイプ:object
    • オプション
    • このアクションを発生させたブラウザを示します (API 以外)。

    コード サンプル

     
                    $(".selector").igTileManager("maximize", tileToMaximize, event);
                 
  • maximizedTile

    .igTileManager( "maximizedTile" );
    返却型:
    enumeration
    返却型の説明:
    最大化されたタイルを返します。最大化されたタイルがない場合、null。

    最大化されたタイルを返します。最大化されたタイルがない場合、null。

    コード サンプル

     
                    $(".selector").igTileManager("maximizedTile");
                 
  • minimize

    .igTileManager( "minimize", [animDuration:number], [event:object] );

    最大化されたタイルを最小化します。最大化されたタイルがない場合、結果はありません。

    • animDuration
    • タイプ:number
    • オプション
    • この最小化操作のアニメーション期間を指定します。
    • event
    • タイプ:object
    • オプション
    • このアクションを発生させたブラウザを示します (API 以外)。

    コード サンプル

     
                    $(".selector").igTileManager("minimize", event);
                 
  • minimizedTiles

    .igTileManager( "minimizedTiles" );
    返却型:
    enumeration
    返却型の説明:
    最小化されたタイルを含む配列を返します。最小化されたタイルがない場合、null。

    最小化されたタイルを含む配列を返します。最小化されたタイルがない場合、null。

    コード サンプル

     
                    $(".selector").igTileManager("minimizedTiles");
                 
  • reflow

    .igTileManager( "reflow", [forceReflow:object], [animationDuration:number], [event:object] );

    タイル マネージャーを再フローします。コンテナーに合わせてタイルを再配置します。

    • forceReflow
    • タイプ:object
    • オプション
    • 再フローを実行する必要があるかどうかを示します。項目のサイズおよび位置が手動的に変更された場合に便利です。
    • animationDuration
    • タイプ:number
    • オプション
    • このリフローのみに使用するアニメーション期間。
    • event
    • タイプ:object
    • オプション
    • このアクションを発生させたブラウザを示します (API 以外)。

    コード サンプル

     
                    $('.selector').igTileManager("reflow", forceReflow, event);
                 
  • splitter

    .igTileManager( "splitter" );
    返却型:
    enumeration
    返却型の説明:
    このタイル マネージャーと関連するスプリッターを返します。タイル マネージャーが maximizedTileIndex とインスタンス化された場合、null 値を返します。

    このタイル マネージャーと関連するスプリッターを返します。タイル マネージャーが maximizedTileIndex とインスタンス化された場合、null 値を返します。

    コード サンプル

     
                    $('.selector').igTileManager("splitter")
                 
  • widget

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

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

    コード サンプル

     
                    $('.selector').igTileManager("widget");
                 
  • ui-widget ui-igtilemanager ui-widget-content

    最上位のコンテナー要素に適用されるクラス。
  • ui-widget-content ui-igtile

    タイル コンテンツ要素に適用されるクラス。
  • ui-widget-header ui-igtile-header

    タイル ヘッダー要素に適用されるクラス。
  • ui-helper-hidden

    非表示要素に適用されるクラス。
  • ui-state-hover

    ホバーされたときにタイル ボタン要素に適用されるクラス。
  • ui-igtile-inner-container

    タイル コンテンツの内部コンテナー要素に適用されるクラス。
  • ui-igtilemanager-left

    左側のパネルに適用されるクラス。
  • ui-igtile-maximized

    最大化状態のタイルに適用されるクラス。
  • ig-button ig-tile-minimize-button

    タイルが最大化状態のときに最小化ボタンに適用されるクラス。
  • ui-igtile-minimized

    最小化状態のタイルに適用されるクラス。
  • ig-tile-minimize-icon

    タイル ヘッダーの最小化ボタンのアイコン要素に適用されるクラス。
  • ui-helper-overflow-hidden

    スクロールバーを非表示するために適用されるクラス。
  • ui-helper-overflow-visible

    オーバーフローの表示の要素に適用されるクラス。
  • ui-igtilemanager-right

    右側のパネルに適用されるクラス。
  • ui-igsplitter-no-scroll

    幅が 0 の場合、スクロールを無効にする右パネルに適用されるクラス。
  • ui-helper-visibility-hidden

    要素状態を非表示に設定するために適用されるクラス。

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