jQueryのUIの例 - ダイアログ（対話）
インタラクティブオーバーレイで開くコンテンツ。
ダイアログコンポーネントの詳細については、APIドキュメントを参照してください]ダイアログコンポーネント（ダイアログウィジェットを） 。
デフォルトの機能
基本的なダイアログ・ウィンドウが（選択の要素のような）分離IFRAME、ページコンテンツを介して、カバー層における視域に配置されます。 これは、タイトルバーとコンテンツ領域の組成から成り、および、移動、サイズ変更、閉じるために「X」アイコンでデフォルトすることができます。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIのダイアログ（対話） - デフォルトの機能</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$（関数（）{
$（ "#dialog」）.dialog（）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVのID = "ダイアログの" title = "基本的なダイアログ">
<P>これは、情報を表示するためのデフォルトのダイアログボックスです。 ダイアログウィンドウが閉じるには 'x'をアイコンでデフォルト、移動、サイズ変更することができます。 </ P>
</ DIV>
</ BODY>
</ HTML>
アニメーション
あなたは特別な効果は/表示ダイアログボックスを表示するアニメーションプロパティを非表示に指定することができます。 あなたが特殊効果を使用したい効果のために別のファイルを参照する必要があります。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIのダイアログ（対話） - アニメ</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$（関数（）{
$（ "#dialog」）.dialog（{
AutoOpenプロパティ：偽、
ショー：{
効果：「ブラインド」、
期間：1000年
}、
非表示：{
効果：「爆発」、
期間：1000年
}
}）;
$（ "#opener"）.click（関数（）{
$（ "#dialog」）.dialog（"開きます "）;
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVのID = "ダイアログの" title = "基本ダイアログ">
<P>これは、情報を表示するために、ダイアログボックスのアニメーション表示です。 ダイアログウィンドウが閉じるには 'x'をアイコンでデフォルト、移動、サイズ変更することができます。 </ P>
</ DIV>
<ボタンID = "開幕戦"> [開く]ダイアログ</ button>の
</ BODY>
</ HTML>
基本モード
ダイアログボックスが閉じられるまで、ダイアログボックスの外のユーザーを防止するために、ページのモーダルダイアログ残りは対話します。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIのダイアログ（対話） - 基本的なモーダル</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$（関数（）{
$（ "＃のダイアログモーダル」）.dialog（{
高さ：140、
モーダル：真
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVのID = "ダイアログモーダル"タイトル= "基本的なモーダルダイアログ">
<P>追加モーダルオーバーレイ画面を、それがページ上の他のコンテンツを聞かせて暗くなっているため、ダイアログの外観がより顕著にします。 </ P>
</ DIV>
<P>わかるsed VELのDIAM IDをリベロ<a href="http://www.w3cschool.cc"> rutrum convallis </a>に。〜している間aliquetレオのヴェルマグナ。Phasellus rhoncus faucibusアンティ。Etiamビバンダム、enim faucibus aliquet rhoncus、 ARCUフェリスultricies neque、座るAMET auctor ELITエロスlectusます。</ p>
</ BODY>
</ HTML>
モーダル確認
破壊的なアクションも可能感覚かもしれ確認してください。 設定modal trueにオプションを、そしてによってbuttonsプライマリとセカンダリのユーザーアクションのオプションを割り当てます。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIのダイアログ（対話） - モーダル確認</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$（関数（）{
$（ "＃のダイアログ-確認」）.dialog（{
サイズ変更可能：偽、
高さ：140、
モーダル：trueの場合、
ボタン：{
「すべての項目を削除」：関数を（）{
$（この）.dialog（ "クローズ"）;
}、
キャンセル：関数（）{
$（この）.dialog（ "クローズ"）;
}
}
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVのID = "ダイアログ・確認"タイトル= "ゴミ箱を空にしますか？">
<P> <スパンクラス= "UI-アイコンアイコンアラートUI"スタイル= "フロート：左;マージン：0 7px 20ピクセル0;"> </ span>のこれらのアイテムが完全に削除され、復元することはできません。 本当に？ </ P>
</ DIV>
<P>わかるsed VELのDIAM IDをリベロ<a href="http://www.w3cschool.cc"> rutrum convallis </a>に。〜している間aliquetレオのヴェルマグナ。Phasellus rhoncus faucibusアンティ。Etiamビバンダム、enim faucibus aliquet rhoncus、 ARCUフェリスultricies neque、座るAMET auctor ELITエロスlectusます。</ p>
</ BODY>
</ HTML>
モーダルフォーム
モーダルダイアログボックスは、多段階プロセスにデータを入力するようにユーザに要求します。 設定されているコンテンツ領域フォームタグに埋め込まれたmodal trueにオプションを、そしてによってbuttonsプライマリとセカンダリのユーザーアクションのオプションを割り当てます。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIのダイアログ（対話） - モーダルフォーム</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
ボディ{フォントサイズ：62.5％;}
ラベル、入力{表示：ブロック;}
input.text {マージン底：12ピクセル;幅：95％;パディング：.4em;}
フィールドセット{パディング：0;国境：0;マージントップ：25ピクセル;}
H1 {フォントサイズ：1.2em;マージン：.6em 0;}
div＃1 {幅：350px;マージン：20ピクセル0;}ユーザーは、含まれています
div＃テーブル{：;：崩壊;幅：100％;ボーダー崩壊1EM 0マージンを}ユーザーは、含まれています
div＃テーブルTDが、DIV＃1番目のテーブルをユーザー-含まれているユーザーは、含まれている{ボーダー：1pxの固体#eee;パディング：.6em 10pxの;テキスト整列は：左;}
.ui-ダイアログ.ui-状態エラー{パディング：.3em;}
.validateTips {ボーダー：1pxの透明な固体;パディング：0.3em;}
</スタイル>
<スクリプト>
$（関数（）{
するvar名= $（ "＃NAME"）、
メール= $（ "#email"）、
パスワード= $（ "#password」）、
allFields = $（[]）は、（名）.add（電子メール）.add（パスワード）.add
ヒント= $（ ".validateTips"）;
関数updateTips（T）{
ヒント
.text（T）
.addClass（「UI-状態-ハイライト "）;
setTimeoutメソッド（関数（）{
tips.removeClass（「UI-状態-ハイライト "、1500）;
}、500）;
}
機能checkLength（O、N、最小、最大）{
場合（o.val（）。length>の最大|| o.val（）。長さ<分）{
o.addClass（「UI-状態エラー "）;
updateTips（ "" + N + "+"の下でなければなりません
分+ "の間である。」」および「+最大+）。
falseを返します。
}エルス{
trueを返します。
}
}
機能checkRegexp（O、正規表現、n）は、{
場合（！（regexp.test（o.val（））））{
o.addClass（「UI-状態エラー "）;
updateTips（N）
falseを返します。
}エルス{
trueを返します。
}
}
$（ "＃のダイアログフォーム」）.dialog（{
AutoOpenプロパティ：偽、
高さ：300、
幅：350、
モーダル：trueの場合、
ボタン：{
「アカウントを作成」：関数を（）{
VAR BVALID =はtrue。
allFields.removeClass（「UI-状態エラー "）;
BVALID = BVALID && checkLength（名前、「ユーザ名」、3、16）;
BVALID = BVALID && checkLength（電子メール、「電子メール」、6、80）;
BVALID = BVALID && checkLength（パスワード、 "パスワード"、5、16）;
BVALID = BVALID && checkRegexp（名前、/ ^ [AZ]（[0-9A-Z _]）+ $ / iは、「ユーザ名はAZ、0-9、アンダースコアでなければならず、文字で始まる必要があります。 "）;
//スコット・ゴンザレスによって寄与jquery.validate.js（joernによる）、から：http://projects.scottsplayground.com/email_address_validation/
BVALID = BVALID && checkRegexp（電子メール、/ ^（（（[AZ] | \ D | [＃\ $％＆ '\ * \ + \ - \ / = \ \ ^ _ `{\ |}！？〜] | 。[\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]）+（\（[AZ] | \ D | [＃\ $％＆ '\ * \ + \ - \ / = \ \！？ ^ _` {\ |}〜] | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]）+）*）|（（\ X22）（（（（\ X20 | \ x09の）*（ \ x0dの\のX0A））（\ X20 |？\ x09の）+）（（[\ x01- \ X08 \ X0B \ x0c \ x0e- \ X1F \ x7f] |？\ X21 | [\ x23- \ X5B] | [ \ x5d- \ x7e] | [\ u00A0- \ uD7FF \ uF900- uFDCF \ uFDF0- \ uFFEF]）\ |（\\（[\ x01- \ x09の\ X0B \ x0c \ x0d- \ x7f] | [\ u00A0 ？ - \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]））））*（（（\ X20 | \ x09の）*（\ x0d \ X0A））（\ X20 | \ x09の）+）（\ X22？ ）））（（（[AZ] @ | \ D | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]）|（（[AZ] | \ D | [\ u00A0- \ uD7FF \ uF900 - \ uFDCF \ uFDF0- \ uFFEF]）（[AZ] | \ D | - |。\ | _ |〜| [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]）*（[AZ] | \ D | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]）））\）+（（[AZ] | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF ]）|（（[AZ] | [\ u00A0- \ uD7FF \ uF900- uFDCF \ \ uFDF0- \ uFFEF]）（[AZ] | \ D | - |。\ | _ |〜| [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]）*（[AZ] |。？。[\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]）））の\ $ / I」、例えばUI @ jquery.com」）。
BVALID = BVALID && checkRegexp（パスワード、/ ^（[0-9A-ZA-Z]）+ $ / "のみ許可されたパスワードフィールド：AZ 0-9"）;
{（BVALID）の場合
$（ "#users TBODY」）.append（" <TR> "+
"<TD>" + name.val（）+ "</ TD>" +
"<TD>" + email.val（）+ "</ TD>" +
"<TD>" + password.val（）+ "</ TD>" +
"</ TR>"）;
$（この）.dialog（ "クローズ"）;
}
}、
キャンセル：関数（）{
$（この）.dialog（ "クローズ"）;
}
}、
クローズ：関数（）{
allFields.val（ ""）.removeClass（「UI-状態エラー "）;
}
}）;
$（ "＃ユーザーの作成」）
.button（）
.click（関数（）{
$（ "＃ダイアログフォーム」）.dialog（"オープン "）;
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVのID = "ダイアログ・フォーム"タイトル= "新規ユーザの作成」>
<Pクラス= "validateTips">すべてのフォームフィールドが必要です。 </ P>
<フォーム>
<フィールドセット>
<= "名前"のラベル>名前</ label>は
<input type = "text" NAME = "名前" ID = "名前"クラス= "テキストUIウィジェットコンテンツUI-コーナー-すべて">
メールボックス</ label>は、<= "電子メール"のラベル>
<input type = "text" NAME = "メール" ID = "メール"値= ""クラス= "テキストUIウィジェットコンテンツUI-コーナー-すべて">
<= "パスワード"のラベル>パスワード</ label>は
<入力タイプ= "パスワード"名前= "パスワード" ID = "パスワード"値= ""クラス= "テキストUIウィジェットコンテンツUI-コーナー-すべて">
</フィールドセット>
</フォーム>
</ DIV>
<DIVのID = "ユーザ-含ま"クラス= "UIウィジェット">
<H1>既存のユーザー：</ H1>
<表のID = "ユーザー"クラス= "UIウィジェットUIウィジェットコンテンツ」>
<THEAD>
<Trのクラス= "UIウィジェットヘッダ">
<Thの>名前</目>
<Thの>メールボックス</目>
<Thの>パスワード</目>
</ TR>
</ THEAD>
<TBODY>
<TR>
<TD>ジョン・ドウ</ TD>
<TD> [email protected] </ TD>
<TD> johndoe1 </ TD>
</ TR>
</ TBODY>
</表>
</ DIV>
<ボタンID = "ユーザの作成">新しいユーザーを作成します。</ button>の
</ BODY>
</ HTML>
モーダルメッセージ
次のアクションが実行される前の情報とアクションを確認するためのモーダルダイアログボックス。 設定modalでtrueにオプションを、そしてbuttonsメインのアクションオプション（OK）を指定します。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIのダイアログ（対話） - モーダルメッセージ</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$（関数（）{
$（ "＃のダイアログメッセージ」）.dialog（{
モーダル：trueの場合、
ボタン：{
OK：関数（）{
$（この）.dialog（ "クローズ"）;
}
}
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVのID = "ダイアログメッセージ"タイトル= "完全なダウンロード">
<P>
<スパンクラス= "UI-アイコンUI-アイコン-円チェック"スタイル= "フロート：左;マージン：0 7pxは50px 0;"> </ SPAN>
あなたのファイルが正常にフォルダにダウンロードされています。
</ P>
<P>
記憶スペースの現在の使用<B /> <B> 36％。
</ P>
</ DIV>
<P>わかるsed VELのDIAM IDをリベロ<a href="http://www.w3cschool.cc"> rutrum convallis </a>に。〜している間aliquetレオのヴェルマグナ。Phasellus rhoncus faucibusアンティ。Etiamビバンダム、enim faucibus aliquet rhoncus、 ARCUフェリスultricies neque、座るAMET auctor ELITエロスlectusます。</ p>
</ BODY>
</ HTML>