Wijmo UI for the Web
マークアップとスクリプティング

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>

順序なしリストをテーブルに変換するためのスタイルは、次のようになります。

ドロップダウンしてスタイルを参照します

ここで説明しているマークアップとスクリプトの結果は次のようになります。スクロールバーをドラッグすると、SuperPanel 内のリストを移動できます。

関連トピック

参照

 

 


Copyright © GrapeCity inc. All rights reserved.