Wijmo UI for the Web
マークアップとスクリプティング
| Wijmo ユーザーガイド > ウィジェット > SuperPanel > マークアップとスクリプティング |
SuperPanel ウィジェット内に任意のウィジェットまたは HTML 要素を配置し、任意の要素に CSS スタイル指定を追加できます。クイックスタートでは、<div> タグ内でテーブルを使用して SuperPanel を作成しました。この例では、CSS スタイルを幅広く利用して、順序なしリストをテーブルのように表示します。順序なしリストを使用して作成された wijsuperpanel ウィジェットの HTML マークアップは、次のようになります。
| マークアップ |
コードのコピー |
|---|---|
<div id="superpanel" style="width: 440px; height: 280px;"> <div class="elements"> <ul> <li style="background-color:Red"></li> <li style="background-color:Blue"></li> <li style="background-color:Fuchsia"></li> <li style="background-color:Green"></li> <li style="background-color:Purple"></li> <li style="background-color:Black"></li> </ul> </div> </div> | |
次の jQuery スクリプトでウィジェットを初期化できます。
| スクリプト |
コードのコピー |
|---|---|
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#superpanel").wijsuperpanel(); }); </script> | |
順序なしリストをテーブルに変換するためのスタイルは、次のようになります。
ドロップダウンしてスタイルを参照します
| CSS スタイル |
コードのコピー |
|---|---|
<style type="text/css"> .elements ul { padding: 8px 0 0 8px; margin: 0px; width: 480px; float: left; position: relative; } .elements ul li { background: #fff; color: #fff; height: 90px; margin: 0 8px 8px 0; padding: 0; padding-top: 62px; position: relative; width: 132px; } .elements li { float: left; list-style: none; } </style> | |
ここで説明しているマークアップとスクリプトの結果は次のようになります。スクロールバーをドラッグすると、SuperPanel 内のリストを移動できます。