jquery.confirm

JavaScript

jQueryとBootstrapを使ったボタンとリンクによるダイアログ実装「jquery.confirm」

jquery.confirmは、ページ内のボタンやリンクをクリックするとダイアログでメッセージを表示する機能を備えたjQueryプラグインです。このプラグインを使用する基本的な目的は、リンク先への移行を確認する場合や、移行前にユーザーに確認して欲しい重要事項などを伝える場合などです。jquery.confirmには、jQuery1.8以降のバージョンと、Bootstrapが必要です。Bootstrapとは、Twitter社で開発されたHTML、CSS、JavaScriptフレームワークです。

ターゲットであるユーザーかどうかの判断にも便利

デモ

ウェブ制作を行う際に最も大切なことは、「ターゲットの設定」です。そのターゲットに合ったUI・UXデザインを心がけることで、ユーザー(訪問者)も快適にページを閲覧することができ、アクセスアップに繋がります。

このjquery.confirmには、ターゲットであるユーザーであるかを判断してくれる側面があると思います。重要なボタンやリンクをクリックする時にダイアログでメッセージを表示し、「YES」or「NO」をさらにボタンクリックで答えてもらうと、リンク先がユーザーにとって本当に必要なページかを判断してもらえるということです。

例えば、

「30代の医療保険のご案内です。あなたは該当しますか?」
「このアンケートはWEBページで公開される場合があります。本当に回答しますか?」

などです。

他にもオプションを活用すれば、確認ボタンやキャンセルボタンでユーザーが選択した結果によってどのページへ移行するのかを指定できます。問い合わせフォームなどでも活躍するプラグインだと思います。

jquery.confirm

関連記事

  1. Greedy Navigation

    JavaScript

    レスポンシブ対応でメニューのアイテム数がわかりやすい「Greedy Navigation」

    Greedy Navigationはレスポンシブ対応でメニューのアイテ…

  2. h5Validate

    JavaScript

    HTML5のフォームバリデーションを実装できるjQueryプラグイン「h5Validate」

    h5ValidateはHTML5によるフォームバリデーションを実装する…

  3. Shave

    JavaScript

    設定した高さに基づいて複数行のテキストを切り取る「Shave」

    Shaveは設定した最大の高さに基づいてHTML要素内に収まるように複…

  4. jQuery Pit-scheduler v2.0
  5. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQuery(JavaScript)で指定した要素の子要素数や最大文字数を配列内から取得する

    jQueryで指定した要素の子要素の数やその文字数、文字なんかを配列に…

  6. ZooMove

    JavaScript

    マウスオーバーで画像を拡大ズーム・移動もできるjQueryプラグイン「ZooMove」

    ZooMoveは、マウスオーバーで指定された画像やエリアをズームするこ…

最近の記事

  1. Soundcore Liberty Neo(第2世代)
  2. EH-NA0B
  3. KPS-88
  4. Happy Plugs AIR1
  5. cheero Stream 10000mAh

アーカイブ

PAGE TOP