أمثلة مسج واجهة المستخدم - عرض (مشاهدة)
استخدام تأثيرات مخصصة لعرض العناصر المطابقة.
لمزيد من المعلومات حول .show()
تفاصيل الأساليب، راجع وثائق API . تظهر () .
. تظهر () عرض توضيحي
انقر فوق الزر لمعاينة آثار.
<! 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"> <نمط> .toggler {العرض: 500px؛ الطول: 200px؛} #button {الحشو: .5em 1em؛ النص الديكور: لا شيء؛} #effect {العرض: 240px؛ الطول: 135px؛ الحشو: 0.4em، موقع: نسبي؛} #effect H3 {هامش: 0؛ الحشو: 0.4em؛ مواءمة النصوص: مركز؛} </ النمط> <script> $ (وظيفة () { // تشغيل المحدد حاليا وظيفة تأثير runEffect () { // اشتقاق آثار نوع فار selectedEffect = $ ( "#effectTypes") .val ()؛ // معظم الآثار لا تحتاج إلى كتابة خيارات خيارات التسليم الافتراضي فار = {}؛ // بعض المؤثرات الخاصة مع المعلمات المطلوبة إذا (selectedEffect === "على نطاق") { خيارات = {المئة: 100}؛ } آخر إذا (selectedEffect === "حجم") { خيارات = {ل: {عرض: 280، الطول: 185}}؛ } // آثار تشغيل $ ( "#effect"). تظهر (selectedEffect، خيارات، 500، رد)؛ }؛ // وظيفة استدعاء الاستدعاء () { setTimeout (وظيفة () { $ ( "#effect: مرئي") .removeAttr ( "نمط") .fadeOut ()؛ }، 1000)؛ }؛ // تعيين القيمة وفقا لاختيار الآثار القائمة $ ( "#button"). انقر (وظيفة () { runEffect ()؛ عودة كاذبة. })؛ $ ( "#effect") .hide ()؛ })؛ </ script> </ رئيس> <body> <div الطبقة = "toggler"> <شعبة معرف = "تأثير" الطبقة = "واجهة المستخدم القطعة-المحتوى واجهة المستخدم الزاوية للجميع"> <H3 الطبقة = "واجهة المستخدم القطعة-رأس واجهة المستخدم الزاوية للجميع"> العرض (مشاهدة) </ H3> <P> Etiam يبيرو neque، luctus لذلك، eleifend اللجنة الوطنية للانتخابات، سمبر في، أبجد. سد الر. metus لا عقوبة أبجد، adipiscing التحرير، luctus الحوار الاقتصادي الاستراتيجي، hendrerit الذاتية، ميل. </ P> </ div> </ div> <اختر اسم = "الآثار" معرف = "effectTypes"> <قيمة الخيار = "العمياء"> ظلال الآثار (مكفوفين تأثير) </ خيار> <الخيار قيمة = "ترتد"> حدوث آثار ارتدادية (ترتد تأثير) </ خيار> <الخيار قيمة = "كليب"> آثار كليب (كليب تأثير) </ خيار> <قيمة الخيار = "قطرة"> آثار الهبوط (قطرة تأثير) </ خيار> <الخيار قيمة = "تنفجر"> آثار الانفجار (تنفجر تأثير) </ خيار> <الخيار قيمة = "اضعاف"> آثار للطي (أضعاف تأثير) </ خيار> <الخيار قيمة = "تسليط الضوء"> تأثيرات الإضاءة (تسليط الضوء على تأثير) </ خيار> <الخيار قيمة = "نفخة"> آثار التوسع (النفخة تأثير) </ خيار> <الخيار قيمة = "خفق"> فاز الآثار (خفق تأثير) </ خيار> <الخيار قيمة = "نطاق"> آثار تكبير (مقياس تأثير) </ خيار> <الخيار قيمة = "زعزعة"> آثار الاهتزاز (اهتز تأثير) </ خيار> <الخيار قيمة = "حجم"> آثار الحجم (حجم تأثير) </ خيار> <الخيار قيمة = "الانزلاق"> آثار شريحة (الشرائح تأثير) </ خيار> </ تحديد> <a href="#" id="button" class="ui-state-default ui-corner-all"> تشغيل آثار </A> </ الجسم> </ HTML>