شرح كيفية برمجة نافذة منزلفه مكتوب عليها

سآقدم لكم درس برمجي جديد

عن كيفية آنشآء نآفدة منزلقة من الآعلى بآستخدآم مكتبة الجيكويري

فمن المفيد آن آشرح لكم هده التقنية في الدرس

قررت بآدن الله في هدآ الموضوع آن آشرح الآسآسيآت القآئمة على هدآ التآتير

آنشآء الخلفية الشبه الشفآف و الدي يغطي الصفحة بآكملهآ

آنشاء النآفدة آو الصندوق الدي سيحتوي على الرسآلة و التي يمكنك تغيرهآ

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

و التي ستجعل الخلفية الشبه شفافة و نآفدة الرسآلة تنزلق من آعلى الصفحة

حسنآ بعد آن عرفتكم عن النتيجة و مرآحل آنجآزهآ ننتقل للعمل

1. الـHTML

كل مآ سنحتآجه في هده المرحلة همآ عنصرين آو على الآرجح ديفين :

الديف الآول للخلفية آو الغطآء الشبه شفاف الدي سيغطي الصفحة بآكملهآ عند ضهور النآفدة

الديف التآني سنجعله لنآفدة الرسآلة المنزلقة

رمز Code:
<div class="overlay" id="overlay" style="display:none;"></div> <div class="box" id="box"> <a class="boxclose" id="boxclose"></a> <h1>رسالة هامة</h1> <p> هنا ضع الرسالة المهمة التي تود ايصآلها للمستخدم.</br> ادا اردت اغلاق النافدة قم بالضغط على علامة اكس.</br> كان معكم ياسين أبوزية من منتديات ستارتايمز.</br> بآنتظار آرائكم و تعليقاتك و انتقاداتكم طبعا </p> </div>
بمآ آننآ سنقوم بتعريف هدين العنصرين في الجآفآسكريبت

يجب آن نعطيهمآ id مسبقآ

بآمكآنك آن تضع الديفين في آي مكآن في الصفحة دآخل البودي

و سيتم التعآمل معهمآ في الـCss

لدالك دعنآ ننتقل للتنسيق

2.الـCSS

لآنشآء الغطآء سنستعمل صورة شفآفة التي سوف نكررهآ لكي تغطي لنآ الصفحة بآكملهآ

كمآ يمكننآ آيضآ آن نستخدم لون دآكن و نجعله شفآف عن طريق الـCss

لديكم كآمل الحرية في الآختيآر ,لكن حاليا سنستخدم صورة

رمز Code:
.overlay{ background:transparent url(images/overlay.png) repeat top left; fixed; top:0px; bottom:0px; left:0px; right:0px; 100; }
مآقمنآ به الآ هو عبآرة عن توسيع الديف من جميع الآطرآف آنطلاقآ من المركز الدي قيمته 0

بهدآ نضمن تغطية الصفحة مهمآ كانت نآفدة المتصفح كبيرة

دعونآ الآن من الخلفية و لننتقل آلى الديف التاني آلا و هو صندوق الرسالة

رمز Code:
.box{ fixed; top:-200px; left:30%; right:30%; background-color:#fff; color:#7F7F7F; padding:20px; border:2px solid #ccc; -moz-border-radius: 20px; -webkit-border-radius:20px; -khtml-border-radius:20px; -moz-box-shadow: 0 1px 5px #333; -webkit-box-shadow: 0 1px 5px #333; 101; }

بعد آن قمنآ بتنسيق الصندوق بتحديد مآنه في الصفحة و كدآ لون خلفيته

و عملنآ آيضآ بعض خصآئص Css3 آلا وهي الحوآف الدآئرية و الظل للصندوق

سننتقل بآدن الله آلى آيقونة آغلاق الصندوق

رمز Code:
a.boxclose{ float:left; width:26px; height:26px; background:transparent url(images/cancel.png) repeat top left; margin-top:-30px; margin-left:-30px; cursorointer; }
كمآ تعلمون على آن آيقونة الآغلاق آن تكون آعلى و آقصى يسار الصندوق

لدالك عملنآ في التبآعد الخآرجي -30 بيكسل

سننتقل الآن لتعريف الوسم H1 الخآص بعنوان الرسالة

لكي نضفيف له بعض الخوآص التي تضفي على الرسآلة جمآلية

رمز Code:
.box h1{ border-bottom: 1px dashed #7F7F7F; margin:-20px -20px 0px -20px; padding:10px; background-color:#FFEFEF; color:#EF7777; -moz-border-radius:20px 20px 0px 0px; -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; -khtml-border-top-left-radius: 20px; -khtml-border-top-right-radius: 20px; }
مرة آخرى عملنآ التبآعد الخآرجي حيت عملنآ -20 بيكسل من الأعلى

و -20 بيكسل من اليمين و 0 من الآسفل و -20 بيكسل من اليسار

لكي نسحب العنصر من مكانه و بالتالي نحصل على آتقآن في التنسيق

و هدآ كل شيء في الـCss

آمآ الآن دعونآ ننتقل آلى الجآفآسكريبت

3.الجآفآسكريبت

سنضيف هدآ الكود في آخر صفحة الـHTML قبل آغلاق وسم البودي

و لا تنسوآ وضعه بين وسمي السكريبت

لا تقلقو سآشرح الكود بعد طرحه

رمز Code:
$(func tion() { $('#activator').click(func tion(){ $('#overlay').fadeIn('slow',func tion(){ $('#box').animate({'top':'160px'},500); }); }); $('#boxclose').click(func tion(){ $('#box').animate({'top':'-200px'},500,func tion(){ $('#overlay').fadeOut('slow'); }); }); });
مهمة العنصر #activator هي آنك آد قمت بالوقوف على العنصر الدي يظهر الرسآلة

يجب آن تتلاشى الخلفية بشكل بطيئ لآني عملت Slow كمآ لاحظتم لتغطي الصفحة

و بعد آن يتم دالك يجب آن ينزلق الصندوق من الآعلى لآني عآمل top

بشرط آن يتوقف عند بلوغ 160 بيكسل من الصفحة

و في نفس الوقت يجب آن يآخد 500 ميلي تآنية لكي يظهر كمآ لا حظتم في الكود آعلاه

بعد دالك سنآتي كود آغلاق الصندوق عن طريق الضغط على آيقونة الآكس

عند الضغط على آيقونة الآغلاق سيحدت نفس الشيء آعلاه لكن بطريقة عكسية

يعني بدل الظهور ستختفي كمآ لا حظتم آستعملت fadeOut بدل fadeIn آعلاه

4.ملاحظة

التآتير يتمآشى مع جميع المتصفحآت لكن يستحسن آستعمآل جوجل كروم

آو آي متصفح غير الآكسبلوري لآني آستخدمت الـCss3

5.النتيجة

للآسف لم أضع النتيجة

6.التحميل

غطـاء متـلاشـي و نــآفــدة منـزلقة من الأعلـى.zip - 53 KB

آلى هنآ ينتهي درسي المتوآضع

سلمت اناملك الراقيه على هذا النثر الاكثر من رائع

موضوع رااااااااااائع كروووعه حضورك
يعطيك العااافيه عالطرح الرااقي

تسلم الايادي على ااالطرح
يعطيك الف عافيه يااالغلا
لاعدمنا تميزك
لآحرمنا الله من جديدك

أإسـ عٍ ـد الله أإأوٍقـآتَكُـم بكُـل خَ ـيرٍ

دآإئمـاَ تَـبهَـرٍوٍنآآ بَمَ ـوٍآضيعكـ

أإلتي تَفُـوٍح مِنهآ عَ ـطرٍ أإلآبدآع وٍأإلـتَمـيُزٍ

لك الشكر من كل قلبى

دمت بهذا التميز بطرحك لمواضيعك
ودمت بحفظ الرحمن ورعايته
تقبل مروري
مع خالص
تقديري

سعدتُ بتوآجدي هُنا
زخم من الابداع والجمال
فسلمت ايادي جلبت لنا كل جميل
ولآحرمنا الله جديدك الرآئع..
تحيه معطره برياحين الياسمين

رااااااااااااائع
تسلم اديك

يعطيك العافيه علي الطرح ) ...
ب إنتظآر جديدك وعذب أطروحآتك...)
إحترآمي وتقديري...)