クイックスタート

このクイックスタートでは、Web ページの作成、wijsuperpanel ウィジェットの追加、およびウィジェットの外観と動作のカスタマイズを行うことができます。

テキストエディタで新規の HTML ページを作成するには、下記コードを追加して文章を .html の拡張子で保存します。
ドロップダウンしてマークアップをコピーします
テキストエディタに張り付けます
コードのコピー

<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

テキストエディタに張り付けます	コードのコピー
<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

CDN から最新の依存ファイルを参照するには、wijmo cdnを確認してください。これらを HTML ページの <head> タグ内に追加します。たとえば、次のようになります。

ドロップダウンからリファレンスをコピーして　head タグ内に貼り付けます

リファレンス	コードのコピー
<!--jQuery References--> <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js" type="text/javascript"></script> <!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets JavaScript--> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20173.128.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/interop/wijmo.data.ajax.3.20173.128.js" type="text/javascript"></script> <!--Knockout JS Library--> <script src="http://cdn.wijmo.com/external/knockout-3.1.0.js" type="text/javascript"></script> <!--Wijmo Knockout Integration Library--> <script src="http://cdn.wijmo.com/interop/knockout.wijmo.3.20173.128.js" type="text/javascript"></script>

<body> タグ内に、次のようにマークアップを追加します。div> 要素はスーパーパネルウィジェットを作成し、その id オプションは 'superpanel' に設定され、それを jQuery スクリプトに呼び出してウィジェットを初期化します。ネストされた <table> 要素は、画像のテーブルを設定してスーパーパネル内に表示します。width オプションがテーブルよりも狭いため、スクロールボタンが表示されます。

ドロップダウンからマークアップをコピーして　body タグ内に貼り付けます

マークアップ	コードのコピー
<div id="superpanel"> <table style="background-color: rgb( 115, 59, 132 );" width="400" border="1"> <tr> <td><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/95/So_cute_twinkle.svg/200px-So_cute_twinkle.svg.png"/>> <td><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/So_cute_blush.svg/200px-So_cute_blush.svg.png"/>> </tr> <tr> <td><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/79/So_cute_masked.svg/200px-So_cute_masked.svg.png"/>> <td><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/51/So_cute_draw.svg/200px-So_cute_draw.svg.png"/>> </tr> <tr> <td><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/61/So_cute_talkative.svg/200px-So_cute_talkative.svg.png"/>> <td><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/So_cute_bot.svg/200px-So_cute_bot.svg.png"/>> </tr> </table> </div>

<head> タグ内の参照の下に、次のスクリプトを追加して jQuery ウィジェットを初期化します。

このスクリプトはスーパーパネルウィジェットを初期化し、カスタマイズします。

allowResize オプションは、ユーザーがスーパーパネルの端部をつかみ、ドラッグしてサイズを変更できるように true に設定されます。
autoRefresh オプションは、ドキュメントの ready 関数が完了するまで画像はロードされないので true に設定されます。テーブル内の画像の高さを指定しなかったので、autoRefresh が使用されない場合、垂直スクロールバーは表示されません。
水平スクロールバーと垂直スクロールバーの両方の scrollMode オプションは、ユーザーがボタンの上にマウスポインタを置いたときに、スクロールボタンが表示されるように設定されます。

ドロップダウンからスクリプトをコピーして　head タグ内に貼り付けます

<head> タグ内のスクリプトの下に、次のスタイルを追加してスーパーパネルウィジェットのサイズを設定します。
ドロップダウンからマークアップをコピーして　head タグ内に貼り付けます
スタイル
コードのコピー

<style type="text/css"> #superpanel { width: 300px; height: 130px; } </style>
HTML ファイルを保存し、それをブラウザで開きます。wijsuperpanel ウィジェットは、次のように表示されます。

関連トピック

参照