Available in the Full Version

Tile Manager - AngularJS

Douglas Crockford

error

John Resig

error

Bill Gates

error

Jon Skeet

error

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

This sample demonstrates how AngularJS directives are used to instantiate the Tile Manager Control.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
    <script src="/js/angular.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>

    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/extensions/igniteui-angularjs.js"></script>

    <script src="/data-files/candidates.js"></script>
    <script type="text/javascript">
        var sampleApp = angular.module('sampleApp', ['igniteui-directives']);
        sampleApp.controller('tileManagerController', function ($scope) {
            $scope.data = dataSource;
        });
    </script>

    <style type="text/css">
        .dashboard {
            position: relative;
            width: 100%;
            height: 550px;
        }

        #dashboard h4 {
            font-size: 18px;
            text-align: center;
        }

        #dashboard h3 {
            text-align: center;
        }

        #dashboard img {
            width: 150px;
            height: 175px;
            margin-left: -75px;
            margin-top: 15px;
            position: absolute;
            left: 50%;
        }

        #dashboard .ui-igtile-maximized img {
            width: 200px;
            height: 250px;
            position: static;
            float: left;
            margin: 20px 20px 20px 0;
        }

        #dashboard .ui-igtilemanager-right img {
            width: 60px;
            height: 80px;
            margin-left: -30px;
            margin-top: 15px;
        }

        .ui-igtile-maximized .text {
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .ui-igtile-maximized div {
            text-align: left;
        }

        .linkedIn, .skills {
            word-wrap: break-word;
        }

        div.ui-igtile-inner-container h4 {
            margin-bottom: 0.1em;
        }
    </style>
</head>
<body class="container">
    <div ng-app="sampleApp" ng-controller="tileManagerController">
        <ig-tile-manager id="dashboard"
                            data-source="data"
                            margin-left="10"
                            margin-top="10"
                            width="100%"
                            height="550px"
                            right-panel-tiles-width="200"
                            right-panel-tiles-height="156"
                            class="dashboard"
                            maximized-state='<h3>${name}</h3><img src="${picture}" title="${name}" alt="error" /><p class="text">${text}</p><div style="clear: both"><span class="color">Skills:</span></div><ul class="skills"></ul><div class="linkedIn"><span class="color">LinkedIn:</span> <a href="${linkedin}" target="_blank">http://www.linkedin.com/profile</a></div>'
                            minimized-state='<h4>${name}</h4><img src="${picture}" class="minimized" title="${name}" alt="error" />'
            >
        </ig-tile-manager>
    </div>
</body>   
</html>