Wijmo UI for the Web
AngularJS と wijcarousel
Wijmo ユーザーガイド > Angular JS ディレクティブ > AngularJS と wijcarousel
全て展開全て展開
すべて折りたたむすべて折りたたむ

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

コントローラーとモデルをそれぞれ個別のファイルで設定する、より複雑なサンプルについては、弊社 Web サイト「AngularJS Directive Gallery」を参照してください。

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

    ドロップダウンからマークアップをコピーします

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

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

  3. <head> タグ内の参照の後に、次のスクリプトを追加します。このスクリプトは、アプリケーションが Wijmo を使用するように設定し、$scope パラメータでデータコンテキストを制御する単純なコントローラーを作成します。
    スクリプト
    コードのコピー 
    <script type="text/javascript">
    var app = angular.module("MyApp", ["wijmo"]);
    function MyController($scope) {}
</script>
  4. <body> タグ内に次のマークアップを記述して、ウィジェットを作成します。Angular を使用せずに jQuery でこの処理を行う方法については、「クイックスタート」を参照してください。
    • <wij-carousel> ディレクティブを使用してウィジェットを作成し、要素内でいくつかのオプションを属性として設定します。
      • 表示領域には一度に 1 つの画像だけが表示されるように、 display オプションを「1」に設定します。
      • 再生中、画像が変わるまでの時間をユーザーが確認できるように、showTimer オプション（show-timer ディレクティブ）を true に設定します。
      • ページを切り替えるためのボタンがユーザーに表示されるように、showPager オプション（show-pager ディレクティブ）を true に設定します。
      • 画像リストの最後に到達しても、画像の再生が繰り返されるように、loop オプションを true に設定します。
      • この領域からマウスを離すと、コントロールボタンが非表示となるように、showControlsOnHover オプション（show-controls-on-hover ディレクティブ）を true に設定します。
      • style 属性の設定により、ウィジェットの高さと幅を制御します。
    • マークアップ内で要素をネストして、画像とキャプションを順不同リストとして設定します。
      • <ul> 要素によってリストを作成します。
      • <li> 要素によって、カルーセルに表示する個々のアイテムを作成します。
      • 各アイテム内には、画像、および画像キャプションの範囲をネストします。                
    マークアップ
    コードのコピー 
    <wij-carousel display="1" show-timer="true" show-pager="true" loop="true" show-controls-on-hover="true" style="width:600px; height:300px;">
  <ul>
    <li>
        <img src="Images\sports1.png" alt="Sports 1" />
        <span>Word Caption 1</span></li>
    <li>
        <img src="Images\sports2.png" alt="Sports 2" />
        <span>Word Caption 2</span></li>
    <li>
        <img src="Images\sports3.png" alt="Sports 3" />
        <span>Word Caption 3</span></li>
    <li>
        <img src="Images\sports4.png" alt="Sports 4" />
        <span>Word Caption 4</span></li>
    <li>
        <img src="Images\sports5.png" alt="Sports 5" />
        <span>Word Caption 5</span></li>
    <li>
        <img src="Images\sports6.png" alt="Sports 6" />
        <span>Word Caption 6</span></li>
    <li>
        <img src="Images\sports7.png" alt="Sports 7" />
        <span>Word Caption 7</span></li>
    <li>
        <img src="Images\sports8.png" alt="Sports 8" />
        <span>Word Caption 8</span></li>
  </ul>
 </wij-carousel>
  5. HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のように表示されます。

関連トピック

クイックスタート
AngularJS クイックスタート

参照

wijcarousel メソッド
display フィールド
showTimer フィールド
showPager フィールド
loop フィールド
showControlsOnHover フィールド

 

 

Copyright © GrapeCity inc. All rights reserved.