レスポンシブ・スマホ化対応に使える4つのPlugin「Mobify Open Souce」

2014/10/1 2014/10/7 JS/jQuery, UI/UX

レスポンシブ・スマホ化対応によく使われる4つのPlugin「Mobify Open Souce」

先日Phpspot開発日誌でモバイルファーストでレスポンシブなアコーディオン実装「Bellows」という記事が取り上げられていました。
実はこのプラグイン全4種あるんです。
というわけで今回はスマホ化対応によく使われるこの以下UIをご紹介したいと思います。

まずはこのアコーディオンのBellowsから。Demoをみていただきたいのですがアイコンのアニメーション変化とレスポンシブに対応しています。(android2.3では画像切り替えのみ)
open,close時、easingやduretion等のオプションも準備されています

Downloadしたファイルの中にpackage.jsonというファイルがありますのでその中のname、versionでkonfに紐づける形となっています。downloadしたファイルをそのままmodifyのバンドルディレクトリに入れ、konfから下記ソースで紐づけます。

'bellows': { 'root': Mobify.config.configDir, 'moduleName': 'bellows', 'version': '4.0.0', 'includeTheme': false },

jQueryで導入する場合は「dist」ディレクトリの中にある該当のcssファイルとjsファイルを利用してください。またアニメーション部分をvelocity.jsで動かしているので別途velocity.jsも読み込みましょう。

レスポンシブサイトではPC用の大きな画像をスマホサイズの時に縮小せざるをえない場面が多いですが、このプラグインは画像をタップした位置を中心に拡大してくれます。

※Mobifyで使用する際はGitHubからdownloadするとpackage.jsonがあります。導入方法は上記1.Bellowsを参照してください。

スライドナビゲーションです。こちらのページではAndroid2.3対応となっていますが、アニメーション部分transformを使用しているので念のため実機でチェックしてから使用してください。GitHubのissueの確認も一通り見ておくといいと思います。

※Mobifyで使用する際はGitHubからdownloadするとpackage.jsonがあります。導入方法は上記1.Bellowsを参照してください。

こちらはカルーセルです。オプションもnext、prev、動いた数のindexカウントや、bind等のオプションがあります。Demoにカスタマイズされたsampleがありますのでご覧下さい。

※Mobifyで使用する際はGitHubからdownloadするとpackage.jsonがあります。導入方法は上記1.Bellowsを参照してください。

以上4種のプラグインでした。どのプラグインも定期的にバージョンアップされているので今後も改良が図られると思います。mobifyで使用する際は良く使う上記プラグインをバンドル内に入れておくとサクッと使えて便利だと思います。