IGTileManager Test

by seadonk

HTML

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="http://igniteui.com/js-data/candidates"></script>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<button id="wideBtn">Wide Layout</button>
<button id="narrowBtn">Narrow layout</button>
<hr>
<div class="container body-content">
    <div id="layoutContainer">
        <div class="tile1">
            <div class="tileHeading">
                <label class="tileUIElement">TILE #1</label>
            </div>
            <div class="tileContent maximizedContainer">MAXIMIZED</div>
            <div class="tileContent minimizedContainer">MINIMIZED</div>
        </div>
        <div class="tile2">
            <div class="tileHeading">
                <label class="tileUIElement">TILE #2</label>
            </div>
            <div class="tileContent maximizedContainer">MAXIMIZED</div>
            <div class="tileContent minimizedContainer">MINIMIZED</div>
        </div>
        <div class="tile3">
            <div class="tileHeading">
                <label...

CSS

#layoutContainer {
    height:600px;
    overflow: hidden;
}
.maximizedContainer {
    background-color: blue !important;
    height: 100%;
    font-weight: bold;
    color: white;
    font-size: x-large;
    text-align: center;
    vertical-align: middle;
}

JavaScript

var optionsWide = {
                items: [
                    { rowIndex: 0, colIndex: 1, rowSpan: 3, colSpan: 6 }, //index 0
                    { rowIndex: 0, colIndex: 0, rowSpan: 1, colSpan: 1 }, //index 1
                    { rowIndex: 1, colIndex: 0, rowSpan: 1, colSpan: 1 }, //index 2
                    { rowIndex: 2, colIndex: 0, rowSpan: 1, colSpan: 1 } //index 3
                ],
                minimizedState: ':not(.maximizedContainer)',
                maximizedState: ':not(.minimizedContainer)',
                maximizedTileIndex: 0, //indicates which tile index is "maximized"
     };

     var optionsNarrow = {
                items: [
                    { rowIndex: 0, colIndex: 0, rowSpan: 6, colSpan: 3 }, //index 0
                    { rowIndex: 6, colIndex: 0, rowSpan: 1, colSpan: 1 }, //index 1
                    { rowIndex: 6, colIndex: 1, rowSpan: 1, colSpan: 1 }, //index 2
                    { rowIndex: 6, colIndex: 2, rowSpan: 1, colSpan: 1 } //index 3
                ],
                minimizedState: ':not(.maximizedContainer)',
                maximizedState: ':not(.minimizedContainer)',
                maximizedTileIndex: 0,  //indicates which tile index is "maximized"
     };

     $(function () {         
         $('#layoutContainer').igTileManager(optionsWide);
         $('#wideBtn').click(function () {
             $('#layoutContainer').igTileManager(optionsWide);
         });
         $('#narrowBtn').click(function () {
             $('#layoutContainer').igTileManager(optionsNarrow);
         });
     });