تابع مع JavaScript أعلاه تنفيذ نافذة السحب المنبثقة (I) للتعلم.
ما يلي هو التحليل المحدد للرمز:
أولاً ، دعنا نؤكد الهيكل:
نافذة عائمة: غير مرئي في البداية. يتضمن شريط العنوان وشريط المحتوى ، مع أشرطة العنوان وأزرار إغلاق داخل شريط العنوان.
طبقة قناع: غير مرئي في البداية. تستخدم لتعيين الخلفية الشفافة عندما تنبثق النافذة العائمة.
الزر: يستخدم للنقر للنوافذ على النافذة العائمة.
ما يلي سوف يشرح بالتفصيل
1. للسماح للنافذة بالتحرك بحرية ، يجب أن يكون موضع النافذة مطلقًا ؛
/*تسجيل الدخول إلى مكون الطبقة العائمة*/. popup {display: none ؛ /*الاختباء الأولي*/ العرض: 380 بكسل ؛ الارتفاع: السيارات ؛ /*الحرية العالية ، لأنه غير مؤكد ، مقدار المحتوى. */ الحدود: 1px الصلبة #D5D5D5 ؛ الخلفية: #ffff ؛ /*محتوى النافذة غير شفاف ، الخلفية بيضاء*/ box-shadow: 0 0 3px rgba (0 ، 0 ، 0 ، 0.25) ؛ -moz-box-shadow: 0 0 3px rgba (0 ، 0 ، 0 ، 0.25) ؛ -webkit-box-shadow: 0 0 3px rgba (0 ، 0 ، 0 ، 0.25) ؛ /*نافذة المحتوى مظللة*/ الحدود-Radius: 8px ؛ /* تستخدم جميع الزوايا زوايا مستديرة مع دائرة نصف قطرها 8 بكسل ، هذه الخاصية هي خاصية CSS3 قياسية*/ -Moz-Border-Radius: 8px ؛ /* السمات الخاصة لمتصفح Mozilla*/ -Webkit-Border-Radius: 8px ؛ /* السمات الخاصة لمتصفح webkit*//* زوايا مستديرة النافذة*/ الموضع: مطلق ؛ أعلى: 100px ؛ اليسار: 100px ؛ /*تحديد المواقع المطلقة*/ z-index: 9000 ؛ }2. أضف شريط العنوان إلى النافذة ، وقم بتعيين مؤشر الماوس لشريط العنوان على شكل السحب (نقل) (عند السحب بالكروم ، سيصبح المؤشر مؤشرًا نصًا ، وسيتم استعادته بعد إصدار زر الماوس). هنا تحتاج إلى ضبط زاوية مستديرة للزوايا اليمنى العلوية اليمنى والعليا من شريط العنوان.
/*منطقة شريط العنوان*/. popup_title {الارتفاع: 48px ؛ Line-Leight: 48px ؛ /*المركز عموديًا*/ حشوة: 0px 20px ؛ /*جعل مسافة معينة من اليسار*/ الخلفية: #f5f5f5 ؛ /*لون الخلفية*/ Border-Bottom: 1px Solid #Efefefef ؛ /*الحدود السفلية*/ الحدود-Radius: 8px 8px 0 0 ؛ /* استخدم زوايا مستديرة مع دائرة نصف قطرها 5 بكسل في الزوايا اليسرى العلوية والأعلى. هذه الخاصية هي خاصية CSS3 القياسية*/ -Moz-Border-Radius: 8px 8px 0 0 ؛ /* الخاصية الخاصة لمتصفح Mozilla*/ -webkit-border-Radius: 8px 8px 0 0 ؛ /* الخصائص الخاصة لمتصفح WebKit*//* زوايا مستديرة النافذة*/ اللون: #535353 ؛ حجم الخط: 16 بكسل ؛ /* لون الخط وحجم الخط*/ المؤشر: تحرك ؛ /* نمط متحرك*/ -moz-user-select: لا شيء ؛ / * firefox all */ -webkit-user-select: none ؛ /* chrome all / safari all / opera15+* / -MS-user-select: none ؛ /* ie10*/ -khtml-user-select: none ؛ /* المتصفحات المبكرة*/ تخطي المستخدم: لا شيء ؛ -O-USER-SELECT: لا شيء ؛ /* لا يتم دعم سمتين أعلاه حاليًا ، لذلك كتبتهما هنا لتقليل المخاطر*/}فيما يلي بعض نقاط المعرفة لفهمها:
1. CSS3 (الحدود الحدودية) الزوايا الدائرية
الحدود-راديوس هي طريقة اختصار. بالإضافة إلى ذلك ، يتم تعيين القيم الأربع بترتيب من أعلى اليسار ، أعلى اليمين ، أسفل اليمين ، اليسار السفلي ، واليسر السفلي. ستحدث المواقف الرئيسية في المواقف التالية:
1. إذا كانت هناك قيمة واحدة فقط ، فإن القيم الأربع لأعلى اليسار ، أعلى اليمين ، أسفل اليمين ، واليسرى السفلية متساوية.
2. هناك قيمتان ، ثم يساوي اليسار العلوي الأيمن الأسفل ، ويتم أخذ القيمة الأولى ؛ أعلى اليمين يساوي أسفل اليسار ، ويتم أخذ القيمة الثانية
3. هناك ثلاث قيم ، القيمة الأولى هي تعيين أعلى اليسار ؛ على الرغم من أن القيمة الثانية هي اليمين العلوي واليسرى السفلية وستكون متساوية ، والقيمة الثالثة هي ضبط اليمين السفلي.
4. هناك أربع قيم ، والقيمة الأولى هي تعيين أعلى اليسار والقيمة الثانية هي أعلى اليمين ، والقيمة الثالثة أسفل اليمين ، والقيمة الرابعة هي تعيين أسفل اليسار.
المتصفحات المدعومة:
2. المؤشر: تحرك
تحدد خاصية المؤشر نوع المؤشر (المؤشر) المعروض.
عندما تتحرك قيمة الخاصية ، فهذا يعني أن الكائن المشار إليه بواسطة هذا المؤشر قابل للتحريك ، وعادة ما يكون سهمًا متقاطعًا ، كما هو موضح في الشكل.
3. User-Select: يستخدم للتحكم في انتقائية المحتوى
القيمة التلقائية-default ، يمكن للمستخدم تحديد المحتوى في العنصر
لا شيء - لا يمكن للمستخدم تحديد أي محتوى في العنصر
النص-يمكن للمستخدم تحديد النص في العنصر
العنصر - النص اختياري ، ولكن فقط داخل حدود العنصر (مدعوم فقط من IE و FF)
تجدر الإشارة إلى أن تخطي المستخدم ليس سمة قياسية لـ W3C CSS ، ويدعم المتصفح بشكل غير كامل ويحتاج إلى تعديله لكل متصفح.
وصف المستخدم:
يقوم بتعيين أو استرداد ما إذا كان المستخدم مسموحًا بتحديد النص.
(1) لا يدعم IE6-9 هذه الخاصية ، ولكنه يدعم استخدام سمة العلامة OnSelectStart = "Return False ؛" لتحقيق تأثير اختيار المستخدم: لا شيء ؛ تدعم Safari و Chrome أيضًا سمة العلامة هذه ؛
(2) لا يتم دعم هذه الخاصية حتى Opera12.5 ، ولكن مثل IE6-9 ، فإنها تدعم أيضًا استخدام سمة العلامة الخاصة غير قابلة للتكوين = "ON" لتحقيق تأثير اختيار المستخدم: لا شيء ؛
(3) قيمة أخرى غير قابلة للتكاثر هي خارج ؛ في المتصفحات الأخرى ، إذا تم تعيين النص على -MS-User-Syerct: لا شيء ؛ في المتصفحات الأخرى ، لن يتمكن المستخدم من بدء اختيار النص في كتلة النص.
ومع ذلك ، إذا بدأ المستخدم في تحديد النص في مناطق أخرى من الصفحة ، فلا يزال بإمكان المستخدم الاستمرار في تحديد نص المنطقة الذي يحدد النص على -MS-User-Seerect: None ؛.
تحليل الكود التالي (ملاحظة: هذا الرمز ونتائج تحليل هذا الرمز من W3HELP):
<! doctype html> <html> <Body> <div unlecectable = "on" style = "background: #cc ؛" > غير قابلة للتحديد = على </div> <br/> <div style = "background: #cc ؛ -webkit-user-select: none ؛" > -webkit-user-select: none ؛ </div> <br/> <div style = "background: #cc ؛ -moz-user-select: none ؛" > -moz-user-select: none ؛ </div> <br/> <div style = "background: #cc ؛" onSelectStart = "return false ؛" > OnSelectStart = "return false ؛" </viv> </body> </html>
التأثيرات في كل متصفح هي كما يلي:
ملاحظة 1: يمكن تعطيل المحتوى.
ملاحظة 2: لا يحظر تحديد أي محتوى.
يمكن ملاحظة أن طريقة حظر اختيار المحتوى هي كما يلي:
ie set غير قابلة للتحديد = "on" للعلامة ، وتعيين طريقة العلامة onSelectStart = "return false ؛"
يضع Firefox أنماطًا خاصة للعلامات -Moz-User-Select: لا شيء.
يقوم Chrome Safari بتعيين نمط خاص للعلامة-Webkit-User-Select: لا شيء ، ويعين طريقة العلامة OnSelectStart = "FALSE ؛".
مجموعة الأوبرا غير قابلة للتشكيل = "ON" للعلامات
حل
قم بتعيين أنماط للعلامات -moz-user-select: لا شيء ؛ -webkit-user-select: لا شيء في نفس الوقت ، قم بتعيين غير قابلة للتحديد = "on" للتأكد من أن جميع المتصفحات يمكن أن تحظر اختيار المحتوى.
إذا قمت بتعيين نمط الاختيار المحظور على شريط عنوان النافذة المنبثقة الفرق العائم في العلبة ، فيمكنك تعيينه على هذا النحو:
<div id = "popup_title" غير قابلة للتحديد = "on"> تسجيل الدخول <a href = "javaScript: HidePopup () ؛"> </a> </viv>
.popup_title {-moz-user-select: none ؛ / * firefox all */ -webkit-user-select: none ؛ /* chrome all / safari all / opera15+* / -MS-user-select: none ؛ /*ie10*/ -khtml-user-select: none ؛ /* المتصفحات المبكرة*/ تخطي المستخدم: لا شيء ؛ -O-USER-SELECT: لا شيء ؛ /*لا يتم دعم السامتين أعلاه حاليًا ، مكتوبة هنا لتقليل المخاطر*/}ملاحظة: هذه المقالة أصلية ، العنوان: http://www.cnblogs.com/wanghuih/p/5576910.html
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.