<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" />
<!-- Modernizr/jQuery/jQuery UI -->
<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>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>
</head>
<body>
<style type="text/css">
.dashboard {
position: relative;
width: 100%;
height: 700px;
}
.ui-igtile.ui-state-hover {
border: none;
background-color: transparent;
background-image: none;
}
.ui-igtile-inner-container {
padding:5px;
height:100%;
border:none;
background-color: transparent;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.ui-igtile {
background-color: inherit;
padding:0px;
border:none;
z-index:1;
overflow:hidden
}
.ui-igtile-minimized p:hover {
opacity: 1.0;
}
.ui-igtile-minimized p:first-line {
}
.ui-igtile-minimized p {
opacity: 0.0;
}
.ui-igtile h3, .ui-igtile p {
margin:10px 0 10px 10px;
-webkit-transition:0.2s;
transition:0.2s;
}
.ig-tile-minimize-button {
padding:10px;
}
.ui-igtile-inner-container {
color: #fff;
}
.ig-tile-minimize-button .ig-tile-minimize-icon {
background-position: 0px -240px;
}
.tile4.ui-igtile-inner-container,
.tile8.ui-igtile-inner-container,
.tile10.ui-igtile-inner-container {
color: rgba(0, 0, 0, 0.75);
}
.tile4 .ig-tile-minimize-icon,
.tile8 .ig-tile-minimize-icon,
.tile10 .ig-tile-minimize-icon {
background-position: 0px -209px;
}
.tile1.ui-igtile-inner-container { /*iglightblue*/
background-color: #44ACD6;
color: #fff;
}
.tile2.ui-igtile-inner-container { /*igdarkgray*/
background-color: #494949;
color: #fff;
}
.tile3.ui-igtile-inner-container { /*iglightgreen*/
background-color: #A4BA29;
color: #fff;
}
.tile4.ui-igtile-inner-container { /*iglightyellow*/
background-color: #FDBD48;
}
.tile5.ui-igtile-inner-container { /*iglightpink*/
background-color: #FF6A6F;
color: #fff;
}
.tile7.ui-igtile-inner-container { /*igdarkblue*/
background-color: #216E99;
color: #fff;
}
.tile6.ui-igtile-inner-container { /*iglightpurple*/
background-color: #9E73C1;
color: #fff;
}
.tile8.ui-igtile-inner-container { /*iglightgray*/
background-color: #A8A8A8;
color: #fff;
}
.tile9.ui-igtile-inner-container { /*igdarkgreen*/
background-color: #48892D;
}
.tile10.ui-igtile-inner-container { /*igorange*/
background-color: #F79036;
}
.tile11.ui-igtile-inner-container { /*igdarkpink*/
background-color: #D3404B;
}
.tile12.ui-igtile-inner-container { /*igdarkpurple*/
background-color: #793BAC;
color: #fff;
}
@media all and (max-width: 420px) {
.ui-igtile h3 {
margin: 0;
}
}
</style>
<div id="dashboard" class="dashboard">
<div class="tile1">
<h3>Lorem Ipsum の概要</h3>
<p>Lorem Ipsum は印刷業界で一般的に使用されているダミー テキストです。16 世紀に書籍の見本を作成するために初めて使用されて以来、印刷業で標準のダミー テキストになりました。電子文書に画期的な進歩があった現在も引き続き使用されています。Lorem Ipsum を含む Letraset シートのリリースで大衆文化に入り、最近では Aldus PageMaker などのソフトにも Lorem Ipsum が含まれます。</p>
</div>
<div class="tile2">
<h3>用途</h3>
<p>閲覧者がレイアウトを確認する際に、その内容が理解できてしまうとレイアウトの確認の妨げになることがあります。Lorem Ipsum は、「コンテンツをここに挿入する」などのテキストを使用する代わりに英字を正規分布させ、判読可能な英語のように表示したものです。デスクトップ パブリッシング パッケージや web ページのエディターの多くは、Lorem Ipsum を既定のモデル テキストとして使用します。「lorem ipsum」を web で検索すると、構築中の web サイトを見つけることができます。時がたつにつれてさまざまなバージョンが出てきました。中にはユーモアのあるコンテンツを含むバージョンもあります。</p>
</div>
<div class="tile3">
<h3>起源</h3>
<p>Lorem Ipsum はランダムなテキストではありません。45 BC 年の古代ラテン文化で作成された 2000 年前のテキストです。バージニアの Hampden-Sydney 大学のラテン文学の教授であるリチャード・マッククリントック氏は、Lorem Ipsum テキストであまり使用されていないラテン言語「consectetur」を研究し、古典文学の都市を訪れ、その起源を探究しました。Lorem Ipsum は、哲学者キケロによる BC 45 年の著作「de Finibus Bonorum et Malorum」(善と悪の究極について) の 1.10.32 および 1.10.33 から取られている。この本は倫理の理論についての本でルネッサンス期に人気のあった本です。Lorem Ipsum の最初の行、「Lorem ipsum dolor sit amet...」、はセクション 1.10.32 の行にあります。 1500 年から使用される Lorem Ipsum の規格テキストは、以下に表示されています。キケロの「de Finibus Bonorum et Malorum」のセクション 1.10.32 および 1.10.33 も元の形式で提供されています。H. Rackham の 1914 年の英語版も提供します。</p>
</div>
<div class="tile4">
<h3>入手</h3>
<p>多くの Lorem Ipsum のバージョンがありますが、ユーモアやランダムな言葉の使用など、異なるバージョンが多く存在します。Lorem Ipsum を使用する場合は、禁止用語などが使用されていないバージョンを使用してください。インターネットの Lorem Ipsum ジェネレーターは必要に応じて定義済みのテキストを繰り返します。つまり、このジェネレーターが最初の本当のジェネレーターとなります。200 以上のラテン単語の辞書を使用し、複数のモデル分構造を使用して Lorem Ipsum テキストを生成します。生成される Lorem Ipsum は繰り返しやユーモアは使用されず、またランダムな単語も挿入されません。</p>
</div>
<div class="tile5">
<h3>Lorem Ipsum の概要</h3>
<p>Lorem Ipsum は印刷業界で一般的に使用されているダミー テキストです。16 世紀に書籍の見本を作成するために初めて使用されて以来、印刷業で標準のダミー テキストになりました。電子文書に画期的な進歩があった現在も引き続き使用されています。Lorem Ipsum を含む Letraset シートのリリースで大衆文化に入り、最近では Aldus PageMaker などのソフトにも Lorem Ipsum が含まれます。</p>
</div>
<div class="tile6">
<h3>用途</h3>
<p>閲覧者がレイアウトを確認する際に、その内容が理解できてしまうとレイアウトの確認の妨げになることがあります。Lorem Ipsum は、「コンテンツをここに挿入する」などのテキストを使用する代わりに英字を正規分布させ、判読可能な英語のように表示したものです。デスクトップ パブリッシング パッケージや web ページのエディターの多くは、Lorem Ipsum を既定のモデル テキストとして使用します。「lorem ipsum」を web で検索すると、構築中の web サイトを見つけることができます。時がたつにつれてさまざまなバージョンが出てきました。中にはユーモアのあるコンテンツを含むバージョンもあります。</p>
</div>
<div class="tile7">
<h3>起源</h3>
<p>Lorem Ipsum はランダムなテキストではありません。45 BC 年の古代ラテン文化で作成された 2000 年前のテキストです。バージニアの Hampden-Sydney 大学のラテン文学の教授であるリチャード・マッククリントック氏は、Lorem Ipsum テキストであまり使用されていないラテン言語「consectetur」を研究し、古典文学の都市を訪れ、その起源を探究しました。Lorem Ipsum は、哲学者キケロによる BC 45 年の著作「de Finibus Bonorum et Malorum」(善と悪の究極について) の 1.10.32 および 1.10.33 から取られている。この本は倫理の理論についての本でルネッサンス期に人気のあった本です。Lorem Ipsum の最初の行、「Lorem ipsum dolor sit amet...」、はセクション 1.10.32 の行にあります。 1500 年から使用される Lorem Ipsum の規格テキストは、以下に表示されています。キケロの「de Finibus Bonorum et Malorum」のセクション 1.10.32 および 1.10.33 も元の形式で提供されています。H. Rackham の 1914 年の英語版も提供します。</p>
</div>
<div class="tile8">
<h3>入手</h3>
<p>多くの Lorem Ipsum のバージョンがありますが、ユーモアやランダムな言葉の使用など、異なるバージョンが多く存在します。Lorem Ipsum を使用する場合は、禁止用語などが使用されていないバージョンを使用してください。インターネットの Lorem Ipsum ジェネレーターは必要に応じて定義済みのテキストを繰り返します。つまり、このジェネレーターが最初の本当のジェネレーターとなります。200 以上のラテン単語の辞書を使用し、複数のモデル分構造を使用して Lorem Ipsum テキストを生成します。生成される Lorem Ipsum は繰り返しやユーモアは使用されず、またランダムな単語も挿入されません。</p>
</div>
<div class="tile9">
<h3>Lorem Ipsum の概要</h3>
<p>Lorem Ipsum は印刷業界で一般的に使用されているダミー テキストです。16 世紀に書籍の見本を作成するために初めて使用されて以来、印刷業で標準のダミー テキストになりました。電子文書に画期的な進歩があった現在も引き続き使用されています。Lorem Ipsum を含む Letraset シートのリリースで大衆文化に入り、最近では Aldus PageMaker などのソフトにも Lorem Ipsum が含まれます。</p>
</div>
<div class="tile10">
<h3>用途</h3>
<p>閲覧者がレイアウトを確認する際に、その内容が理解できてしまうとレイアウトの確認の妨げになることがあります。Lorem Ipsum は、「コンテンツをここに挿入する」などのテキストを使用する代わりに英字を正規分布させ、判読可能な英語のように表示したものです。デスクトップ パブリッシング パッケージや web ページのエディターの多くは、Lorem Ipsum を既定のモデル テキストとして使用します。「lorem ipsum」を web で検索すると、構築中の web サイトを見つけることができます。時がたつにつれてさまざまなバージョンが出てきました。中にはユーモアのあるコンテンツを含むバージョンもあります。</p>
</div>
<div class="tile11">
<h3>起源</h3>
<p>Lorem Ipsum はランダムなテキストではありません。45 BC 年の古代ラテン文化で作成された 2000 年前のテキストです。バージニアの Hampden-Sydney 大学のラテン文学の教授であるリチャード・マッククリントック氏は、Lorem Ipsum テキストであまり使用されていないラテン言語「consectetur」を研究し、古典文学の都市を訪れ、その起源を探究しました。Lorem Ipsum は、哲学者キケロによる BC 45 年の著作「de Finibus Bonorum et Malorum」(善と悪の究極について) の 1.10.32 および 1.10.33 から取られている。この本は倫理の理論についての本でルネッサンス期に人気のあった本です。Lorem Ipsum の最初の行、「Lorem ipsum dolor sit amet...」、はセクション 1.10.32 の行にあります。 1500 年から使用される Lorem Ipsum の規格テキストは、以下に表示されています。キケロの「de Finibus Bonorum et Malorum」のセクション 1.10.32 および 1.10.33 も元の形式で提供されています。H. Rackham の 1914 年の英語版も提供します。</p>
</div>
<div class="tile12">
<h3>入手</h3>
<p>多くの Lorem Ipsum のバージョンがありますが、ユーモアやランダムな言葉の使用など、異なるバージョンが多く存在します。Lorem Ipsum を使用する場合は、禁止用語などが使用されていないバージョンを使用してください。インターネットの Lorem Ipsum ジェネレーターは必要に応じて定義済みのテキストを繰り返します。つまり、このジェネレーターが最初の本当のジェネレーターとなります。200 以上のラテン単語の辞書を使用し、複数のモデル分構造を使用して Lorem Ipsum テキストを生成します。生成される Lorem Ipsum は繰り返しやユーモアは使用されず、またランダムな単語も挿入されません。</p>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#dashboard').igTileManager({
columnWidth: '25%',
marginLeft: 10,
marginTop: 10,
splitterOptions: {
enabled: true,
collapsible: true
},
items: [
{ rowIndex: 0, colIndex: 0, rowSpan: 2, colSpan: 1 },
{ rowIndex: 0, colIndex: 1, rowSpan: 1, colSpan: 2 },
{ rowIndex: 0, colIndex: 3, rowSpan: 1, colSpan: 1 },
{ rowIndex: 1, colIndex: 1, rowSpan: 1, colSpan: 1 },
{ rowIndex: 1, colIndex: 2, rowSpan: 1, colSpan: 2 },
{ rowIndex: 2, colIndex: 0, rowSpan: 1, colSpan: 2 },
{ rowIndex: 2, colIndex: 2, rowSpan: 2, colSpan: 2 },
{ rowIndex: 3, colIndex: 0, rowSpan: 1, colSpan: 1 },
{ rowIndex: 3, colIndex: 1, rowSpan: 2, colSpan: 1 },
{ rowIndex: 4, colIndex: 2, rowSpan: 1, colSpan: 1 },
{ rowIndex: 4, colIndex: 3, rowSpan: 1, colSpan: 1 },
{ rowIndex: 4, colIndex: 0, rowSpan: 1, colSpan: 1 }
]
});
});
</script>
</body>
</html>
