.NETエンジニア・プログラマ向けの技術情報・業界ニュースをお届けします。

  1. FEnet.NETナビ
  2. .NETコラム
  3. プログラミング言語
  4. Javascript
  5. jQuery UIを使ってダイアログ表示を実装する方法

jQuery UIを使ってダイアログ表示を実装する方法

  • Javascript
  • プログラミング言語
公開日時:   更新日時:
jQuery UIを使ってダイアログ表示を実装する方法
この記事でわかること
    基本情報技術者試験の試験対策はこちら>>

    サービスの解約や何かを削除する際、ユーザーに対して「本当に〇〇してもよいですか?」というようなダイアログが表示されることがあります。誤操作を防ぐためにも役立つダイアログですが、実はjQuery UIで簡単に実装することができるのです。今回は、jQuery UIを使ってダイアログ表示を実装する方法を紹介していきたいと思います。

    システム
    エンジニア
    確かに、ダイアログ表示がなければ「間違って登録解除しちゃった……」ということもあり得そうですよね。
    プロジェクト
    リーダー
    そうですね。ちなみに、似ているもので「ポップアップ」もありますが、一応ダイアログとは区別されているので頭の片隅に置いておいてください。
      • ・ダイアログ

    ユーザーが何か操作をしている過程で開かれる画面。ユーザーに入力や「はい」「いいえ」などの選択を求める。

      • ・ポップアップ

    Webサイトなどでポンっと表示される小画面。ユーザーに何か操作を求めるのではなく、キャンペーンや広告などユーザーに見てほしい情報を表示することが多い。

    では、さっそくダイアログ表示を実装していきましょう。

    シンプルなダイアログ表示の作成

    はじめに、シンプルなダイアログ表示を作成してみましょう。次のように記述していきます。

    モーダルメッセージ

    “ダウンロードが完了しました”などのメッセージを表示するダイアログです。

    実行結果
    シンプルなダイアログ

    モーダル確認ダイアログ

    “本当に削除しますか?”などの確認を行うダイアログです。

    実行結果
    モーダル確認ダイアログ

    それぞれきちんとダイアログが表示されています。
    とはいえ、何だか少し味気ないと感じた方もいらっしゃるかと思います。ということで、次項ではダイアログ表示のデザインをカスタマイズしていきましょう。

    ダイアログ表示のカスタマイズ

    jQuery UIでは「.ui-dialog-titlebar」、「.ui-dialog-content」などのクラスがあらかじめ用意されています。もちろん自身でクラスを追加することもできますが、ここでは用意されているクラスを使ってデザインを変更していきます。

    色を変更する

    先ほどのソースコードの中に(どちらでも可)以下のコードを追記していきます。

    では、ブラウザでどのように表示されているか見てみましょう。

    色の変更

    このように、簡単に色を変えることができました。

    テーマを変更する

    今回はjQuery UIのクラス要素を取得してCSSで色を変えましたが、jQuery UIが提供しているテーマを変えることでも十分カスタマイズすることができます。

    変えるコードはこちら。※ヘッダー内5行目

    「base」の箇所を「ul-lightness」や「redmont」に変えるだけで、一度にデザインを変更させることができます。詳細は下記URLをご参照ください。
    https://jqueryui.com/themeroller/
    ※画面左側の黒いボックス(ThemeRoller)の[Gallary]タブをクリック。

    ちなみに以下は「start」に変更した際のデザインです。

    startに変更

    システム
    エンジニア
    jQuery UIでこんな簡単にダイアログ表示が実装できるんですね。
    プロジェクト
    リーダー
    jQueryはプログラミングやデザインの知識が少ない人でも比較的少ない時間で実装できるんですよ。

    jQuery UIでオリジナルのダイアログを表示しよう

    今回は、jQuery UIを使ってダイアログ表示の実装とカスタマイズを行っていきました。jQuery UIを活用すれば、カッコいいデザインのダイアログを短い時間で実装することができます。この記事を参考に、ぜひWebサイトやWebアプリケーションなどにダイアログ表示を組み込んでみてはいかがでしょうか。

    FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
    株式会社オープンアップシステムロゴ

    株式会社オープンアップシステムはこんな会社です

    秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
    数多くのエンジニアが集まります。

    秋葉原オフィスイメージ
    • スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。

    • 充実した研修制度

      充実した研修制度

      毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。

    • 資格取得を応援

      資格取得を応援

      スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。

    • 東証プライム上場企業グループ

      東証プライム上場企業グループ

      オープンアップシステムは東証プライム上場「株式会社夢真ビーネックスグループ」のグループ企業です。

      安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

    株式会社オープンアップシステムに興味を持った方へ

    株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

    年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
    まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへのご応募はこちら↓

    新着案件New Job