Wijmo UI for the Web
クイックスタート
全て展開全て展開
すべて折りたたむすべて折りたたむ

このクイックスタートでは、HTML マークアップおよび jQuery スクリプトを使用して、HTML プロジェクトに Accordion ウィジェットを追加する方法について学びます。

  1. テキストエディタで新規の HTML ページを作成するには、下記コードを追加して文章を .html の拡張子で保存します。

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

  2. 依存ファイルへのリンクを HTML ページの <head> タグ内に追加します。最新の依存ファイルについては、次の場所にある CDN ファイルを参照してください。

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

  3. 次のマークアップを <body> タグ内に追加して、ウィジェットを作成します。<div> 要素はウィジェットを作成し、その id 属性を jQuery で呼び出して初期化します。このマークアップは、それぞれにコンテンツセクションが含まれる7つのヘッダーをアコーディオンに追加します。

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

  4. <head> タグ内の参照の下に次のスクリプトを追加して、ウィジェットを初期化し、いくつかのオプションを設定します。
    • 各 <h2> タグでヘッダーをレンダリングするように、header オプションを設定します。
    • 下ではなく右に展開されるように、コンテンツセクションの expandDirection を設定します。
    • ヘッダーがクリックされたときではなく、マウスオーバーイベントが発生したときにコンテンツセクションが展開されるようにします。

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

  5. <head> タグ内のウィジェットを初期化するためのスクリプトの上で、CSS を使用してウィジェットのサイズを設定します。

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

  6. HTML ファイルを保存し、それをブラウザで開きます。実際のウィジェットは次のように表示されます。

関連トピック

参照

 

 


Copyright © GrapeCity inc. All rights reserved.