「Wijmo（ウィジモ）」アップデートで追加された新ウィジェットや機能を紹介

jQuery UIの標準ウィジェットを補完する高機能ライブラリ「Wijmo」の活用 第6回

コンテンツに表裏を付けるフリップカード

　もう一つの新ウィジェットであるフリップカード（wijflipcard）は、スマートフォンアプリでよく見られる「押下すると表と裏が回転して切り替わるパネル」を実現するウィジェットです。使用例をリスト4に示します。

リスト4　フリップカードで回転するパネルを表示（004_wijmo_flipcard1.html）

<!-- Wijmo読み込みの記述は省略 -->
<script type="text/javascript">
    require(["wijmo.wijflipcard"], function(){ 
        $(function(){ 
            $("#flipcard1").wijflipcard({ // フリップカードを設定 ...（1）
                height: 450,  // 幅
                width: 300    // 高さ
            });
        }); 
    }); 
</script>
</head>
<body>
<h1>FlipCardウィジェット（wijflipcard）</h1>
<div id="flipcard1"><!-- フリップカードになる要素 ...（2）-->
    <div style="text-align:center"> <!-- 表面 ...（3）-->
        <p>こちらが表面です</p>
        <div style="margin-left:auto;margin-right:auto">
          <img src="img/sheep.jpg" style="width:240px"></a>
        </div>
    </div>
    <div style="text-align:center"> <!-- 裏面 ...（4）-->
        <p>こちらが裏面です</p>
        <div style="margin-left:auto;margin-right:auto">
          <img src="img/goat.jpg" style="width:240px"></a>
        </div>
    </div>
</div>
</body>
</html>

　（1）でdiv要素にフリップカードを設定しています。一方、フリップカードとして表示されるdiv要素は（2）です。この要素に含まれる1番目のdiv要素（3）が表面、2番目のdiv要素（4）が裏面になります。

　リスト4を実行すると、マウスクリックにより表裏が切り替わるカードが表示されます（図6）。

図6　リスト4で表示されるフリップカード（004_wijmo_flipcard1.html）

　wijflipcardメソッドで指定できる主なオプションを表2、表3に示します。animationのtypeには"scroll"、"slide"などのアニメーション効果が指定できます。また、directionを"vertical"に設定すると垂直方向のアニメーションになります。flipping、flippedイベントを指定することで、アニメーション開始、終了のタイミングでイベントを受け取ることができます。

表2　wijflipcardの主なパラメータ

パラメータ名	内容	初期値
height	高さ	null
width	幅	null
animation	切替時アニメーション	表3参照
flipping	アニメーション開始イベント	null
flipped	アニメーション終了イベント	null

表3　animationの主なパラメータ

パラメータ名	内容	初期値
disabled	アニメーション無効	false（アニメーション有効）
type	アニメーション種類	"flip"（回転切替）
duration	アニメーション時間	500（0.5秒）
direction	アニメーション方向	"horizontal"（水平方向）

　オプションの指定例をリスト5に示します。

リスト5　フリップカードにオプションを指定（005_wijmo_flipcard2.html）

$("#flipcard1").wijflipcard({ 
    height: 450,
    width: 300,
    animation: {
        type: "flip",              // アニメーション種類：flip
        direction: "vertical",     // アニメーション方向：縦
        duration: 1000             // アニメーション時間：1秒
    },
    flipping: function (e, data) { // アニメーション開始イベント
        $("#eventdisp").text("flipping");
    },
    flipped:  function (e, data) { // アニメーション終了イベント
        $("#eventdisp").text("flipped");
    }
});