Product comparison

JavaScript

製品などの比較に役立つjQueryプラグイン「Product comparison」

Product comparisonは、いくつかの種類のものを比較する時に役に立つjQueryプラグインです。例えば、製品や写真などのデザイン、サービスの比較などです。また、比較の対象は、テキストではなく画像などの視覚的に行うものに向いています。なお、デモページではスマートフォンのデザインの比較が表現されています。このように、製品の比較に最も活用できるプラグインです。では、実装方法について見ていきましょう。

Product comparison

デモ

  • 1. 製品の一覧画面のマークアップ
  • 2. 選択項目のプレビューパネルの作成
  • 3. 比較結果を表示させる部分の作成(ポップアップウィンドウの作成)

1について、表示する項目の画像をそれぞれ「img」要素でマークアップします。項目名(製品名)は、テキスト入力で表示できます。(具体的なマークアップはプラグイン配布ページへ)

2のプレビューパネルは、選択した項目をプレビューさせるために作成します。プレビュー画面には最大3つの項目を同時に選択でき、表示してくれます。こちらも具体的なマークアップは、プラグイン配布サイトで丁寧に記載されています。

3について、プレビュー画面で2つ以上の項目を選択すると、「Compare」というボタンが現れます。それをクリックすると、比較結果についての詳細画面がポップアップウィンドウで表示されます。マウスオン時の効果も指定されており、デザイン性が高いポップアップになっています。

Product comparisonを使用すると、比較前は画像のみの表示ですっきりとしたページになります。製品のデザインのみが目に飛び込んでくるので、ユーザーに視覚的に呼びかけることができます。また、比較したい製品のみを任意で選択できるので、情報の整理には画期的なプラグインだと思います。

購入画面の一歩手前で、このような比較ページを設けると、ユーザーに合った製品選び、しいては購買欲の促進に役立てることができるのではないでしょうか。

Product comparison

関連記事

  1. Dependent / Cascading Select List with jQuery Select2

    JavaScript

    選択内容によりその下の内容も変化するセレクトボックス「Dependent / Cascading S…

    セレクトボックスを強力でカスタマイズ性が高く、そして充実させる人気のj…

  2. SimpleCalculadora

    JavaScript

    シンプルでカスタマイズもできる電卓「SimpleCalculadora」

    SimpleCalculadoraはシンプルでCSS、オプションなどで…

  3. JavaScript

    blur効果で要素を簡単にぼかしてくれるjQueryプラグイン「Foggy」

    FoggyというjQueryプラグインを使ってみました。これを使えば指…

  4. no-image
  5. Art Text Light jQuery plugin

    JavaScript

    テキストに光が移動するエフェクトを与えることができる「Art Text Light jQuery p…

    指定したテキストに光が移動するエフェクトを与えることができるjQuer…

  6. Easy Z modal

    JavaScript

    シンプルなモーダルウィンドウ・ダイアログボックスを表示できる「Easy Z modal」

    Easy Z modalはシンプルでダイナミックなモーダルウィンドウ・…

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP