このページの本文へ

海外で流行中のダイアログ表示をjQuery UIで (1/3)

2009年07月16日 15時00分更新

文●藤本 壱

  • この記事をはてなブックマークに追加
本文印刷

 ログインフォームや問い合わせフォームなどをWebページの遷移なしにダイアログボックスで表示する――。近頃、海外のECサイトやポータルサイ トなどでこうしたUI(ユーザーインターフェイス)を見かけます。もともと閲覧しているページの上にダイアログボックスがオーバーレイで表示されるので見栄えがよく、ページを移動せずに済むので、もとのページにすぐに戻れて便利です。

 UIに特化したJavaScriptライブラリー「Query UI」を使えば比較的簡単に実装できますので、Webページ上にオーバーレイでダイアログボックスを表示する方法を紹介します。


jQuery UIのダイアログ機能を使うための準備

 「jQuery UI」はjQueryのUI関連機能をまとめたライブラリー郡です。タブパネルやドラッグ&ドロップ機能などでこれまでも何度か登場(関連記事1関連記事2)しましたが、今回はダイアログボックスのコンポーネント「Dialog」の紹介です。

 はじめにダイアログボックスを使うための準備をしましょう。jQuery UIのダウンロードページ「UI Core」「Dialog」のチェックをオンにしてダウンロードボタンをクリックします。なお、「Dialog」と「Draggable」とを組み合わせるとドラッグ&ドロップでダイアログを移動できるようになりますので、必要な場合はDraggableにもチェックを入れてダウンロードしてください。

jQuery UIのダウンロード

jQuery UIのダウンロードのダウンロードページ


 ダウンロードしたファイルを展開すると「js」「css」などのフォルダと、いくつかのファイルが現れます。そのうち、「js」「css」フォルダを使用したいサーバーにアップロードします。

 続いて、ダイアログボックスを使いたいHTMLファイルに以下の3行を追加し、JSファイルとCSSファイルを読み込ませます。


<link type="text/css" href="http://アップロード先/css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />  
<script type="text/javascript" src="http://アップロード先/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://アップロード先/js/jquery-ui-1.7.2.custom.min.js"></script>

前へ 1 2 3 次へ

Web Professionalトップへ

この記事の編集者は以下の記事をオススメしています

Webディレクター江口明日香が行く