تسجيل الدخول
ملاحظة : هذه هي الترجمة الآلية الرجاء استخدام لغة واضحة من دون عاميا.

صفحة كاملة تراكب النافذة

Abraham Chaffin
دروس خصوصية :
صفحة كاملة تراكب النافذة
أ creativecow webdesign تعليمي


Window Overlay Tutorial

صفحة كاملة نافذة منبثقة تراكب


في هذا البرنامج التعليمي ستتعلم كيفية إنشاء صفحة كاملة نافذة منبثقة أن وجود تراكب html صفحة. وتستخدم هذه التقنية في كثير من الأحيان لعرض شريط فيديو, ملف الفيلم, صورة, شكل أو عندما يقوم المستخدم بالنقر على عنصر في صفحة ويب.




Abraham Chaffinابراهام chaffin
creativecow.net,
Cambria, كاليفورنيا في الولايات المتحدة الأمريكية.

© 2008 creativecow.net. جميع الحقوق محفوظة.


وبالنظر إلى مثال

مقدمة

هذه التقنية ليست نافذة منبثقة مثل عموما يمكن للمرء أن يفكر. وهي ليست منفصلة من النافذة html على أن يتم فتح المتصفح ، وإنما شعبة أن يعلو القائمة html صفحة. فإن شعبة هو شبه شفافة ويخلق لطيفة مفادها أن يتيح للمستخدم معرفة يمكنهم العودة إلى صفحة أخرى عن طريق إغلاق نافذة (شعبة) هو أعلى.

الطريقة التي تقف وراء هذا هي جميلة على التوالي إلى الأمام:

الأولي للدولة للشعبة التي تراكب الصفحة ولا يخفى انه في المحتوى الداخلي html. وهذا يعني مبدئيا ليس هناك ما بين فتح شعبة الوسم وإغلاق شعبة الوسم وعنصر لديه أي عرض.

للشروع في عرض للشعبة يجب أولا واختيار العناصر التي سوف يقوم المستخدم النقر على, تحوم فوق, الخ. تكليف لسلوك. هل يمكن أن يكون عليه عندما بدأت صفحة الأحمال إذا أردت. عموما اتخذتم صورة, زر, أو النص على أن يقوم المستخدم بالنقر على الشروع في جافا سكريبت وظيفة.

عندما يتم عرض شعبة جافا سكريبت بها هي أساسا مهمة إزالة أي قيمة العرض لعرض قيمة فارغة أو ''التي تعود لعناصر القيمة الافتراضية التي يتم عرضها. وثانيا فإن شعبة الداخلية html امتلأ مسبقا html المدونة التي ستكون الشفرة التي ما تشاء ليعرض في تراكب النافذة. في هذا المثال سيكون لدينا شريط فيديو داخل الجدول يساعد المركز الفيديو في وسط الشاشة. سيكون هناك أيضا وثيقة زر لإغلاق نافذة أو شبه شفافة نافذة منبثقة شعبة.

وثيقة بالضغط على زر في نافذة منبثقة يبدأ عكس عندما تم عرض. انه يعطي شعبة عرض القيمة إلى لا شيء ، ويضع الداخلية html إلى أي شيء.


الشفرة

تبدأ هنا هو رمز من البداية وحتى النهاية ، وبعد ذلك سنذهب عليها قطعة قطعة:




طريقة صارمة

ووفقا لهذه المدونة هو مطلوب على رأس هذه الوثيقة لتمكين صارمة في طريقة IE7. المواقع الثابتة غير مدعوم في IE7 دون تنفيذ هذا البرنامج التعليمي ، وهذا لن ينجح. أن ندرك أيضا أن هذا قد لا تعمل في جميع المتصفحات ثابتة المواقع هي الأحدث المغلق الملكية.




التصميم المغلق

دعونا نذهب مدى التصميم المغلق للشعبة ونرى ما يجعل من شبه شفافة شعبة أن يعلو بقية الصفحات:



فإن ض مؤشر المغلق الممتلكات تستخدم لرفع طبقة ض في الفضاء فوق كل عنصر من عناصر مثل القوائم المنسدلة, الخ. 10000 لوضع جيد يضمن انك سوف تحصل على شيء أكثر العناصر الأخرى التي لها تعريف مؤشر ض.

الجزء الأصعب هو الحصول على شبه شفافة شعبة التنفيذ عبر عدة متصفحات. فايرفوكس, إنترنت إكسبلورر, السفاري, الأوبرا, وحتى جوجل الكروم س = ليست كل هذه المتصفحات من استخدام نفس شبه شفافة المغلق تحديد الملكية. أي انه يستخدم فلتر طبض. موزيلا فايرفوكس "- الأكسيد المختلط بين التعتيم". وغيرها من استخدام "التعتيم" الذي يجعل من الأفضل لي ، ويؤمل أن تصبح معيارا في المستقبل.

السطر الأول "(# displaybox"ويعهد التالية لعنصر النمط مع displaybox هوية.

الخمس المقبلة خطوط طرق مختلفة لجعل التعتيم الى 50 ٪
" فلتر: ألفا (شقاف = 50) ؛ / * * أي من كبار السن / فلتر:معرف البرنامج:Dximagetransform.microsoft.ألفا (شقاف = 50) ؛ / * أي * / - moz - شقاف: .50 ؛ / * * موزيلا القديمة / - khtml - شقاف: 0.5 ؛ / * * السفاري القديمة / شقاف: 0.5 ؛ / * يدعمها الحالي موزيلا, السفاري, والأوبرا * / "
ببساطة تغيير 5, .5 أو 50 في القيم على ما تريد. على سبيل المثال من المقرر ان 50 ٪ شقاف.

"لون الخلفية:# 000000 ؛"بالطبع يجعل لون الخلفية السوداء ثم 50 ٪ من الشفافية سيجعل الرمادية.

"الموقف:ثابت ؛"يحدد المواقع الثابتة لا تكون نسبية أو مطلقة في تدفق الصفحة. هذا يجعل من ذلك عنصر لا يمكن القفز فوقها والطفو وغيرها من العناصر الثابتة لتكون نافذة وليس في صفحة أو عناصر أخرى. المواقع النسبية يضع العنصر في تدفق الصفحة ونقل وتحركات العناصر الأخرى من حولها. يطفو فوق المطلقة ، ولكن بالنسبة لصفحة لم النافذة, إذا كنت تستخدم هذا العنصر الذي لن يؤدي إلا إلى البقاء في أعلى الصفحة.

"أعلى:0px ؛ اليسار:0px ؛ العرض ::100 ٪ وارتفاع:100 ٪ ؛"الاماكن شبه شفافة شعبة في أعلى الزاوية اليسرى ، وينتشر بها بقدر ما يمكن عبر النافذة.

"مواءمة النصوص:مركز ؛ الرأسي بين توفيق:المتوسطة ؛"لي بداية محاولة لعناصر داخل مركز للشعبة لمنتصف الصفحة.


جافا سكريبت

الآن دعونا نلقي نظرة على جافا سكريبت يجعل عنصر التغيير عندما يتفاعل المستخدم مع الصفحة وتنفذها جافا سكريبت وظيفة:



السطر الأول من وظيفة مهمة ويعلن اسم "مقرقعة وظيفة () ("لاستخدامها في جميع أنحاء الصفحة.

"= وثيقة Thediv فار.Getelementbyid ( 'displaybox') ؛ " وتحدد قيمة "Thediv" متغير لشعبة المعرف "displaybox". "Thediv" متغير وسوف تستخدم خلال ما تبقى من وظيفة حتى المتصفح ليست مضطرة لإعادة الحصول على عنصر displaybox.

"إذا كان (Thediv.النمط.عرض == "لا شيء") ("وتقول في الأساس, "اذا Thediv الآن لم يتم عرض ما أنا على وشك أن أقول لك."

جعل Thediv مرئية "Thediv.النمط.العرض = "" ؛".

هذا الانخفاض في html في Thediv "Thediv.Innerhtml = "ahref='#' onclick='return clicker()؛' إغلاق النافذة /"". في المنتصف البلدين علامات الاقتباس هنا يضع كل ما عليك html أردت أن يتم عرض. بعد أن نتذكر أن أقتبس من آخر [ "] ستنتهي هذا الوسم ذلك يجب استخدام واحد في الأسعار الخاصة بك html [ '] ، أو هربا من ["] باستخدام عكسي [] أمام جميع يستشهد ه.g. [ "]. يجب أن يوجد في مكان ما لديها القدرة على إغلاق نافذة ثانية. الحكمة الأخرى المستخدم سوف تتعثر مع نافذة على أعلى الصفحة ، وغير قادرة على العودة.

") والا ("اذا كان للعيان ، ثم شعبة...

"Thediv.النمط.العرض = "لا شيء" ؛"تخفي

"Thediv.Innerhtml = ''؛"وتحديد مضمونها الى شيء.

"}"اذا كان الغرض من بيان آخر.

"عودة كاذبة ؛"عودة كاذبة لهذه الوظيفة. هذا يجعل من ذلك أساسا إلى أن الصلة لا فعلا الذهاب الى وجهة للhref عند النقر عليها. إذا كنت تستخدم طريقة onclick على وصلة.

"}"نهاية المهمة.


مما يجعل العمل

لجعله فعلا العمل في الصفحة تحتاج إلى أن يكون في مكان ما من شعبة صفحة مخبأة في بداية الأمر ، وبالنسبة للمستخدم النقر على:

شعبة displaybox الخفية:



وصلة التي ستنفذ وإعادة مقرقعة onclick ظيفة جافا سكريبت:



وبالنظر إلى مثال

لهذا ينبغي أن أعطيك فكرة عن كيفية إنشاء هذه الغاية ، وكذلك يوفر لك ما يكفي من الفهم للتكيف, تغيير, والتلاعب على الدخول الخاص بك html التصميم. يتمتع!
المنتدياتدروس خصوصيةمجلةالخدماتالفيديوأخباربلوق


© CreativeCOW.net جميع الحقوق محفوظة.

المجتمعات المبدعة من العالم

[أعلى]

Englishالعربية中文FrançaisDeutschעבריתहिन्दीItaliano日本語PortuguêsРусскийEspañol