Wijmo UI for the Web
状態によってスタイルの適用
| Wijmo ユーザーガイド > ウィジェット > Tree > 操作手順 > 状態によってスタイルの適用 |
クイックスタートの例に基づき、CSS スタイルを使用して、ツリーの各要素の色とスタイルを変更できます。使用可能なツリーの CSS セレクタについては、インストールフォルダにある jquery.wijmo.wijtree.css ファイルを参照してください。
ドロップダウンからスタイルをコピーして、<head> セクション内に貼り付けます
| スタイル |
コードのコピー |
|---|---|
<style type="text/css"> /* jQuery UI hover state */ .wijmo-wijtree .ui-state-hover { background: Blue; color: White; } /* jQuery UI active state */ .wijmo-wijtree .ui-state-active { background: #009900; color: #ffffff; } /* wijtree expanded selector */ .wijmo-wijtree .wijmo-wijtree-node[aria-expanded="true"] { font-weight:800 } </style> | |
ドロップダウンからマークアップをコピーして、<body> セクション内に貼り付けます
| マークアップ |
コードのコピー |
|---|---|
<div> <ul id="tree"> <li class="folder"><a><span>Folder 1</span></a> <ul> <li class="folder"><a><span>Folder 1.1</span></a> <ul> <li class="file"><a><span>File 1.1</span></a></li> <li class="file"><a><span>File 1.2</span></a></li> <li class="file"><a><span>File 1.3</span></a></li> <li class="file"><a><span>File 1.4</span></a></li> <li class="file"><a><span>File 1.5</span></a></li> </ul> </li> <li class="file"><a><span>File 1.2</span></a></li> <li class="file"><a><span>File 1.3</span></a></li> <li class="file"><a><span>File 1.4</span></a></li> <li class="file"><a><span>File 1.5</span></a></li> </ul> </li> <li class="folder"><a><span>Folder 2</span></a> <ul> <li class="file"><a><span>File 2.1</span></a></li> <li class="file"><a><span>File 2.2</span></a></li> <li class="file"><a><span>File 2.3</span></a></li> <li class="file"><a><span>File 2.4</span></a></li> <li class="file"><a><span>File 2.5</span></a></li> </ul> </li> <li class="folder"><a><span>Folder 3</span></a> <ul> <li class="file"><a><span>File 3.1</span></a></li> <li class="file"><a><span>File 3.2</span></a></li> <li class="file"><a><span>File 3.3</span></a></li> <li class="file"><a><span>File 3.4</span></a></li> <li class="file"><a><span>File 3.5</span></a></li> </ul> </li> </ul> </div> | |
全て展開
すべて折りたたむ