コンテンツに表裏を付けるフリップカード
もう一つの新ウィジェットであるフリップカード（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イベントを指定することで、アニメーション開始、終了のタイミングでイベントを受け取ることができます。
| パラメータ名 | 内容 | 初期値 |
|---|---|---|
| height | 高さ | null |
| width | 幅 | null |
| animation | 切替時アニメーション | 表3参照 |
| flipping | アニメーション開始イベント | null |
| flipped | アニメーション終了イベント | null |
| パラメータ名 | 内容 | 初期値 |
|---|---|---|
| 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");
}
});
