このトピックでは、Ignite UI for jQuery コントロールと TypeScript のサンプルについて説明します。
このトピックは、以下のセクションで構成されます。
これらのサンプルを実行するには、以下が必要となります。
このサンプルは、igGrid を TypeScript で使用する方法を紹介します。
以下のスクリーンショットは最終結果のプレビューです。
このサンプルでは、ページング、フィルター、並べ替えなどの機能を持つ igGrid を TypeScript で作成する方法を紹介します。
HTML の場合:
<table id="grid1"></table>
igGrid を生成するために adventureWorks データソースを使用します。
var adventureWorks = [
{ "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381", "MakeFlag": false, "FinishedGoodsFlag": false, "Color": null, "SafetyStockLevel": 1000, "ReorderPoint": 750, "StandardCost": 0.0000, "ListPrice": 0.0000, "Size": null, "SizeUnitMeasureCode": null, "WeightUnitMeasureCode": null, "Weight": null, "DaysToManufacture": 0, "ProductLine": null, "Class": null, "Style": null, "ProductSubcategoryID": null, "ProductModelID": null, "SellStartDate": "\/Date(896648400000)\/", "SellEndDate": null, "DiscontinuedDate": null, "rowguid": "694215b7-08f7-4c0d-acb1-d734ba44c0c8", "ModifiedDate": "\/Date(1078992096827)\/" },
{ "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327", "MakeFlag": false, "FinishedGoodsFlag": false, "Color": null, "SafetyStockLevel": 1000, "ReorderPoint": 750, "StandardCost": 0.0000, "ListPrice": 0.0000, "Size": null, "SizeUnitMeasureCode": null, "WeightUnitMeasureCode": null, "Weight": null, "DaysToManufacture": 0, "ProductLine": null, "Class": null, "Style": null, "ProductSubcategoryID": null, "ProductModelID": null, "SellStartDate": "\/Date(896648400000)\/", "SellEndDate": null, "DiscontinuedDate": null, "rowguid": "58ae3c20-4f3a-4749-a7d4-d568806cc537", "ModifiedDate": "\/Date(1078992096827)\/" } ...
]
グリッドを TypeScript で初期化します。
TypeScript の場合:
/// <reference path="http://www.igniteui.com/js/typings/jqueryui.d.ts" />
/// <reference path="http://www.igniteui.com/js/typings/jquery.d.ts" />
/// <reference path="http://www.igniteui.com/js/typings/igniteui.d.ts" />
declare var adventureWorks: any;
$(function () {
$("#grid1").igGrid({
width: "100%",
columns: [
{ headerText: "Product ID", key: "ProductID", dataType: "number", width: "15%" },
{ headerText: "Product Name", key: "Name", dataType: "string", width: "40%" },
{ headerText: "Product Number", key: "ProductNumber", dataType: "string", width: "30%" },
{ headerText: "Make Flag", key: "MakeFlag", dataType: "bool", width: "15%" }
],
dataSource: adventureWorks,
features: [
{
name: "Paging"
},
{
name: "Sorting"
},
{
name: "Filtering"
}
],
});
});
このサンプルは、igEditors を TypeScript で使用する方法を紹介します。
以下のスクリーンショットは最終結果のプレビューです。
HTML を作成 - テキスト エディター、日付エディター、ローカライズ可能な日付ピッカー、マスク エディター、通貨エディター、およびパーセンテージ エディターを作成する方法を紹介します。
HTML の場合:
<div id="editors">
<div>
<h4>
Text Editor
</h4>
<div id="textEditor"></div>
</div>
<div>
<h4>
Date Picker with Japan localization
</h4>
<div id="jaDatePicker"></div>
</div>
<div>
<h4>
Date and Time editor
</h4>
<div id="dateTimeEditor"></div>
</div>
<div>
<h4>
Mask editor
</h4>
<div id="maskEditor"></div>
</div>
<div>
<h4>
Currency editor
</h4>
<div id="currencyEditor"></div>
</div>
<div>
<h4>
Percent editor
</h4>
<div id="percentEditor"></div>
</div>
</div>
エディターを TypeScript で初期化します。
TypeScript の場合:
/// <reference path="http://www.igniteui.com/js/typings/jquery.d.ts" />
/// <reference path="http://www.igniteui.com/js/typings/jqueryui.d.ts" />
/// <reference path="http://www.igniteui.com/js/typings/igniteui.d.ts" />
$(function () {
$("#textEditor").igTextEditor({
width: "200",
value: "John"
});
$("#dateTimeEditor").igDateEditor({
width: "200",
dateInputFormat: "dateTime",
value: new Date()
});
$("#jaDatePicker").igDatePicker({
width: "200",
value: new Date(),
readOnly: true,
dropDownOnReadOnly: true,
dateDisplayFormat: "dateLong",
regional: "ja"
});
$("#currencyEditor").igCurrencyEditor({
width: "200",
value: -8709.98,
negativePattern: "$ -n",
positivePattern: "$ n",
regional: "en-US"
});
$("#maskEditor").igMaskEditor({
width: "200",
inputMask: 'AaaL/aa',
dataMode: 'rawTextWithRequiredPromptsAndLiterals'
});
$("#percentEditor").igPercentEditor({
width: "200",
value: "42",
displayFactor: 1
});
});
このサンプルは、igTileManager を TypeScript で使用する方法を示します。
以下のスクリーンショットは最終結果のプレビューです。
HTML を作成 - 車メーカーを持つ 3 つのタブがあり、選択した車の写真を読み込む igTileManager があります。
HTML の場合:
<h1 class="hOne">Infragistics Car Dealership</h1>
<h3>Choose a car brand to browse</h3>
<div id="car-tabs">
<ul>
<li><a href="#magarcedesDashboard">Magarcedes</a></li>
<li><a href="#hoidaDashboard">Hoida</a></li>
<li><a href="#pausheDashboard">Paushe</a></li>
</ul>
<div id="magarcedesDashboard" class="dashboard"></div>
<div id="hoidaDashboard" class="dashboard"></div>
<div id="pausheDashboard" class="dashboard"></div>
</div>
データソースの作成 - クラス CarData および Info、3 つの 車メーカーのデータを初期化します。すべてを Cars 配列に保存します。
TypeScript の場合:
/// <reference path="../../js/typings/jquery.d.ts" />
/// <reference path="../../js/typings/jqueryui.d.ts" />
/// <reference path="../../js/typings/igniteui.d.ts" />
class Info {
description: string
constructor(_description: string) {
this.description = _description;
}
}
class CarData {
name: string;
picture: string;
priceRange: string;
extras: Info[];
constructor(_name: string, _picture: string, _priceRange: string, _extras: Info[]) {
this.name = _name;
this.picture = _picture;
this.priceRange = _priceRange;
this.extras = _extras;
}
addExtra(_extra) {
this.extras.push(_extra);
}
}
var Magarcedes: CarData[] = [];
Magarcedes.push(new CarData("2013 LSL AMG", "../../images/samples/tile-manager/car-dealership/shutterstock_139519967.jpg",
"$199,500 - $206,000", [new Info("0-100 in 3.8 seconds"), new Info("Top speed: 317 km/h")]));
...
var Hoida: CarData[] = [];
Hoida.push(new CarData("2013 Candy", "../../images/samples/tile-manager/car-dealership/shutterstock_57034834.jpg",
"$21,661 - $29,404", [new Info("Gas I4 2.5L engine"), new Info("Highway fuel efficiency 35 mpg")]));
...
var Paushe: CarData[] = [];
Paushe.push(new CarData("2013 CST", "../../images/samples/tile-manager/car-dealership/shutterstock_38288989.jpg",
"$39,095 - $59,090", [new Info("Available All Wheel Drive"), new Info("Available touch-screen glide-up navigation with voice recognition"),
new Info("Leather seating surfaces"), new Info("Adaptive Remote Start")]));
...
var Cars: CarData[][] = [];
Cars.push(Magarcedes);
Cars.push(Hoida);
Cars.push(Paushe);
igTileManager の作成- igTileManager とタブを作成します。次に最初の車メーカーをあらかじめ選択し、タブが選択されたときに igTileManager データソースで更新するようタブを設定します。
TypeScript の場合:
$(function () {
var activated: boolean[] = [false, false, false, false],
options: IgTileManager = {
columnWidth: 210,
columnHeight: 210,
marginLeft: 10,
marginTop: 10,
dataSource: Cars,
items: [
{ rowIndex: 0, colIndex: 0, rowSpan: 2, colSpan: 2 },
{ rowIndex: 0, colIndex: 2, rowSpan: 1, colSpan: 1 },
{ rowIndex: 1, colIndex: 2, rowSpan: 1, colSpan: 1 },
{ rowIndex: 2, colIndex: 0, rowSpan: 1, colSpan: 1 },
{ rowIndex: 2, colIndex: 1, rowSpan: 1, colSpan: 1 },
{ rowIndex: 2, colIndex: 2, rowSpan: 1, colSpan: 1 }
],
maximizedTileIndex: 0,
maximizedState: '<figure><figcaption>${name}</figcaption><img src="${picture}" title="${Name}" alt="error" /></figure><ul><li>Price: ${priceRange}</li>' +
'{{each ${extras} }}<li>${extras.description}</li>{{/each}}</ul>',
minimizedState: '<figure><figcaption>${name}</figcaption><img src="${picture}" title="${Name}" alt="error" />'
};
// ページの読み込みで表示されるタブの初めての初期化
options.dataSource = Cars[0];
activated[0] = true;
$('#magarcedesDashboard').igTileManager(options);
var tabOptions: JQueryUI.TabsOptions = {
activate: function (event, ui) {
var index = ui.newTab.index();
if (!activated[index]) {
options.dataSource = Cars[index];
ui.newPanel.igTileManager(options);
activated[index] = true;
} else {
ui.newPanel.igTileManager('reflow');
}
}
}
$('#car-tabs').tabs(tabOptions);
});
このサンプルは、igDialog を TypeScript で使用する方法を紹介します。
以下のスクリーンショットは最終結果のプレビューです。
HTML を作成 - igDialog で Infragistics サイトを表示します。
HTML の場合:
<button id="openDialog"></button>
<div id="dialog">
<iframe src="http://www.infragistics.com" frameborder="0" width= "100%" height="100%"></iframe>
</div>
igDialog を作成 - igDialog を閉じた状態で作成します。ボタンの click イベントにイベント ハンドラーをアタッチすると、ボタンをクリックしたときにモーダル ダイアログが表示されます。
TypeScript の場合:
$(function () {
// Initialize the open button with igButton
$("#openDialog").igButton({ labelText: "Open Dialog" });
// Initialize the igDialog
$("#dialog").igDialog({
state: "closed",
modal: true,
draggable: false,
resizable: false,
height: 500,
width: 400
});
$("#openDialog").on({
click: function (e) {
// Open the igDialog
$("#dialog").igDialog("open");
}
});
});
このサンプルは、igTemplatingEngine を TypeScript で使用する方法を紹介します。
以下のスクリーンショットは最終結果のプレビューです。
HTML を作成 - このサンプルは、TypeScript で Infragistics テンプレート エンジンを使用してネストされたテンプレートを使用する方法を紹介します。この例では、各俳優の映画コレクションが繰り返され、映画データがツリーで表示されます。
HTML の場合:
<script id="colTmpl" type="text/template"></script>
<div id="resultGrid"></div>
Movie および Actor クラスを追加し、映画および俳優のデータを初期化します。
TypeScript の場合:
/// <reference path="http://www.igniteui.com/js/typings/jquery.d.ts" />
/// <reference path="http://www.igniteui.com/js/typings/jqueryui.d.ts" />
/// <reference path="http://www.igniteui.com/js/typings/igniteui.d.ts" />
class Movie {
name: string;
year: number;
genre: string;
rating: number;
languages: string;
subtitles: string;
constructor(inName: string, inYear: number, inGenre: string, inRating: number, inLanguage: string, inSubs: string) {
this.name = inName;
this.year = inYear;
this.genre = inGenre;
this.rating = inRating;
this.languages = inLanguage;
this.subtitles = inSubs;
}
}
class Actor {
firstName: string;
lastName: string;
nationality: Object;
movies: Movie[];
constructor(inFirstName: string, inLastName: string, inNationality: Object, inMoviesArray: Movie[]) {
this.firstName = inFirstName;
this.lastName = inLastName;
this.nationality = inNationality;
this.movies = inMoviesArray;
}
}
var moviesDWashington: Movie[] = [];
moviesDWashington.push(new Movie("American Gangster", 2007, "Biography, Crime, Drama", 7.9, "English, German", "Japanese, English"));
var moviesAJolie: Movie[] = [];
moviesAJolie.push(new Movie("In the Land of Blood and Honey", 2011, "Drama, Romance, War", 3.2, "English", "English, French"));
var moviesPCruz: Movie[] = [];
moviesPCruz.push(new Movie("Sahara", 2005, "Action, Adventure, Comedy", 5.9, "English, Spanish", "Japanese, French"));
var moviesGClooney: Movie[] = [];
moviesGClooney.push(new Movie("Ocean's Thirteen", 2007, "Crime, Thriller", 6.9, "English", "Spanish, French"));
var moviesJRoberts: Movie[] = [];
moviesJRoberts.push(new Movie("Eat Pray Love", 2010, "Drama, Romance", 5.3, "English, German", "Spanish, French"));
var actors: Actor[] = [];
actors.push(new Actor("Denzel", "Washington", { key: "USA", value: "USA" }, moviesDWashington));
次に igGrid および igTree コントロールを初期化します。
TypeScript の場合:
$(function () {
var i = 0, currentValue, limit,
imagesRoot = "http://www.igniteui.com/images/samples/templating-engine/multiConditionalColTemplate";
$("#resultGrid").igGrid({
dataSource: actors,
width: "100%",
autoGenerateColumns: false,
columns: [
{ headerText: "First Name", key: "firstName", width: 100 },
{ headerText: "Last Name", key: "lastName", width: 200 },
{ headerText: "Nationality", key: "nationality", width: 100, template: "<img width='20' height='15' src='" + imagesRoot + "/${nationality.key}.gif' /> ${nationality.value} " },
{ headerText: "Movies", key: "movies", width: 500, template: $("#colTmpl").html() },
],
rendered: function () {
initializeInnerControls();
},
features: [
{
name: "Paging",
type: "local",
pageSize: 3,
pageSizeChanged: function () {
initializeInnerControls();
},
pageIndexChanged: function () {
initializeInnerControls();
}
}
]
});
function initializeInnerControls() {
$(".tree").igTree({ hotTracking: false });
limit = $('.rating').length;
for (i = 0; i < limit; i++) {
currentValue = parseFloat($($('.rating')[i]).html());
$($('.rating')[i]).igRating({
voteCount: 10,
value: currentValue,
valueAsPercent: false,
precision: "exact"
});
}
}
});
このサンプルでは、データ構成のクラス ベースの方法を使用して TypeScript でデータ チャートを作成する方法を紹介します。
以下のスクリーンショットは最終結果のプレビューです。
HTML を作成します。
HTML の場合:
<div id="data-chart"></div>
<div class="USCensus-attribution">
Population data from:<br>
<a href="http://www.census.gov/" target="_blank">U.S. Census Bureau</a>
</div>
TypeScript でデータ ソースおよび igDataChart を作成します。
TypeScript の場合:
/// <reference path="http://www.igniteui.com/js/typings/jquery.d.ts" />
/// <reference path="http://www.igniteui.com/js/typings/jqueryui.d.ts" />
/// <reference path="http://www.igniteui.com/js/typings/igniteui.d.ts" />
class CountryPopulation {
countryName: string;
population2005: number;
population1995: number;
constructor(inName: string, populationIn1995: number, populationIn2005: number) {
this.countryName = inName;
this.population2005 = populationIn2005;
this.population1995 = populationIn1995;
}
}
var samplePopulation: CountryPopulation[] = [];
samplePopulation.push(new CountryPopulation("China", 1216, 1297));
samplePopulation.push(new CountryPopulation("India", 920, 1090));
samplePopulation.push(new CountryPopulation("United States", 266, 295));
samplePopulation.push(new CountryPopulation("Indonesia", 197, 229));
samplePopulation.push(new CountryPopulation("Brazil", 161, 186));
$(function () {
$("#data-chart").igDataChart({
width: "80%",
height: "400px",
title: "Population per Country",
subtitle: "Five largest projected populations for 1995 and 2005",
dataSource: samplePopulation,
axes: [
{
name: "NameAxis",
type: "categoryX",
title: "Country",
label: "countryName"
},
{
name: "PopulationAxis",
type: "numericY",
minimumValue: 0,
title: "Millions of People",
}
],
series: [
{
name: "1995Population",
title: "1995",
type: "column",
isDropShadowEnabled: true,
useSingleShadow: false,
shadowColor: "#666666",
isHighlightingEnabled: true,
isTransitionInEnabled: true,
xAxis: "NameAxis",
yAxis: "PopulationAxis",
valueMemberPath: "population1995",
showTooltip: true
},
{
name: "2005Population",
title: "2005",
type: "column",
isDropShadowEnabled: true,
useSingleShadow: false,
shadowColor: "#666666",
isHighlightingEnabled: true,
isTransitionInEnabled: true,
xAxis: "NameAxis",
yAxis: "PopulationAxis",
valueMemberPath: "population2005",
showTooltip: true
},
{
name: "categorySeries",
type: "categoryToolTipLayer",
useInterpolation: false,
transitionDuration: 150
},
{
name: "crosshairLayer",
title: "crosshair",
type: "crosshairLayer",
useInterpolation: false,
transitionDuration: 500
}
]
});
})
このサンプルでは、凡例および複数のレイアウト オプションを持つ円チャート コントロールを TypeScript で作成する方法を紹介します。
以下のスクリーンショットは最終結果のプレビューです。
HTML を作成 - ラベル位置、線、角度、半径、および凡例を含む複数のオプション設定が可能な円チャートを作成します。
HTML の場合:
<div id="pieChart"></div>
<div id="legend"></div>
<table class="options">
<tr>
<td>Start Angle:</td>
<td>
<div id="angle" class="slider"></div>
</td>
</tr>
<tr>
<td>Radius:</td>
<td>
<div id="radius" class="slider"></div>
</td>
</tr>
<tr>
<td>Label Position:</td>
<td>
<div class="comboContainer">
<select id="labelPosition">
<option value="none">None</option>
<option value="center">Center</option>
<option value="insideEnd">Inside End</option>
<option value="outsideEnd" selected="selected">Outside End</option>
<option value="bestFit">Best Fit</option>
</select>
</div>
</td>
</tr>
<tr>
<td>Leader Line:</td>
<td>
<div class="comboContainer">
<select id="leaderLine">
<option value="straight" selected="selected">Straight</option>
<option value="arc">Arc</option>
<option value="spline">Spline</option>
</select>
</div>
</td>
</tr>
</table>
データ ソースを作成 - PieChartCountryPopulation クラスを追加し、国人口データを初期化します。PieChartCountryPopulation 配列に保存されます。
TypeScript の場合:
/// <reference path="../../js/typings/jquery.d.ts" />
/// <reference path="../../js/typings/jqueryui.d.ts" />
/// <reference path="../../js/typings/igniteui.d.ts" />
class PieChartCountryPopulation {
countryName: string;
population2008: number;
constructor(inName: string, populationIn2008: number) {
this.countryName = inName;
this.population2008 = populationIn2008;
}
}
var pieChartSample: PieChartCountryPopulation[] = [];
pieChartSample.push(new PieChartCountryPopulation("China", 1333));
pieChartSample.push(new PieChartCountryPopulation("India", 1140));
pieChartSample.push(new PieChartCountryPopulation("United States", 304));
pieChartSample.push(new PieChartCountryPopulation("Indonesia", 228));
pieChartSample.push(new PieChartCountryPopulation("Brazil", 192));
igPieChart を作成 - レイアウトを構成するために、igPieChart、その他の必要なコントロール (igCombo、slider、など) を作成します。
$(function () {
$('#pieChart').igPieChart({
dataSource: pieChartSample,
width: "430px",
height: "430px",
dataLabel: 'countryName',
dataValue: 'population2008',
explodedSlices: [2, 3, 4],
radiusFactor: .6,
startAngle: -30,
labelsPosition: "outsideEnd",
leaderLineType: "straight",
labelExtent: 40,
legend: { element: 'legend', type: "item" }
});
$("#angle").slider({
slide: function (event, ui) {
$("#pieChart").igPieChart("option", "startAngle", ui.value);
},
min: 0,
max: 360
});
$("#radius").slider({
slide: function (event, ui) {
$("#pieChart").igPieChart("option", "radiusFactor", ui.value / 1000.0);
},
min: 0,
max: 1000,
value: 600
});
$("#labelPosition").igCombo({
enableClearButton: false,
mode: "dropdown",
selectionChanged: function (evt, ui) {
if ($.isArray(ui.items) && ui.items[0] != undefined) {
$("#pieChart").igPieChart("option", "labelsPosition", ui.items[0].data.value);
$("#labelExtent").slider("option", "disabled", ui.items[0].data.value != "outsideEnd");
$("#leaderLine").igCombo("option", "disabled", ui.items[0].data.value != "outsideEnd" ? true : false);
}
}
});
$("#leaderLine").igCombo({
enableClearButton: false,
mode: "dropdown",
selectionChanged: function (evt, ui) {
if ($.isArray(ui.items) && ui.items[0] != undefined) {
$("#pieChart").igPieChart("option", "leaderLineType", ui.items[0].data.value);
}
}
});
});
このサンプルは、igTree を TypeScript で使用する方法を紹介します。
以下のスクリーンショットは最終結果のプレビューです。
HTML を作成 - フォルダーおよびファイルを含むファイル エクスプローラーを表す igTree を作成します。
HTML の場合:
<div id="tree"></div>
データ ソースを作成 - フォルダー、サブフォルダー、およびファイルを含む階層構造を作成します。
TypeScript の場合:
/// <reference path="../../js/typings/jquery.d.ts" />
/// <reference path="../../js/typings/jqueryui.d.ts" />
/// <reference path="../../js/typings/igniteui.d.ts" />
class FileType {
name: string;
type: string;
imageUrl: string;
folder: FileType[];
constructor(inName: string, inType: string, inImageUrl: string, inFolder: FileType[]) {
this.name = inName;
this.type = inType;
this.imageUrl = inImageUrl;
this.folder = inFolder;
}
}
function createSubfolderFiles(parentFolder: FileType, subFolders: string[], files: string[][],
folderPicture: string, filePicture: string) {
var fileIndex, subFolderIndex;
for (subFolderIndex = 0; subFolderIndex < subFolders.length; subFolderIndex++) {
parentFolder.folder.push(new FileType(subFolders[subFolderIndex], "Folder", folderPicture, []));
for (fileIndex = 0; fileIndex < files[subFolderIndex].length; fileIndex++) {
parentFolder.folder[subFolderIndex].folder.push(new FileType(files[subFolderIndex][fileIndex], "File", filePicture, []));
}
}
}
var folderMusic = new FileType("Music", "Folder", "../../images/samples/tree/book.png", []);
var musicSubFolders = ["Y.Malmsteen", "WhiteSnake", "AC/DC", "Rock"];
var musicFiles = [["Making Love", "Rising Force", "Fire and Ice"], ["Trouble", "Bad Boys", "Is This Love"],
["ThunderStruck", "T.N.T.", "The Jack"], ["Bon Jovi - Always"]];
createSubfolderFiles(folderMusic, musicSubFolders, musicFiles, "../../images/samples/tree/book.png", "../../images/samples/tree/music.png");
...
var folderDeleted = new FileType("Deleted", "Folder", "../../images/samples/tree/bin_empty.png", []);
var folderComputer = new FileType("Computer", "Folder", "../../images/samples/tree/computer.png", []);
folderComputer.folder.push(folderMusic);
folderComputer.folder.push(folderDocuments);
folderComputer.folder.push(folderPictures);
folderComputer.folder.push(folderNetwork);
folderComputer.folder.push(folderDeleted);
var files = [folderComputer];
igTree を作成 - igTree を作成し、生成されたデータ ソースにバインドします。
TypeScript の場合:
$(function () {
var options: IgTree = {
checkboxMode: 'triState',
singleBranchExpand: true,
dataSource: $.extend(true, [], files),
initialExpandDepth: 0,
pathSeparator: '.',
bindings: {
textKey: 'name',
valueKey: 'type',
imageUrlKey: 'imageUrl',
childDataProperty: 'folder'
},
dragAndDrop: true,
dragAndDropSettings: {
allowDrop: true,
customDropValidation: function (element) {
// Validates the drop target
var valid = true,
droppableNode = $(this);
if (droppableNode.is('a') && droppableNode.closest('li[data-role=node]').attr('data-value') === 'File') {
valid = false;
}
return valid;
}
}
}
$("#tree").igTree(options);
});
このサンプルでは、バーコードの作成時の TypeScript の使用方法およびその設定の構成を紹介します。
以下のスクリーンショットは最終結果のプレビューです。
HTML を作成 - Infragistics サイトへのハイパーリンクを含むデータに基づいてバーコードを作成します。バーコード モードを変更するには、エンコード モードおよび ECI ヘッダーの表示モードを使用します。
HTML の場合:
<table class="options">
<tr>
<td style="text-align:left;">
<div id="barcode"></div>
</td>
</tr>
<tr>
<td>Data:</td>
<td>
<input id='combo' dir="ltr"></input>
</td>
<td>
<input id="setButton" type="button" value="Set" style="width:50px; float: left;" />
</td>
</tr>
<tr>
<td>Encoding Mode:</td>
<td>
<div class="comboContainer">
<select id="encodingMode">
<option value="undefined">Undefined</option>
<option value="numeric">Numeric</option>
<option value="alphanumeric">Alphanumeric</option>
<option value="byte" selected="selected">Byte</option>
<option value="anji">Kanji</option>
</select>
</div>
</td>
</tr>
<tr>
<td>Eci Header Display Mode:</td>
<td>
<div class="comboContainer">
<select id="eciHeaderDisplayMode">
<option value="hide" selected="selected">Hide</option>
<option value="show">Show</option>
</select>
</div>
</td>
</tr>
</table>
データ ソースを作成 - IGProducts クラスを追加し、 Infragistics 製品データを初期化します。すべてが igProductsData 配列に保存されます。
TypeScript の場合:
/// <reference path="../../js/typings/jquery.d.ts" />
/// <reference path="../../js/typings/jqueryui.d.ts" />
/// <reference path="../../js/typings/igniteui.d.ts" />
class IGProducts {
id: number;
name: string;
constructor(productId: number, productName: string) {
this.id = productId;
this.name = productName;
}
}
var igProductsData: IGProducts[] = [];
igProductsData.push(new IGProducts(1, "http://www.infragistics.com/products/ultimate"));
igProductsData.push(new IGProducts(2, "http://www.infragistics.com/products/professional"));
igProductsData.push(new IGProducts(3, "http://www.infragistics.com/products/jquery"));
igBarcode を作成 - レイアウトを構成するために、igBarcode、その他の必要なコントロール (igCombo、など) を作成します。
$(function () {
$("#barcode").igQRCodeBarcode({
height: "300px",
width: "100%",
data: "http://www.infragistics.com/products/jquery/samples",
});
$("#dataInput").igTextEditor({
width: "300px",
value: "http://www.infragistics.com/products/jquery/help"
});
$("#setButton").click(function () {
$("#barcode").igQRCodeBarcode("option", "data", $("#dataInput").igTextEditor("value"));
});
$('#combo').igCombo({
dataSource: igProductsData,
textKey: 'Name',
valueKey: 'ID',
width: "500px",
initialSelectedItems: [{
index: 0
}]
});
$("#encodingMode").igCombo({
enableClearButton: false,
mode: "dropdown",
selectionChanged: function (evt, ui) {
if ($.isArray(ui.items) && ui.items[0] != undefined) {
$("#barcode").igQRCodeBarcode("option", "encodingMode", ui.items[0].data.value);
}
}
});
$("#eciHeaderDisplayMode").igCombo({
enableClearButton: false,
mode: "dropdown",
selectionChanged: function (evt, ui) {
if ($.isArray(ui.items) && ui.items[0] != undefined) {
$("#barcode").igQRCodeBarcode("option", "eciHeaderDisplayMode", ui.items[0].data.value);
}
}
});
});
このサンプルでは、レイアウト マネージャーのグリッド レイアウトを構成する方法を紹介します。定義済みサイズのグリッドで項目を任意の位置に配置する機能も紹介します。
以下のスクリーンショットは最終結果のプレビューです。
HTML を作成 - コンテンツを体系化し、さまざまなコンテナー レイアウトの設定が可能なグリッド レイアウトのレイアウト マネージャーを作成します。
HTML の場合:
..
<style type="text/css">
ul {
list-style-type: none;
font-family: Verdana;
}
#layout {
position: relative;
}
.ig-layout-item {
font-size: 20px;
}
@media all and (max-width: 480px) {
.ig-layout-item {
font-size: 16px;
}
}
</style>
</head>
<body>
<div id="layout"></div>
</body>
..
igLayoutManager を作成 - レイアウトの構造を構成するために、items および gridLayout オプションを変更します。
TypeScript の場合:
/// <reference path="../../js/typings/jquery.d.ts" />
/// <reference path="../../js/typings/jqueryui.d.ts" />
/// <reference path="../../js/typings/igniteui.d.ts" />
$(function () {
options: IgLayoutManager = {
layoutMode: "grid",
width: "100%",
height: "600px",
gridLayout: { cols: 3, rows: 3 },
items: [
{ rowSpan: 2, colSpan: 2, colIndex: 0, rowIndex: 0 },
{ rowSpan: 1, colSpan: 1, rowIndex: 0, colIndex: 2 },
{ rowSpan: 1, colSpan: 1, rowIndex: 1, colIndex: 2 },
{ rowSpan: 1, colSpan: 3, colIndex: 0, rowIndex: 2 }
],
itemRendered: function(evt, ui){
args.item.append("<ul><li>colspan: " + args.itemData.colSpan + "</li><li>rowspan: " + args.itemData.rowSpan + "</li></ul></span>");
// get the element
if (args.itemData.colSpan == 2 && args.itemData.rowSpan == 2) {
args.item.css("background-color", "#eee");
args.item.css("color", "#555");
} else if (args.itemData.rowSpan == 1 && args.itemData.colSpan == 1) {
if (args.itemData.rowIndex == 0) {
args.item.css("background-color", "#2CBDF9");
args.item.css("color", "#FFF");
} else {
args.item.css("background-color", "#FFA72D");
args.item.css("color", "#FFF");
}
} else {
args.item.css("background-color", "#2CBDF9");
args.item.css("color", "#FFF");
}
}
};
$('#layout').igLayoutManager(options);
});
このサンプルでは、TypeScript を使用して igPivotView を作成する方法、そしてクラス ベースのアプローチでデータを割り当てる方法も紹介します。
以下のスクリーンショットは最終結果のプレビューです。
HTML を作成 - igPivotGrid、igPivotDataSelector、および igSplitter の 3 つのコンポーネントを含むピボット グリッド ビューを作成します。
HTML の場合:
<div id="pivotView"></div>
igPivotView を作成 - ピボット グリッドで多次元 (OLAP) データを操作するツールを提供します。
TypeScript の場合:
/// <reference path="../../js/typings/jquery.d.ts" />
/// <reference path="../../js/typings/jqueryui.d.ts" />
/// <reference path="../../js/typings/igniteui.d.ts" />
class SelectorProduct {
ProductCategory: string;
SellerName: string;
Country: string;
City: string;
Date: string;
UnitPrice: number;
UnitsSold: number;
constructor(public category, public sellerName, public country, public city,
public date, public unitPrice, public unitsSold) {
this.ProductCategory = category;
this.SellerName = sellerName;
this.Country = country;
this.City = city;
this.Date = date;
this.UnitPrice = unitPrice;
this.UnitsSold = unitsSold;
}
}
var dataView: SelectorProduct[] = [];
dataView.push(new SelectorProduct("Clothing", "Stanley Brooker", "Bulgaria", "Plovdiv", "01/01/2012", 12.81, 282));
dataView.push(new SelectorProduct("Clothing", "Elisa Longbottom", "US", "New York", "01/05/2013", 49.57, 296));
dataView.push(new SelectorProduct("Bikes", "Lydia Burson", "Uruguay", "Ciudad de la Costa", "01/06/2011", 3.56, 68));
dataView.push(new SelectorProduct("Accessories", "David Haley", "UK", "London", "04/07/2012", 85.58, 293));
dataView.push(new SelectorProduct("Components", "John Smith", "Japan", "Yokohama", "12/08/2012", 18.13, 240));
dataView.push(new SelectorProduct("Clothing", "Larry Lieb", "Uruguay", "Ciudad de la Costa", "05/12/2011", 68.33, 456));
dataView.push(new SelectorProduct("Components", "Walter Pang", "Bulgaria", "Sofia", "02/19/2013", 16.05, 492));
function saleValueCalculator(items, cellMetadata) {
var sum = 0;
$.each(items, function (index, item) {
sum += item.UnitPrice * item.UnitsSold;
});
return (Math.round(sum * 10) / 10).toFixed(2);
};
dataSource = new $.ig.OlapFlatDataSource({
dataSource: dataView,
metadata: {
cube: {
name: "Sales",
caption: "Sales",
measuresDimension: {
caption: "Measures",
measures: [ //for each measure, name and aggregator are required
{
caption: "Units Sold", name: "UnitsSold",
aggregator: $.ig.OlapUtilities.prototype.sumAggregator('UnitsSold')
},
{
caption: "Unit Price", name: "UnitPrice",
aggregator: $.ig.OlapUtilities.prototype.sumAggregator('UnitPrice')
},
{
caption: "Sale Value", name: "SaleValue", aggregator: saleValueCalculator
}]
},
dimensions: [ // for each dimension
{
caption: "Date", name: "Date", /*displayFolder: "Folder1\\Folder2",*/ hierarchies: [
$.ig.OlapUtilities.prototype.getDateHierarchy(
"Date", // the source property name
["year", "quarter", "month", "date"], // the date parts for which levels will be generated (optional)
"Dates", // The name for the hierarchy (optional)
"Date", // The caption for the hierarchy (optional)
["Year", "Quarter", "Month", "Day"], // the captions for the levels (optional)
"All Periods") // the root level caption (optional)
]
},
{
caption: "Location", name: "Location", hierarchies: [{
caption: "Location", name: "Location", levels: [
{
name: "AllLocations", caption: "All Locations",
memberProvider: function (item) { return "All Locations"; }
},
{
name: "Country", caption: "Country",
memberProvider: function (item) { return item.Country; }
},
{
name: "City", caption: "City",
memberProvider: function (item) { return item.City; }
}]
}]
},
{
caption: "Product", name: "Product", hierarchies: [{
caption: "Product", name: "Product", levels: [
{
name: "AllProducts", caption: "All Products",
memberProvider: function (item) { return "All Products"; }
},
{
name: "ProductCategory", caption: "Category",
memberProvider: function (item) { return item.ProductCategory; }
}]
}]
},
{
caption: "Seller", name: "Seller", hierarchies: [{
caption: "Seller", name: "Seller", levels: [
{
name: "AllSellers", caption: "All Sellers",
memberProvider: function (item) { return "All Sellers"; }
},
{
name: "SellerName", caption: "Seller",
memberProvider: function (item) { return item.SellerName; }
}]
}]
}]
}
},
rows: "[Date].[Dates]",
columns: "[Product].[Product]",
measures: "[Measures].[UnitsSold]"
});
$(function () {
$("#pivotView").igPivotView({
dataSource: dataSource
});
});
このサンプルでは、TypeScript を使用して、地理図形シリーズで世界の国のデータベースおよびシェープ ファイルをマップコントロールにバインドする方法を紹介します。
以下のスクリーンショットは最終結果のプレビューです。
HTML を作成 - 国をホバーしたときにツールチップを表示するマップを作成します。
HTML の場合:
<script id="geoShapeTooltip" type="text/x-jquery-tmpl"></script>
<div id="map"></div>
igMap を初期化して地理図形シリーズを定義します。
TypeScript の場合:
/// <reference path="http://www.igniteui.com/js/typings/jquery.d.ts" />
/// <reference path="http://www.igniteui.com/js/typings/jqueryui.d.ts" />
/// <reference path="http://www.igniteui.com/js/typings/igniteui.d.ts" />
class ColorPicker {
brushes: string[];
interval: number;
constructor(_min: number, _max: number) {
this.brushes = ["#d9c616", "#d96f17", "#d1150c"];
this.interval = (_max - _min) / (this.brushes.length - 1);
}
getColorByIndex(val) {
var index = Math.round(val / this.interval);
if (index < 0) {
index = 0;
} else if (index > (this.brushes.length - 1)) {
index = this.brushes.length - 1;
}
return this.brushes[index];
}
}
var colorPicker = new ColorPicker(100000, 500000000);
$(function () {
$("#map").igMap({
width: "700px",
height: "500px",
windowRect: { left: 0.1, top: 0.1, height: 0.7, width: 0.7 },
overviewPlusDetailPaneVisibility: "visible",
overviewPlusDetailPaneBackgroundImageUri: "http://www.igniteui.com/images/samples/maps/world.png",
series: [{
type: "geographicShape",
name: "worldCountries",
markerType: "none",
shapeMemberPath: "points",
shapeDataSource: 'http://www.igniteui.com/data-files/shapes/world_countries_reg.shp',
databaseSource: 'http://www.igniteui.com/data-files/shapes/world_countries_reg.dbf',
opacity: 0.8,
outlineThickness: 1,
showTooltip: true,
tooltipTemplate: "geoShapeTooltip",
shapeStyleSelector: {
selectStyle: function (s, o) {
var pop = s.fields.item("POP2005");
var popInt = parseInt(pop);
var colString = colorPicker.getColorByIndex(popInt); //getColorValue(popInt);
return {
fill: colString,
stroke: "gray"
};
}
}
}]
});
$("#map").find(".ui-widget-content").append("<span class='copyright-notice'><a href='http://www.openstreetmap.org/copyright'>© OpenStreetMap contributors</a></span>");
});
このサンプルでは、TypeScript で Infragistics ローダーを使用して複数のコンポーネントと機能の読み込みを紹介します。表示されるデータ チャートの型がコンボ ボックスから選択されます。データ チャートの凡例も含まれています。
以下のスクリーンショットは最終結果のプレビューです。
HTML を作成します。
HTML の場合:
<div class="selectionOptions">
<select id="seriesType">
<option value="radialLine" selected="selected">Radial Line</option>
<option value="radialColumn">Radial Column</option>
<option value="radialPie">Radial Pie</option>
</select>
</div>
<div id="chart"></div>
<div id="legend"></div>
TypeScript でデータ、igLoader、igDataChart、および igCombo を作成します。
TypeScript の場合:
/// <reference path="http://www.igniteui.com/js/typings/jquery.d.ts" />
/// <reference path="http://www.igniteui.com/js/typings/jqueryui.d.ts" />
/// <reference path="http://www.igniteui.com/js/typings/igniteui.d.ts" />
class DepartmentData {
label: string;
budget: number;
spending: number;
constructor(_label: string, _budget: number, _spending: number) {
this.label = _label;
this.budget = _budget;
this.spending = _spending;
}
}
var companyData: DepartmentData[] = [];
companyData.push(new DepartmentData("Administration", 75, 35));
companyData.push(new DepartmentData("Sales", 30, 80));
companyData.push(new DepartmentData("IT", 60, 20));
companyData.push(new DepartmentData("Marketing", 50, 70));
companyData.push(new DepartmentData("Development", 80, 40));
companyData.push(new DepartmentData("Support", 20, 45));
$.ig.loader({
scriptPath: "http://www.igniteui.com/igniteui/js/",
cssPath: "http://www.igniteui.com/igniteui/css/",
resources: "igDataChart.Radial,igCombo, igChartLegend"
});
// jQuery's ready event can be used with the loader.
// The loader calls holdReady until all JS and CSS files are loaded.
$(function () {
$("#chart").igDataChart({
width: "500px",
height: "500px",
dataSource: companyData,
legend: { element: "legend" },
axes: [{
name: "angleAxis",
type: "categoryAngle",
label: "label",
interval: 1
}, {
name: "radiusAxis",
type: "numericRadius",
innerRadiusExtentScale: .1,
maximumValue: 100,
minimumValue: 0,
interval: 25,
radiusExtentScale: .6
}],
series: [{
name: "series1",
title: 'Budget',
type: "radialLine",
angleAxis: "angleAxis",
valueAxis: "radiusAxis",
valueMemberPath: "budget",
thickness: 5,
markerType: "circle"
}, {
name: "series2",
title: 'Spending',
type: "radialLine",
angleAxis: "angleAxis",
valueAxis: "radiusAxis",
valueMemberPath: "spending",
thickness: 5,
markerType: "circle"
}],
horizontalZoomable: true,
verticalZoomable: true,
windowResponse: "immediate"
});
$("#seriesType").igCombo({
selectionChanged: function (evt, ui) {
if (ui.items[0].data.value != undefined) {
$("#chart").igDataChart("option", "series", [{
name: "series1", remove: true
}, {
name: "series2", remove: true
}, {
name: "series1",
title: "Budget",
type: ui.items[0].data.value,
angleAxis: "angleAxis",
valueAxis: "radiusAxis",
valueMemberPath: "budget",
thickness: 5,
markerType: "circle"
}, {
name: "series2",
title: 'Spending',
type: ui.items[0].data.value,
angleAxis: "angleAxis",
valueAxis: "radiusAxis",
valueMemberPath: "spending",
thickness: 5,
markerType: "circle"
}]);
}
}
});
});
以下のトピックでは、このトピックに関連する追加情報を提供しています。
TypeScript で Ignite UI for jQuery を使用 - このトピックでは、Ignite UI for jQuery の型定義を TypeScript で使用する方法の概要を説明します。
オンラインで表示: GitHub