AngularJS と wijsuperpanel

この Angular 導入ガイドでは、HTML マークアップ、jQuery スクリプト、および AngularJS ディレクティブを使用して、SuperPanel ウィジェットを HTML プロジェクト内で使用する方法について説明します。

コントローラーとモデルが個別のファイルにある複雑なサンプルについては、「AngularJS ディレクティブギャラリー」を Web サイトで参照してください。

新しい HTML ページを作成するには、任意のテキストエディタで次のコードを追加し、.html 拡張子を付けてドキュメントを保存します。<HTML> タグと <body> タグが通常のタグとは異なることに注意してください。
- <HTML> タグは、ng-app ディレクティブによって Angular アプリケーションとマークされ、さらに Wijmo を使用するように指定されます。
- <body> タグを使用して、作成する Angular コントローラーのスコープを定義します。スコープには <div> などの別のタグも使用できますが、ここでは、body 全体を使用します。ng-controller ディレクティブは、このスコープ内で使用するコントローラーを指定します。
ドロップダウンからマークアップをコピーします
任意のテキストエディタに貼り付けます。
コードのコピー

<!DOCTYPE HTML> <HTML ng-app="MyApp"> <head> </head> <body ng-controller="MyController"> </body> </HTML>

任意のテキストエディタに貼り付けます。	コードのコピー
<!DOCTYPE HTML> <HTML ng-app="MyApp"> <head> </head> <body ng-controller="MyController"> </body> </HTML>

依存ファイルへのリンクを HTML ページの<head>タグ内に追加します。最新の依存ファイルについては、「wijmo cdn」のコンテンツ配信ネットワーク（CDN）ファイルを参照してください。通常の参照に加え、Angular 用に 2 つのスクリプト参照を追加します。この参照は jQuery 参照の後に続ける必要があるので、最後の 2 行となります。

1 つは AngularJS 自体です。
もう 1 つは、Wijmo の Angular JavaScript 統合ライブラリです。

ドロップダウンして参照コードをコピーし、head タグ内に貼り付けます。

<head>タグ内の参照の後に、次のスクリプトを追加します。このスクリプトは、アプリケーションが Wijmo を使用するように設定し、$scope パラメータでデータコンテキストを制御する単純なコントローラーを作成します。
スクリプト
コードのコピー
<script type="text/javascript"> var app = angular.module("MyApp", ["wijmo"]); function MyController($scope) { } </script>

参照	コードのコピー
<!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/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 Scripts --> <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> <!-- Angular --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script> <script src="http://cdn.wijmo.com/interop/angular.wijmo.3.20173.128.min.js"></script>

スクリプト	コードのコピー
<script type="text/javascript"> var app = angular.module("MyApp", ["wijmo"]); function MyController($scope) { } </script>

次のマークアップを<body>タグ内に追加して、ウィジェットを作成します。Angular を使用せずに jQuery でこの処理を行う方法については、SuperPanel の「クイックスタート」を参照してください。

<wij-superpanel>ディレクティブを使用してウィジェットを作成し、要素内でいくつかのオプションを属性として設定します。
- allowResize オプション（allow-resize ディレクティブ）を true に設定します。これにより、ユーザーがウィジェットの境界線にマウスポインタを合わせると、カーソルがサイズ変更ハンドルに変わります。
- ドキュメントの ready 関数が完了するまで画像はロードされないため、autoRefresh オプション（auto-refresh ディレクティブ）を true に設定します。テーブル内の画像の高さを指定していないため、autoRefresh を実行しないと、垂直スクロールボタンが表示されません。
マークアップ内で要素をネストして、スクロールボタンを設定し、ウィジェットにコンテンツを追加します。
- vScroller および hScroller オブジェクト（v-scroller および h-scroller ディレクティブ）をネストし、scrollMode オプション（scroll-mode ディレクティブ）を設定します。これにより、垂直および水平スクロールバーに、マウスポインタを合わせるとコンテンツをスクロールするボタンが表示されます。
- スクロール表示を有効にするため、ウィジェットのサイズより幅の広いテーブルを追加します。

マークアップ	コードのコピー
<wij-superpanel id="superpanel" allow-resize="true" auto-refresh="true"> <h-scroller scroll-mode="buttonshover"> </h-scroller> <v-scroller scroll-mode="buttonshover"> </v-scroller> <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> <td><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/So_cute_blush.svg/200px-So_cute_blush.svg.png"/></td> </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> <td><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/51/So_cute_draw.svg/200px-So_cute_draw.svg.png"/></td> </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> <td><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/So_cute_bot.svg/200px-So_cute_bot.svg.png"/></td> </tr> </table> </wij-superpanel>

マークアップ

コードのコピー

<wij-superpanel id="superpanel" allow-resize="true" auto-refresh="true">
    <h-scroller scroll-mode="buttonshover"> </h-scroller>
    <v-scroller scroll-mode="buttonshover"> </v-scroller>
    <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>
            <td><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/So_cute_blush.svg/200px-So_cute_blush.svg.png"/></td>
        </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>
            <td><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/51/So_cute_draw.svg/200px-So_cute_draw.svg.png"/></td>
        </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>
            <td><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/So_cute_bot.svg/200px-So_cute_bot.svg.png"/></td>
        </tr>
    </table>
</wij-superpanel>

<head>タグ内で、ウィジェットを初期化するスクリプトの直前で、CSS を使用してスーパーパネルの高さおよび幅を設定します。
スタイル
コードのコピー
<style type="text/css"> #superpanel { width: 300px; height: 130px; } </style>
HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のように表示されます。

関連トピック

参照