Available in the Full Version

Tile Manager - AngularJS

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

HTML
Data

                    <!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/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2023.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/2023.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>

    <script src="http://cdn-na.infragistics.com/igniteui/2023.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>

                    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: '../../images/samples/tile-manager/450px-Douglas_Crockford.jpg', 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: '../../images/samples/tile-manager/3450728563_69b0bd0743_m.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: '../../images/samples/tile-manager/220px-BillGates2012.jpg', 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: '../../images/samples/tile-manager/jonskeet.jpg', linkedin: 'uk.linkedin.com/pub/jon-skeet/0/800/ba3'
	}
];

Ignite UI for jQuery | Samples

Search Results

Tile Manager - AngularJS

Code View