Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

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

 もう一つの新ウィジェットであるフリップカード(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)
図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");
    }
});

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:jQuery UIの標準ウィジェットを補完する高機能ライブラリ「Wijmo」の活用
All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5