製品版のみの機能
タイル マネージャー - AngularJS との連携
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このサンプルは、タイル マネージャー コントロールをインスタンス化するために AngularJS ディレクティブを使用する方法を紹介します。
コード ビュー
クリップボードへコピー
<!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>
var dataSource = [
{name: 'ダグラス・クロックフォード', text: 'ダグラス·クロックフォードは、米国の企業家、そしてコンピューター プログラマーでもあります。JavaScript 言語の開発に継続的に関与し、データフォーマット JSON (JavaScript Object Notation) を普及させ、JSLint と JSMin など様々な JavaScript の関連ツールを開発したことで知られています。クロックフォード氏は現在、 PayPal のシニア JavaScript アーキテクトで、JavaScript 、JSON 、ヤフーのような Web 関連テクノロジーに関する執筆およびスピーカーとしても活躍中です。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: 'ジョン・レシグ', text: 'ジョン・レシグは、 Khan Academy のコンピューター サイエンス学部長で、 JavaScript ライブラリの jQuery を開発しました。また、「Pro JavaScript Techniques」と「Secrets of the JavaScript Ninja」の著者です。現在、ジョンはブルックリン、ニューヨーク州に住んでおり、余暇には浮世絵 (日本の木版印刷) を楽しんでいます。', 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: 'ビル・ゲイツ', text: 'ウィリアム・ヘンリー・ゲイツ3世 (William Henry Gates III, 1955 年 10 月 28 日)、通称ビル・ゲイツ (Bill Gates) は、米国のプログラマー、発明家、大事業家と慈善家です。ゲイツ氏は、ポール・アレンと共同で創業した世界最大のコンピューター ソフトウェア会社、マイクロソフト社の元 CEO で現会長です。彼は、1995 年から 2009 年 (2008 年を除く) まで世界長者番付で連続世界一でした。2008 年は世界で 3 位に転落。しかし 2011年には、ゲイツ氏はアメリカで 1 位、世界で 2 位となりました。マイクロソフトでのキャリアで彼は CEO と主席ソフトウェア設計者として従事、依然として株式の 6.4 ％を持つ個人筆頭株主です。彼は数々の本の著者と共著者でもあります。', skills: [
{description: '企業家精神'},
{description: 'VB'},
{ description: 'オペレーティング システム' },
{ description: '開発言語' }
], picture: '../../images/samples/tile-manager/220px-BillGates2012.jpg', linkedin: 'http://www.linkedin.com/company/8736?trk=tyah'
},
{
name: 'ジョン・スキート', text: '「C# in Depth」の著者です。現在、ロンドンのグーグルでソフトウェア エンジニアを務めています。通常マイクロソフト 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'
}
];