Ignite UI Layout Manager

by damyanpetev

HTML

<script src="http://cdn-na.infragistics.com/jquery/20131/latest/js/infragistics.loader.js"></script>
<ul id="layout">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<ul id="layout2">
</ul>

CSS

/* Sparkline styles */
.ui-sparkline{
    font-family:"Segoe UI", Arial, sans-serif;
    font-size:12px;
    background: rgba(255, 255, 255, 0) !important;
}
.ui-sparkline-tooltip {
    -moz-box-shadow:0 0 2px #555;
    -webkit-box-shadow:0 0 2px #555;
    box-shadow:0 0 2px #555;
    padding:3px
}
.ui-sparkline-sparkpath {
    background:#00AADE;
    border:1px solid
}
.ui-sparkline-negativesparkpath {
    background:#D0284C;
    border:1px solid
}
.ui-sparkline-trendline {
    background:#054D99;
    border:2px solid
}
.ui-sparkline-markers {
    background:#36C0F3;
    border:3px solid
}
.ui-sparkline-firstmarker {
    background:#19994F;
    border:5px solid
}
.ui-sparkline-lastmarker {
    background:#FCB025;
    border:5px solid
}
.ui-sparkline-highmarker {
    background:#BFE107;
    border:3px solid
}
.ui-sparkline-lowmarker {
    background:#AF39FF;
    border:3px solid
}
.ui-sparkline-negativemarkers {
    background:#E5516F;
    border:3px solid
}
.ui-sparkline-range {
    background:gray;
    opacity:.2
}
.ui-sparkline-axis-x {
    font-family:"Segoe UI", Arial, sans-serif;
    border:2px solid #989EA3;
    color:#4B4B4D
}
.ui-sparkline-axis-y {
    font-family:"Segoe UI", Arial, sans-serif;
    border:2px solid #989EA3;
    color:#4B4B4D;
    text-align:right
}
/* --- Unrelated sample styling --- */
 .logo {
    background-image: url('http://www.infragistics.com/uploadedImages/Content/PRODUCTS/jQuery/ignite-secondary-navigation-logo.png');
    background-repeat: no-repeat;
    padding-left: 135px;
    margin: 5px;
    vertical-align: top;
    font-size: 1.2em;
}
body {
    font-size: 0.85em;
    font-family :"Segoe UI", Verdana, Helvetica, Sans-Serif;
}
button {
    text-decoration: none;
    line-height: 1.5em;
    background-color: #ACACAC;
    color: #fff;
    border: none;
}
button:hover {
    background-color: #007FAF;
}
button:active {
    background-color: #00AEEF;
}
</style> <!-- as per http://doc.jsfiddle.net/use/hacks.html --> <meta...

JavaScript

$.ig.loader({
    scriptPath: 'http://cdn-na.infragistics.com/jquery/20131/latest/js/',
    cssPath: 'http://cdn-na.infragistics.com/jquery/20131/latest/css/',
    theme: 'metro',
    resources: "igLayoutManager"
});

$.ig.loader(function () {
    //  Create a basic igLayoutManager control
        $("#layout").igLayoutManager({
        layoutMode: "flow"
    });
    $("#layout2").igLayoutManager({
        layoutMode: "flow",
        itemCount: 5
    });
});