تقنيات لإنشاء مشروط ويندوز
عادةً ما يتم وصف النوافذ المشرّعة بأنها أي شيء يجذب انتباه المستخدم ، ولا يسمح له بالعودة إلى الحالة السابقة حتى يتفاعل مع الكائن المعني.
الآن ، هذا معقد بعض الشيء وأعتقد أنه من الأفضل التعامل مع بعض الأمثلة على مواقع الويب التي تستخدم هذه التقنية جيدًا. واحد من هؤلاء هو بناءه معي وهو ما يفعله بشكل جيد. إذا انتقلت إلى موقعهم وانقر على "تسجيل" ، فسترى مثالًا حرفيًا للغاية عندما يعمل صندوق مشروط.
في كثير من الأحيان عندما يتم التعامل مع الوسائط يتم استخدامها لتنظيف واجهات المستخدم ومحاولة تحسين تجربة المستخدم - ولكن من المهم أن نتذكر أنه في بعض الأحيان يفعلون العكس تماماً. ضع في اعتبارك مزعجًا لمواقع الويب التي تحتوي على عدد كبير جدًا من نوافذ منبثقة من جافا سكريبت ، أو مواقع غير مرغوب فيها تؤكد فعليًا أنك تريد مغادرة الموقع. هذا أمر مثير للسخرية ، والمواقع التي تفعل هذه الأشياء هي بالتأكيد عدم الذهاب ، لذلك تأكد من معرفة كيفية استخدام الحوارات مشروط قبل المضي قدما في التنفيذ.
لتزويدك بمثال أفضل عن كيفية القيام بها بشكل صحيح ، سوف نتحدث عن النظرية ، ثم بعد ذلك سوف ندخل في أمثلة لنوضح لك كيفية تنفيذها في تصميم سريع الاستجابة. لذلك دعونا نقفز إلى بعض النظريات.
نظرية مشروط
يمكن أن تتشابك النظرية الأساسية لعنصر واجهة المستخدم الخاصة بالموديلات مع نظريات واجهة المستخدم الأخرى التي سنلمسها هنا بشكل مؤقت. بشكل أساسي ، ما نراه هو ضرورة نحتاج فيها إلى مستخدم للنقر على قسم معين من الموقع ، والتركيز بشكل خاص على هذا القسم فقط حتى الانتهاء من المهمة التي يقدمها هذا القسم.
الآن ، يمكن استخدام هذا للعديد من الأشياء المختلفة مثل تسجيلات دخول المستخدم أو عناصر النموذج أو صفحات التنزيل أو قد يكون ببساطة عرض صورة وإلقاء نظرة على تعليقات تلك الصورة. يستخدم Facebook هذا لمساعدتك في التركيز على التفاعل عند النقر على صورة ، ولكن بالطبع يسمح لك بدورة الصور الموجودة هناك أيضًا. يمكنك النقر فوقها ، ثم يأخذ كل القدرة على التفاعل مع الصفحة الرئيسية حتى تنقر فوق خارج مربع الوسائط أو تنقر فوق "x" للعودة.
النظرية الأساسية على الرغم من أن المثير للاهتمام للغاية ، ويعتمد حقا على تلك المبادئ التي تطرقت للتو. دعنا نتجول في حالة استخدام حتى يمكنك الحصول على فكرة أفضل عن متى ولماذا تستخدم واحدة.
لنفترض أنك تدير موقعًا على الويب يمكن للمستخدمين فيه تسجيل الدخول وتسجيل الدخول إلى السعة التخزينية التي استأجروها منك (التخزين عبر الإنترنت). حسنًا ، أنت كشركة تعتمد بشكل لا يصدق على هؤلاء المستخدمين الذين لديهم تدفق كبير من الهبوط على صفحتك الرئيسية لتسجيل الدخول. نظرًا لأن هذا واحد من أهم الأشياء التي يعرضها موقعك ، فأنت تريد أن يشعر المستخدم بأنه مضطر لتسجيل الدخول و في الواقع جعلها سهلة للغاية بالنسبة لهم للقيام بذلك.
نتيجة لذلك ، قد يكون لديك رابط تسجيل دخول كبير على صفحتك الرئيسية ، أو قسم فعلي لها أن تفعل ذلك على الصفحة الرئيسية ، ربما في العنوان. على الرغم من أن المشكلة مع تلك ، في الحالة الأخيرة ، لا يشير المستخدم إلى تسجيل الدخول في أي حال ، وفي السابق لم يكن المستخدم مضطرًا لاتخاذ قرار.
الآن ، أنا لا أتغاضى عن إجبار المستخدمين على فعل أي شيء ولكن دفعهم بلطف هو أمر جيد تمامًا - وهذا ما قصدته بـ "مضطرًا". إذن ما يمكنك فعله هو أن يكون لديك رابط تسجيل دخول يسحب نافذة مشروطة مع نموذج تسجيل الدخول الموجود هناك. وبهذه الطريقة ، لن يضطروا أبدًا إلى الانتقال بعيدًا عن الصفحة الرئيسية ثم الانتقال مرة أخرى (عبر المثال الذي ذكرناه منذ لحظة) ، كما أنهم أيضًا على علم بنسبة 100٪ بما يفترض أن يفعلوه داخل النموذج.
إنها طريقة لطيفة للغاية لمساعدة المستخدمين على فهم ما يحدث ولماذا يحدث. لا بد لي من القول ، لقد استعملتها نفسي للعملاء وزاد معدل الاحتفاظ من هبوط الصفحة الرئيسية لتسجيل الدخول بنسبة 35 ٪ في الماضي التي رأيتها. وهذه بالتأكيد ليست أرقام لزعزعة العصا. فهي عبارة عن مقاييس قيّمة ومحددة بوضوح حول مدى قدرة نافذة مشروطة بسيطة على زيادة معدل الاستبقاء وتقليل معدل الارتداد.
ترميز نافذة مشروطة أساسية
دعونا نتعمق في بعض التعليمات البرمجية ، ولكننا نتجاهل الآن نوع النوع المشروط الذي سنستخدمه وجميع الجوانب الفنية ، ودعونا نركز فقط على الأساسيات الأساسية. إن HTML و CSS و jQuery هي ما سنركز عليه الآن.
عناصر HTML
هناك عنصرين أساسيين نحتاجهما ، وصلة لفتح النافذة والنافذة نفسها. سيبدو الرابط كالتالي:
يحتوي على سمة href التي سنستخدمها لاحقًا ، وفئة من modalLink التي سنستخدمها لتحديدها. ستبدو النافذة هكذا: Modal Window
Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
هذا الرمز هو div مع "نافذة" الفصل الدراسي ، لاحظ أنه يحتوي على معرف "مربع الحوار" الذي يطابق href الخاص بالرابط. في الداخل يوجد غلاف div آخر يحتوي على محتويات النافذة التي تتضمن زر "إغلاق". هذا ملفوف في div الخارجي. القسم الخارجي موجود فقط لإرفاق ترميزنا المشروط. لماذا نحتاج إلى تضمين الترميز؟ لأنك ربما تريد أكثر من إطار مشروط ، أو على الأقل خيار إضافة أكثر من واحد.
لإعداد أكثر من إطار مشروط أولاً ، نحتاج إلى إضافة رابط ثاني:
بعد ذلك ، نحتاج إلى إضافة نافذة ثانية:
نافذة مشروط
Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui. Morus leo risus، porta ac consectetur ac، vestibulum at eros.
قريب نافذة مشروط ب
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vestibulum id ligula porta felis euismod sempre. Sed posuere consectetur est at lobortis. ماديو دوى.
قريب
لاحظ أن كلا divs النافذة يتم تغليفها بواسطة div بمعرف id. لاحظ أيضًا أن معرّف النافذة المشروطة الأولى يتطابق مع href للرابط الأول وأن معرّف النافذة المشروطة الثانية يتطابق مع href للرابط الثاني ؛ هذه هي الطريقة التي ستستهدف بها الروابط النافذة الصحيحة بمجرد الوصول إلى jQuery.
عناصر CSS
نحتاج إلى تصميم ثلاثة عناصر من نوافذنا المشروطة ، سنبدأ بأبسطها:
#modal .contents{/* style the modal's contents, in this case we're just adding padding */padding:24px;}
هذه التعليمة البرمجية تقوم بتصنيف div مع "محتويات" الفصل (وهذا هو ما يلف كل المحتوى الخاص بنا). يمكنك تصميم المحتوى الخاص بك هنا ، تمامًا كما تفعل في أي مكان آخر بالصفحة. أود أن أوصي على الأقل بحشو صغير ، لأن القواعد المطبعية تفرض أن كل المحتوى يحتاج للتنفس.
بعد ذلك ، سنقوم بتصميم الأعمى. "قف ، استمر. ما هو أعمى؟ أسمعك تبكي الأمر بسيط للغاية: الأعمى هو عكس القناع ، سنستخدمه لإفراغ باقي صفحاتنا بينما النافذة مرئية. لا ، لم نخلقه في ترميزنا ، فإن jQuery سيفعل ذلك بالنسبة لنا. في الوقت الحالي ، نحتاج فقط إلى توفير نمط له بحيث يغطي كامل محتويات النافذة والأهم من ذلك ، يجلس فوق بقية المحتوى على المحور z.
#blind{/* position element so the z-index can be set */position:absolute;/* set z-index so the blind will cover all page content */z-index:9999;/* set the top, left, width and height so the blind covers the browser window */top:0;left:0;width:100%;height:100%;/* set the background to a suitably dark tone */background-color:#000000;}
وأخيرًا بالنسبة لـ CSS ، نحتاج إلى تصميم نافذتنا بنفسها. نحن بحاجة لوضع النافذة فوق المكفوفين. ثم نحن بحاجة إلى حجمه مع خصائص العرض والارتفاع.
بعد ذلك ، نحتاج إلى تعيين الهامش الأيسر إلى نصف العرض مضروبًا في -1 (400/2 * -1 = -200) وارتفاع الهامش بمقدار نصف الطول مضروبًا في -1 (248/2 * -1 = -124). في وقت لاحق ، سنستخدم jQuery لوضع العنصر في الأعلى: 50٪ واليسار: 50٪ ، نظرًا لهذه الهوامش السلبية ، ستظهر النافذة مركزًا لها بغض النظر عن أبعاد المتصفح ولن نضطر إلى محاولة ضعه على أساس حجم المتصفح.
بعد ذلك ، نحتاج إلى تعيين الخصائص على اليسار والأعلى إلى -1000 بكسل. لماذا نريد أن نفعل ذلك؟ حسنًا ، لا نريد أن تكون النافذة المشروطة مرئية حتى يتم النقر فوق الرابط. هناك أسلوب شائع آخر هو تعيين العرض: لا شيء في CSS ولكن في الآونة الأخيرة بدأ يساء استخدامه من قبل مرسلي الرسائل غير المرغوب فيها ، وقد يتم وضع علامة عليه الآن بواسطة محركات البحث كتقنية سوداء ، خاصة إذا كان لديك الكثير من الكلمات الرئيسية في الوسائط الخاصة بك. من خلال تعيينه إلى وضع جيد خارج الشاشة بدلاً من ذلك ، نحقق الشيء نفسه.
وأخيرًا ، نرغب في تلوين النافذة بلون صفحة مناسب ، أبيض في هذه الحالة.
وفقط لقياس جيد ، لماذا لا تراجع أيضا في CSS3 ورمي على ظل مربع فقط لإخراجها من الشاشة - إنها ليست مهمة حرجة وسيتم تجاهلها إذا لم تكن مدعومة.
#modal .window {/* position the element so that the z-index can be applied */position:absolute;/* Set the z-index to a number higher than the blind's z-index */z-index:10000;/* set the width and height of the window */width:400px;height:248px;/* give the window negative margins that match the width/2 and height/2 so it is centered */margin-left:-200px;margin-top:-124px;/* position the top left corner off stage so it can't be seen (instead of display:none;) */left:-1000px;top:-1000px;/* color the background so it shows up */background-color:#ffffff;/* throw on a CSS3 box shadow, because it's cool, and we can */box-shadow:4px 4px 80px #000;-webkit-box-shadow:4px 4px 80px #000;-moz-box-shadow:4px 4px 80px #000;}
jQuery
وأخيرًا ، سنضيف بعض jQuery لتشغيل الجهاز. ما نحتاجه للقيام به هو النقر على النقرات على الروابط ؛ حدد النافذة المناسبة ثم قم بتلاشيها ، مما يؤدي إلى إنشاء نافذة أعمى خلف النافذة تمنع النقرات على محتوى آخر ؛ وأخيرًا ، وظيفة لإغلاق المشروطة التي يمكن تشغيلها عن طريق زر الإغلاق أو النقر خارج النافذة.
نحتاج أولاً إلى تشغيل البرنامج النصي فقط عندما يكون المستند جاهزًا
$(document).ready(function(){
بعد ذلك ، حدد متغير ليحتوي على مرجع إلى النافذة
var activeWindow;
ثم إضافة معالج النقر إلى الارتباطات ، هذه الوظيفة سوف تمنع سلوك الارتباط الافتراضي. تحديد النافذة المقابلة من صفة href للرابط ؛ تعيينه لمتغير activeWindow ؛ قم بتحريك النافذة إلى مركز المتصفح (تذكر الهوامش السلبية في CSS؟ هذا هو المكان الذي تعمل فيه على سحرها لأن كل ما نحتاج إلى ضبطه هو 50٪ للحصول على المركز) وتختفي فيه. إنشاء div جديد مع معرف 'أعمى' ، تتلاشى في وإرفاق معالج النقر من تلقاء نفسها التي ستقوم باستدعاء الدالة closeModal ().
$('a.modalLink').click(function(e){e.preventDefault();var id = $(this).attr('href');activeWindow = $('.window#' + id).css('opacity', '0').css('top', '50%').css('left', '50%').fadeTo(500, 1);$('#modal').append('').find('#blind').css('opacity', '0').fadeTo(500, 0.8).click(function(e){closeModal();});});
بعد ذلك ، نحتاج إلى إضافة معالج النقر إلى أزرار الإغلاق للاتصال بنفس الوظيفة closeModal () كنقرة على المكفوفين.
$('a.close').click(function(e){e.preventDefault();closeModal();});
أخيرًا وليس آخرًا ، نحتاج إلى إنشاء وظيفة closeModal () التي ستعيدنا إلى حالتنا الأولية. يجب أن يتخلص من النافذة ويعيدها إلى وضع البداية عند اكتمال النقل ، وفي نفس الوقت ، يتلاشى من المكفوف ويزيله من DOM عند اكتمال انتقاله.
function closeModal() {activeWindow.fadeOut(250, function(){ $(this).css('top', '-1000px').css('left', '-1000px'); });$('#blind').fadeOut(250, function(){ $(this).remove(); });}
لا تنس أن تغلق $ (مستند). ready معالج!
});
لأولئك الذين يفضلون التعلم عن طريق النسخ واللصق ، إليك النص الكامل:
// run when page is ready$(document).ready(function(){// create variable to hold the current modal windowvar activeWindow;$('a.modalLink').click(function(e){// cancel the default link behavioure.preventDefault();// find the href of the link that was clicked to use as an idvar id = $(this).attr('href');// assign the window with matching id to the activeWindow variable, move it to the center of the screen and fade inactiveWindow = $('.window#' + id).css('opacity', '0') // set to an initial 0 opacity.css('top', '50%') // position vertically at 50%.css('left', '50%') // position horizontally at 50%.fadeTo(500, 1); // fade to an opacity of 1 (100%) over 500 milliseconds// create blind and fade in$('#modal').append('') // create a with an id of 'blind'.find('#blind') // select the div we've just created.css('opacity', '0') // set the initial opacity to 0.fadeTo(500, 0.8) // fade in to an opacity of 0.8 (80%) over 500 milliseconds.click(function(e){closeModal(); // close modal if someone clicks anywhere on the blind (outside of the window)});});$('a.close').click(function(e){// cancel default behavioure.preventDefault();// call the closeModal function passing this close button's windowcloseModal();});function closeModal(){// fade out window and then move back to off screen when fade completesactiveWindow.fadeOut(250, function(){ $(this).css('top', '-1000px').css('left', '-1000px'); });// fade out blind and then remove it$('#blind').fadeOut(250, function(){ $(this).remove(); });}}); المفتاح لهذه العملية هو فصل النافذة المشروطة إلى مكوناتها الثلاثة: البيانات (HTML) ، النمط (CSS) والوظائف (jQuery). هناك الآلاف من الاختلافات التي يمكنك استخدامها للبناء على هذه التقنية الأساسية ونود أن نقرأ بعض تجاربك في التعليقات أدناه.
ما هي أفضل الأمثلة على النوافذ المشروطة التي رأيتها؟ ما هي التقنية المفضلة لديك في إنشائها؟ اسمحوا لنا أن نعرف في التعليقات!