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

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

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

  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-wijaccordion> ディレクティブを使用してウィジェットを作成し、要素内でいくつかのオプションを属性として設定します。
      • expandDirection オプション（expand-direction ディレクティブ）を「right」に設定し、各項目が下方にではなく、右方向に展開されるように指定します。
      • event オプションを「mouseover」に設定し、項目をクリックしなくても、マウスでポイントするだけで各項目が展開されるように指定します。
    • マークアップ内で要素をネストして、アコーディオンの各項目のヘッダおよびコンテンツを設定します。
      • ヘッダには <h2> 要素を使用します。
      • 各項目のコンテンツには <div> 要素を使用します。
    マークアップ
    コードのコピー 
    <wij-accordion expand-direction="right" event="mouseover">
        <h2>P<br>a<br>g<br>e<br> <br>1</h2>
        <div><img src="Images\wijmo_logo.png">
Sloptingle zung.</div>
        <h2>2</h2>
        <div>Bla boo Ongle Fling shnazzlegobble yap boo Sloptingle zung duh wubble
dinglekanoodle dizzle nip zunglezunk, wuggle slop boo bleep ding blapdazzle yap boo Sloptingle. Ho slop a boobananarama ho meep 200 Hizzy
bleeb, tangfraggle blob a waggleblop ho oodle dobbafling blungdubba, duh dazzledongle Ongle Fling ingle whack dizzlequibble. Boo
dubbatwiddle Ongle Fling ha zingwooble razzle blip cake flungzongle, dazzleshnaz dazzle, boo blo-flabblang bleeb bla.</div>
        <h2>3</h2>
        <div>Boo shrubberyfraggle ongle ho Ongle Fling flop shnoz boo 1500s ha flungshnuzzle
blung bla dabba tingleflobble. Bleeblo 1.10.32 bla 1.10.33 cake nip Zoweecake Zungletang da Nizzlezongle zap Wiggle boo blip flungshnuzzle
nip blang blong dabbablang zang, quibbleshnazzle zap Razzbleeb shnozingle cake boo 1914 slapblob zap H. Shnazbleeb.</div>
        <h2>4</h2>
        <div>Dee zung... tang a blippity onglezunk. Ho oodely blopping zuppity bam blong dee
blingity blupboo. Nip blobbity dobbawheezer! Blo crongle bleebwiggle, flibble nip zip crongle, ho woogle bang goblin dee
hizzy-yada...goblin roo yap! Bam da bananarama hizzy flibbity zongity tizzle izzlezungle? Wooble twaddle dee flong ha flup? Flee loo razz
flee? Flibbity weeblequibble.</div>
        <h2>5</h2>
        <div>Ongle Fling ha blangity flung zoom ho boo cranglefraggle bla zongbla zangzowee.
Ongle Fling wow zing boo zangzowees shrubberyfraggle flung zoom tang shnoz boo 1500s, bing bam blipblee flungwooble dang a nizzle ho ding
bla shnazzleblab ho duh ting a ding bleeptwaddle flob. Ho boo nizzleling nip boo 1960s blob boo flapzunk ho Blupblab wiggle jangledizzle
Ongle Fling blupgoblin, bla flap flapping blob ingleblab flibyada crongledilznoofus bang Blong Meepshnazzle hizzlezungle shnozingle ho
Ongle Fling.</div>
        <h2>6</h2>
        <div>Shnozzlecrangle duh plopshrubbery tangle, Ongle Fling ha boo blangity nizzle
zoom. Ho wow hizzy nip a bleep ho woggleflop Hizzy tongleflab cake 45 YIP, wuggle ho meep 2000 flong wow. <br><img
src="http://wijmo.com/files/img/icons/widget/Accordion.png"></div>
        <h2>7</h2>
        <div>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></div>
 </wij-accordion>
  5. HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のように表示されます。

関連トピック

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

参照

wijaccordion メソッド
expandDirection フィールド
event フィールド

 

 

Copyright © GrapeCity inc. All rights reserved.