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

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

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

  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 でこの処理を行う方法については、Tabs の「クイックスタート」を参照してください。
    • <wij-tabs>ディレクティブを使用してウィジェットを作成し、要素内でいくつかのオプションを属性として設定します。
      • ユーザーがタブをドラッグアンドドロップできるように、sortable オプションを true に設定します。
      • 選択したタブをユーザーが再度クリックすると、このタブが折りたたまれるように、collapsible オプションを true に設定します。
    • マークアップ内で要素をネストして、タブとコンテンツを作成します。
      • wij-tabsディレクティブ内で、各タブに対応するハイパーリンクを示すリスト項目から成る順不同リスト<ul>をネストします。
      • <div>要素で、<ul>内でリンクされたタブを参照する id 属性を使用し、各タブのコンテンツを作成します。
      マークアップ
      コードのコピー 
      <wij-tabs id="tabs" sortable="true" collapsible="true">
     <ul><li><a href="#tabs-1">Blippity Fling-Flang</a> </li>
          <li><a href="#tabs-2">Blipnoodle</a> </li></ul>
     <div id="tabs-1">
          <p>Ho ha a doof cringlezowee bloo bing a dizzle flop yap dizzlenizzle zap boo flungwhack shnizzlegobble ho a blop bing bangflib yap boo weeble. Boo wacko ho dabba Ongle Fling ha bing ho wow a flap-boo-plop jingle funkzonk ho blatwiddle, nip dinglezoom duh dabba Shnizzlegobble blip, shnizzlegobble blip, wuggle ho zong bang flungwhack Razzbleeb. Wugglewheezer shnozingle dang blingdoof meep boo flong, flubzongle zap shnozzleflip, flubzongle yap wibblezowee (dazzleshnaz dazzle bla boo bang). <a href="http://bff.orangehairedboy.com/">Blippity Fling-Flang by orangehairedboy</a></p>
     </div>
     <div id="tabs-2">
          <p>Zip abracadabra bananaramaflup. Zip flunging dang boo bang yip zangle. Loo flupping funky zunkity roo tizzle boo twiddling flungfloo. Flobble jingle ting nip nizzle bleep dang yip zingle. "Duh zonk ho?" razz Tony Soprano. Miss Beasley zap blang loo zonk dingely dilznoofustwiddle. "Ho izzle dee?" bloo You. Blap ho flipping meepwow.</p>
     </div>
</wij-tabs>
  5. HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のように表示されます。

関連トピック

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

参照

wijtabs メソッド
collapsible フィールド
sortable フィールド

 

 

Copyright © GrapeCity inc. All rights reserved.