Wijmo UI for the Web
クイックスタート
Wijmo ユーザーガイド > ウィジェット > FlipCard > クイックスタート
全て展開全て展開
すべて折りたたむすべて折りたたむ

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

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

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

  2. 依存ファイルへのリンクを HTML ページの <head>タグ内に追加します。最新の依存ファイルについては、「wijmo cdn」のコンテンツ配信ネットワーク（CDN）ファイルを参照してください。

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

  3. 次のマークアップを <body>タグ内に追加して、ウィジェットを作成します。
    <div>要素によってウィジェットが作成されます。この id 属性を jQuery 内で呼び出すことで、ウィジェットを初期化します。ネストされた 2 つの
    <div>要素は、前面および背面パネルのコンテンツをそれぞれ保持します。       

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

  4. <head>タグ内の参照の後に、次のスクリプトを追加します。このスクリプトは、ウィジェットを初期化して、ウィジェットの height および width オプションを設定します。
    スクリプト
    コードのコピー 
    <script id="scriptInit" type="text/javascript">
require(["wijmo.wijflipcard"], function () {
    $(document).ready(function () {
        $("#flipcard1").wijflipcard({ 
            height: 250, 
            width: 200
        });
    });
});
</script>
  5. HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のように表示されます。カードをクリックするとカードが反転し、再度クリックすると元の面に戻ります。

関連トピック

FlipCard

参照

wijflipcard メソッド
height フィールド
width フィールド

 

 

Copyright © GrapeCity inc. All rights reserved.