マウスホーバーでのフリップアクション

「クイックスタート」の例を基に、triggerEvent オプションを使用して、カードを反転させる方法を変更できます。デフォルトでは、フリップアクションはクリックイベントによってトリガされますが、クリックしなくても、ユーザーがマウスポインタをカード上に合わせただけでカードが反転するように変更できます。

注意: triggerEvent オプションを mouseenter に設定すると、反転されたカードは、マウスポインタをウィジェットから外した時点で自動的に元に戻ります。ユーザーがマウスポインタを外して、他のタスクを実行しても、カードの背面が表示され続けているようにするには、このオプションをデフォルト設定のままにしておきます。

HTML ファイルの <head> セクションで、ドキュメントの ready 関数を含むスクリプトを、以下のスクリプトに置き換えます。このスクリプトは、トリガイベントをマウスポインタ進入（mouseenter）に変更します。

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijflipcard"], function () { $(document).ready(function () { $("#flipcard1").wijflipcard({ triggerEvent: "mouseenter" }); }); }); </script>

スクリプト

コードのコピー

<script id="scriptInit" type="text/javascript">
require(["wijmo.wijflipcard"], function () {
    $(document).ready(function () {
        $("#flipcard1").wijflipcard({ triggerEvent: "mouseenter" });
    });
});
</script>

HTML ファイルの <body> セクションは、変更の必要はありません。このウィジェットの作成には、基本的な<div> タグで十分です。
HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のようになります。カード上にマウスポインタを合わせるとカードが反転し、ポインタを外すと元の面に戻ります。

関連トピック

参照