Wijmo UI for the Web
動的なコンテンツの表示
Wijmo ユーザーガイド > ウィジェット > FlipCard > 操作手順 > 動的なコンテンツの表示
全て展開全て展開
すべて折りたたむすべて折りたたむ

「クイックスタート」の例を基に、flipping イベントを使用して、カードのコンテンツを動的に変更できます。ここでは、<input>要素にユーザーが入力した内容に基づいてコンテンツを変更します。

  1. HTML ファイルの <head> セクションで、ドキュメントの ready 関数を含むスクリプトを、以下のスクリプトに置き換えます。このスクリプトは、入力された値に基づき、flipping イベントを使用して backPanel のコンテンツを変更します。         
    スクリプト
    コードのコピー 
    <script id="scriptInit" type="text/javascript">
require(["wijmo.wijflipcard"], function () {
    $(document).ready(function () {
        $("#playingflipcard").wijflipcard({
            flipping: function (e, data) {
                if (document.querySelector("#num").value === "7") {
                data.backPanel.html('<img src="http://lorempixel.com/160/180/animals/7/SIGNS%20POINT%20TO%20YES/"/>');
                }
                else if (document.querySelector("#num").value === "5") {
                data.backPanel.html('<img src="http://lorempixel.com/160/180/cats/1/Try%20again%20BRING%20TREATS/"/>');
                }
                else {
                data.backPanel.html('<img src="http://lorempixel.com/160/180/animals/6/HECKS%20NO/"/>');
                }
            }
        });
    });
});
</script>
  2. タグ内のマークアップを、以下のマークアップに置き換えます。 <div> 要素によってウィジェットが作成されます。この id 属性を jQuery 内で呼び出すことで、ウィジェットを初期化します。ネストされた 2 つの <div> 要素は、前面パネルと背面パネルのそれぞれのコンテンツを保持します。<input> 要素は、背面に表示するコンテンツを決定するデータを収集します。  

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

  3. HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のようになります。数字を入力してから、カードをクリックして反転させます。もう一度クリックすると、元の面に戻ります。別の数字（5 または 7）を入力すると、背面のコンテンツが変わることを確認してください。

関連トピック

wijflipcard メソッド
flipping イベント
backPanel フィールド
FlipCard
クイックスタート

 

 

Copyright © GrapeCity inc. All rights reserved.