مسج واجهة المستخدم سبيل المثال - الحوار (حوار)
المحتوى المفتوح في تراكب التفاعلية.
لمزيد من التفاصيل حول مكونات الحوار، راجع وثائق API مكونات الحوار (الحوار القطعة) .
وظيفة الافتراضي
يتم وضع إطار الحوار الأساسي في منطقة المشاهدة في طبقة الغلاف، من خلال محتوى IFRAME والصفحات مفصولة (مثل تحديد العناصر). وهو يتألف من شريط العنوان وتكوين منطقة المحتوى، ويمكن نقلها، وحجمها، والتقصير من قبل رمز 'س' لإغلاق.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم الحوار (حوار) - وظيفة الافتراضي </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (وظيفة () {
$ ( "#dialog") .dialog ()؛
})؛
</ script>
</ رئيس>
<body>
<شعبة معرف = "الحوار" عنوان = "الحوار الأساسي">
<P> هذا هو مربع الحوار الافتراضي لعرض المعلومات. نافذة الحوار يمكن نقل، تغيير حجمها، والتقصير من قبل رمز 'س' لإغلاق. </ P>
</ div>
</ الجسم>
</ HTML>
حيوية
يمكنك تحديد المؤثرات الخاصة إظهار / إخفاء الملكية الرسوم المتحركة لعرض مربع الحوار. يجب عليك الرجوع إلى ملف منفصل عن التأثير الذي تريد استخدام المؤثرات الخاصة.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم الحوار (حوار) - منتديات </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (وظيفة () {
$ ( "#dialog") .dialog ({
autoOpen: كاذبة،
العرض: {
الأثر: "أعمى"،
مدة: 1000
}،
إخفاء: {
الأثر: "تنفجر"،
مدة: 1000
}
})؛
$ ( "#opener"). انقر (وظيفة () {
$ ( "#dialog") .dialog ( "فتح")؛
})؛
})؛
</ script>
</ رئيس>
<body>
<شعبة معرف = "الحوار" عنوان = "الحوار الأساسي">
<P> هذا هو عرض للرسوم المتحركة من مربع الحوار، لعرض المعلومات. نافذة الحوار يمكن نقل، تغيير حجمها، والتقصير من قبل رمز 'س' لإغلاق. </ P>
</ div>
<زر معرف = "فتحت"> الحوار فتح </ زر>
</ الجسم>
</ HTML>
الوضع الأساسي
مشروط بقية الحوار للصفحة لمنع المستخدمين من خارج منطقة الجزاء الحوار للتفاعل حتى يتم إغلاق مربع الحوار.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم الحوار (حوار) - مشروط الأساسي </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (وظيفة () {
$ ( "# حوار مشروط") .dialog ({
الطول: 140،
مشروط: صحيح
})؛
})؛
</ script>
</ رئيس>
<body>
<شعبة معرف = "حوار مشروط" عنوان = "الحوارات مشروط الأساسية">
<P> الإضافية مشروط تراكب الشاشة، وجعل نظرة الحوار أكثر بروزا لأنه يخفت السماح المحتويات الأخرى على الصفحة. </ P>
</ div>
<P> سد فيل بقطر معرف يبيرو <a href="http://www.w3cschool.cc"> rutrum convallis </A>. Donec aliquet ليو فيل ماجنا. Phasellus rhoncus faucibus ما كان عليه سابقا. Etiam bibendum، ENIM faucibus aliquet rhoncus، arcu الهرية ultricies neque، والجلوس امات auctor إيليت إيروس على LECTUS. </ P>
</ الجسم>
</ HTML>
تأكيدا مشروط
تأكيد عمل مدمر قد تكون أيضا معنى ممكن. وضع modal خيار صحيح، و buttons لتعيين خيارات إجراءات المستخدم الابتدائية والثانوية.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم الحوار (حوار) - تأكيد الوسائط </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (وظيفة () {
$ ( "حوار-تأكيد #") .dialog ({
يمكن تغيير حجم: كاذبة،
الطول: 140،
مشروط: صحيح،
أزرار: {
"حذف كافة العناصر": وظيفة () {
$ (هذا) .dialog ( "وثيقة")؛
}،
إلغاء: وظيفة () {
$ (هذا) .dialog ( "وثيقة")؛
}
}
})؛
})؛
</ script>
</ رئيس>
<body>
<شعبة معرف = "حوار تأكيد" عنوان = "تفريغ سلة المهملات؟">
<P> <SPAN الطبقة = "واجهة المستخدم، واجهة المستخدم رمز-رمز-في حالة تأهب" على غرار = "تعويم: غادر؛ هامش: 0 7px 20px 0؛"> </ SPAN> سيتم حذف هذه البنود بشكل دائم ولا يمكن استردادها. هل أنت متأكد؟ </ P>
</ div>
<P> سد فيل بقطر معرف يبيرو <a href="http://www.w3cschool.cc"> rutrum convallis </A>. Donec aliquet ليو فيل ماجنا. Phasellus rhoncus faucibus ما كان عليه سابقا. Etiam bibendum، ENIM faucibus aliquet rhoncus، arcu الهرية ultricies neque، والجلوس امات auctor إيليت إيروس على LECTUS. </ P>
</ الجسم>
</ HTML>
نموذج مشروط
مربع حوار مشروط لطلب المستخدم لإدخال البيانات في عملية متعددة الخطوات. جزءا لا يتجزأ من المحتوى شكل منطقة العلامة ضبط modal خيار صحيح، و buttons لتعيين خيارات إجراءات المستخدم الابتدائية والثانوية.
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم الحوار (حوار) - مشروط أشكال </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<نمط>
هيئة {FONT-SIZE: 62.5٪؛}
التسمية، ومدخلات {عرض: كتلة؛}
input.text {هامش القاع: 12px؛ العرض: 95٪؛ الحشو: .4em؛}
مجموعة حقول {الحشو: 0؛ الحدود: 0؛ هامش قمة: 25px؛}
H1 {FONT-SIZE: 1.2em؛ الهامش: .6em 0؛}
شعبة # المستخدمين تحتوي على {العرض: 350px؛ الهامش: 20px 0؛}
شعبة # المستخدمين يحتوي الجدول {هامش: 1em 0؛ الحدود انهيار: انهيار؛ عرض: 100٪؛}
شعبة # المستخدمين يحتوي الجدول الدفتيريا، شعبة # المستخدمين يحتوي الجدول الثاني عشر {الحدود: #eee الصلبة 1PX؛ الحشو: .6em 10px؛ محاذاة النص: غادر؛}
.ui-الحوار .ui للدولة من الأخطاء {الحشو: .3em؛}
.validateTips {الحدود: 1PX صلبة شفافة؛ الحشو: 0.3em؛}
</ النمط>
<script>
$ (وظيفة () {
اسم فار = $ ( "# NAME")،
البريد الإلكتروني = $ ( "#email")،
كلمة المرور = $ ( "#password")،
allFields = $ ([]). إضافة (اسم). إضافة (البريد الإلكتروني). إضافة (كلمة السر)،
نصائح = $ ( ".validateTips")؛
updateTips وظيفة (ر) {
نصائح
.text (ر)
.addClass ( "واجهة المستخدم للدولة-تسليط الضوء على")؛
setTimeout (وظيفة () {
tips.removeClass ( "واجهة المستخدم للدولة-تسليط الضوء"، 1500)؛
}، 500)؛
}
وظيفة checkLength (س، ن، دقيقة، كحد أقصى) {
إذا (o.val (). طول> ماكس || o.val (). طول <دقيقة) {
o.addClass ( "واجهة المستخدم للدولة للخطأ")؛
updateTips ( "" + ن + "يجب أن يكون تحت عنوان" +
دقيقة + "بين" "و" + ماكس +)؛
عودة كاذبة.
} {شيء آخر
العودة الحقيقية.
}
}
وظيفة checkRegexp (س، التعبير العادي، ن) {
إذا (! (regexp.test (o.val ()))) {
o.addClass ( "واجهة المستخدم للدولة للخطأ")؛
updateTips (ن)؛
عودة كاذبة.
} {شيء آخر
العودة الحقيقية.
}
}
$ ( "الحوار شكل #") .dialog ({
autoOpen: كاذبة،
الطول: 300،
عرض: 350،
مشروط: صحيح،
أزرار: {
"إنشاء حساب جديد": وظيفة () {
فار bValid = صحيح.
allFields.removeClass ( "واجهة المستخدم للدولة للخطأ")؛
bValid = bValid && checkLength (الاسم، "اسم المستخدم"، 3، 16)؛
bValid = bValid && checkLength (البريد الإلكتروني، "البريد الإلكتروني"، 6، 80)؛
bValid = bValid && checkLength (كلمة السر "كلمة السر"، 5، 16)؛
bValid = bValid && checkRegexp (الاسم، / ^ [من الألف إلى الياء] ([0-9a زي _]) + $ / ط، "يجب أن يكون اسم المستخدم من الألف إلى الياء، 0-9، يؤكد، ويجب أن يبدأ بحرف.")؛
// من jquery.validate.js (عن طريق يورن)، التي ساهمت سكوت غونزاليس: http://projects.scottsplayground.com/email_address_validation/
bValid = bValid && checkRegexp (البريد الإلكتروني، / ^ ((([من الألف إلى الياء] | \ د | [# \ $٪ & '\ * \ + \ - \ / = \ \ ^ _ `{\ |} !؟ ~] | . [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) + (\ ([من الألف إلى الياء] | \ د | [# \ $٪ & '\ * \ + \ - \ / = \ \!؟ ^ _` {\ |} ~] | [\ 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؟ ))) @ ((([من الألف إلى الياء] | \ د | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) | (([من الألف إلى الياء] | \ د | [\ u00A0- \ uD7FF \ uF900 - \ uFDCF \ uFDF0- \ uFFEF]) ([من الألف إلى الياء] | \ د | - | \ | _ | ~ | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) * ([من الألف إلى الياء] | \ د | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]))) \) + (([من الألف إلى الياء] | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF ]) | (([من الألف إلى الياء] | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) ([من الألف إلى الياء] | \ د | - | \ | _ | ~ | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) * ([من الألف إلى الياء] |.؟. [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]))) \ $ / ط، "على سبيل المثال واجهة المستخدم @ jquery.com ")؛
bValid = bValid && checkRegexp (كلمة السر، / ^ ([0-9a-ZA-Z]) + $ /، "حقل كلمة المرور يسمح فقط: من الألف إلى الياء 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 ( "واجهة المستخدم للدولة للخطأ")؛
}
})؛
$ ( "# إنشاء المستخدم")
.button ()
. انقر (وظيفة () {
$ ( "# حوار شكل") .dialog ( "فتح")؛
})؛
})؛
</ script>
</ رئيس>
<body>
<شعبة معرف = "الحوار شكل" عنوان = "إنشاء مستخدم جديد">
<P الطبقة = "validateTips"> يجب على جميع حقول النموذج. </ P>
<النموذج>
<مجموعة حقول>
<تسمية ل= "اسم"> اسم </ التسمية>
<إدخال نوع = "نص" اسم = "اسم" معرف = "اسم" الطبقة = "نص واجهة المستخدم القطعة-المحتوى واجهة المستخدم الزاوية للجميع">
<تسمية ل= "البريد الإلكتروني"> صندوق البريد </ التسمية>
<إدخال نوع = "نص" اسم = "البريد الإلكتروني" معرف = "البريد الإلكتروني" قيمة = "" الطبقة = "نص واجهة المستخدم القطعة-المحتوى واجهة المستخدم الزاوية للجميع">
<تسمية ل= "كلمة المرور"> كلمة المرور </ التسمية>
<نوع الإدخال = "كلمة السر" اسم = "كلمة المرور" معرف = "كلمة المرور" قيمة = "" الطبقة = "نص واجهة المستخدم القطعة-المحتوى واجهة المستخدم الزاوية للجميع">
</ مجموعة حقول>
</ النموذج>
</ div>
<شعبة معرف = "المستخدمين تحتوي على" الطبقة = "واجهة المستخدم القطعة">
<H1> مستخدم موجود: </ H1>
<جدول معرف = "المستخدمين" الطبقة = "واجهة المستخدم، واجهة المستخدم القطعة تطبيق مصغر المحتوى">
<THEAD>
<الفئة آر = "واجهة المستخدم القطعة-رأس">
<ث> اسم </ تشرين>
<ث> صندوق البريد </ تشرين>
<ث> كلمة المرور </ تشرين>
</ tr>
</ THEAD>
<TBODY>
<tr>
<td> فلان الفلاني </ td>
<td> [email protected] </ td>
<td> johndoe1 </ td>
</ tr>
</ TBODY>
</ الجدول>
</ div>
<زر معرف = "إنشاء المستخدم"> إنشاء مستخدم جديد </ زر>
</ الجسم>
</ HTML>
رسالة مشروط
مربع حوار مشروط لتأكيد المعلومات والعمل قبل تنفيذ الإجراء التالي. وضع modal خيار صحيح، و buttons لتحديد خيارات العمل الرئيسية (طيب).
<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
<محارف ميتا = "UTF-8">
<عنوان> مسج واجهة المستخدم الحوار (حوار) - رسالة الوسائط </ عنوان>
<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (وظيفة () {
$ ( "حوار-رسالة #") .dialog ({
مشروط: صحيح،
أزرار: {
طيب: وظيفة () {
$ (هذا) .dialog ( "وثيقة")؛
}
}
})؛
})؛
</ script>
</ رئيس>
<body>
<شعبة معرف = "رسالة الحوار" عنوان = "تحميل كاملة">
<P>
<الطبقة سبان = "واجهة المستخدم، واجهة المستخدم رمز-رمز-دائرة فحص" النمط = "تعويم: غادر؛ هامش: 0 7px 50px 0؛"> </ SPAN>
وقد تم تحميل الملف بنجاح إلى المجلد.
</ P>
<P>
الاستخدام الحالي من مساحة التخزين <ب> 36٪ </ B>.
</ P>
</ div>
<P> سد فيل بقطر معرف يبيرو <a href="http://www.w3cschool.cc"> rutrum convallis </A>. Donec aliquet ليو فيل ماجنا. Phasellus rhoncus faucibus ما كان عليه سابقا. Etiam bibendum، ENIM faucibus aliquet rhoncus، arcu الهرية ultricies neque، والجلوس امات auctor إيليت إيروس على LECTUS. </ P>
</ الجسم>
</ HTML>