Gets sets the duration of the animations in the tile manager.

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

Gets sets the columns count in the container. null The column count will be automatically calculated.

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

The height of each column in the container. null The column height will be calculated based on the container height and the other options.

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

Gets sets the width of each column in the container. null The column width will be calculated based on the container width and the other options.

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

Specifies any valid data source accepted by $.ig.DataSource, or an instance of an $.ig.DataSource itself.

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

Explicitly set data source type (such as "json"). Please refer to the documentation of $.ig.DataSource and its type property.

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

Specifies a remote URL accepted by $.ig.DataSource in order to request data from it.

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

Gets sets the height of the container. null The default container height will be used.

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

Gets sets the tiles configurations. Every tile is described by rowSpan, colSpan, rowIndex and colIndex. array An array with colSpan, rowSpan, colIndex, rowIndex configurations for each tile. null Default tile configurations of rowSpan: 1 and colSpan: 1 will be used.

      //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 }];
      igTileManager("option", "items", items);             
      

Gets sets the horizontal spacing between tiles.
number The horizontal spacing between tiles can be set as a number.

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

Gets sets the vertical spacing between tiles.
number The vertical spacing between tiles can be set as a number.

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

Gets sets the content of the tiles in maximized state. null The whole content of the tile will be visible in maximized state.

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

Gets sets the index of which items configuration will be used for positioning and sizing of the maximized tile. null Option is ignored.

      //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 }, /* items index : 2 */
                 { 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);
      

Gets sets the content of the tiles in minimized state. null The whole content of the tile will be visible in minimized state.

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

Gets sets JQuery selector that specifies which elements will not trigger maximizing when clicked on.

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

Gets sets whether the items will rearrange when the container is resized.

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

Specifies the HTTP verb to be used to issue the request.

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

Content type of the response. See http://api.jquery.com/jQuery.ajax/ => contentType.

      //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);
      

see $.ig.DataSource. null Option is ignored.

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

String Explicitly set data source type (such as "json"). Please refer to the documentation of $.ig.DataSource and its type property.
null Option is ignored.

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

Gets sets how many columns to be displayed in the right panel when the tiles are minimized. null Default of 1 column will be used.

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

Gets sets the height of the minimized tiles in the right panel. null Default value equal to the column height will be used.

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

Gets sets the width of the minimized tiles in the right panel. null Default value equal to the column width will be used.

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

Gets sets the rows count in the container. null The row count will be automatically calculated.

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

Gets sets whether the right panel should show scrollbar when tiles are overflowing.

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

Gets sets container of variables which defines splitter functionality.

      //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

  Type:

  bool

  Default:

  false

  Gets sets whether the splitter should be initially collapsed.

  Code Sample

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

• collapsible

  Type:

  bool

  Default:

  false

  Gets sets whether the splitter can be collapsed.

  Code Sample

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

• enabled

  Type:

  bool

  Default:

  true

  Gets sets whether the splitter should be enabled.

  Code Sample

            //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

  Type:

  object

  Default:

  {}

  Gets sets splitter events.

  Code Sample

            //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

    Type:

    function

    Default:

    null

    Fired after collapsing is performed. Not cancellable.
    Function takes arguments evt and ui.
    Use ui.owner to get a reference to the splitter instance.
    Use ui.index to get an index of collased panel.

    Code Sample

                  //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

    Type:

    function

    Default:

    null

    Fired after expanding is performed. Not cancellable.
    Function takes arguments evt and ui.
    Use ui.owner to get a reference to the splitter instance.
    Use ui.index to get an index of expanded panel.

    Code Sample

                  //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);
                  

null The default container width will be used.

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