Chakira
11-01-2013, بتوقيت غرينيتش 04:23 PM
http://www.dzbatna.com/images/icons/iconrote.gif ط¨ط±ظ…ط¬ظ€ظ€ط© ط؛ط·ظ€ط§ط، ظ…طھظ€ظ„ط§ط´ظ€ظٹ ظˆ ظ†ظ€ظ€ط¢ظپظ€ظ€ط¯ط© ظ…ظ†ظ€ط²ظ„ظ‚ط© ظ…ظ† ط§ظ„ط£ط¹ظ„ظ€ظ‰ ط¨ط§ظ„طھظپطµظٹظ€ظ„╝◄JQuErY & CsS► (http://www.dzbatna.com/t2105760/)
السلام عليكم و رحمة الله و بركآته
اليوم يوم سعدكم لاني في أفضل حآلاتي
لدالك سآقدم لكم درس مفصل برمجي جديد
عن كيفية آنشآء نآفدة منزلقة من الآعلى بآستخدآم مكتبة الجيكويري
فمن المفيد آن آشرح طريقة لكم هده التقنية في الدرس مفصل
قررت بآدن الله في هدآ الموضوع آن آشرح طريقة الآسآسيآت القآئمة على هدآ التآتير
آنشآء الخلفية الشبه الشفآف و الدي يغطي الصفحة بآكملهآ
آنشاء النآفدة آو الصندوق الدي سيحتوي على الرسآلة و التي يمكنك تغيرهآ
و التي ستضهر في البداية على الصفحة قبل آن نقوم بآدخآل بعض اللمسآت بالجيكويري
و التي ستجعل الخلفية الشبه شفافة و نآفدة الرسآلة تنزلق من آعلى الصفحة
حسنآ بعد آن عرفتكم عن النتيجة و مرآحل آنجآزهآ ننتقل للعمل
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>
بمآ آننآ سنقوم بتعريف هدين العنصرين في الجآفآسكريبت script
يجب آن نعطيهمآ 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; cursor:pointer; }
كمآ تعلمون على آن آيقونة الآغلاق آن تكون آعلى و آقصى يسار الصندوق
لدالك عملنآ في التبآعد الخآرجي -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
آمآ الآن دعونآ ننتقل آلى الجآفآسكريبت script
3.الجآفآسكريبت script
سنضيف هدآ الكود code في آخر صفحة الـHTML قبل آغلاق وسم البودي
و لا تنسوآ وضعه بين وسمي السكريبت script
لا تقلقو سآشرح طريقة الكود code بعد طرحه
رمز 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 ميلي تآنية لكي يظهر كمآ لا حظتم في الكود code آعلاه
بعد دالك سنآتي كود code آغلاق الصندوق عن طريق الضغط على آيقونة الآكس
عند الضغط على آيقونة الآغلاق سيحدت نفس الشيء آعلاه لكن بطريقة عكسية
يعني بدل الظهور ستختفي كمآ لا حظتم آستعملت fadeOut بدل fadeIn آعلاه
4.ملاحظة
التآتير يتمآشى مع جميع المتصفحآت لكن يستحسن آستعمآل جوجل GOOGLE كروم
آو آي متصفح غير الآكسبلوري لآني آستخدمت الـCss3
5.النتيجة
للآسف لم أضع النتيجة
6.التحميل
ط؛ط·ظ€ط§ط، ظ…طھظ€ظ„ط§ط´ظ€ظٹ ظˆ ظ†ظ€ظ€ط¢ظپظ€ظ€ط¯ط© ظ…ظ†ظ€ط²ظ„ظ‚ط© ظ…ظ† ط§ظ„ط£ط¹ظ„ظ€ظ‰.zip - 53 KB (http://www.eyesfile.com/jx9ro3y3rd7e/غطـاء_متـلاشـي_و_نــآفــدة_منـزلقة_من_الأعلـى.zip. html)
آلى هنآ ينتهي درس مفصلي المتوآضع
آلى درس مفصل آخر بآدن الله
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif غطـاء متـلاشـي و نــآفــدة منـزلقة من الأعلـى.zip (http://www.traidnt.net/vb/attachments/647656d1339627408-غطـاء-متـلاشـي-و-نــآفــدة-منـزلقة-من-الأعلـى.zip) (53.3 كيلوبايت, عدد مرات المشاهدة 110 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
السلام عليكم و رحمة الله و بركآته
اليوم يوم سعدكم لاني في أفضل حآلاتي
لدالك سآقدم لكم درس مفصل برمجي جديد
عن كيفية آنشآء نآفدة منزلقة من الآعلى بآستخدآم مكتبة الجيكويري
فمن المفيد آن آشرح طريقة لكم هده التقنية في الدرس مفصل
قررت بآدن الله في هدآ الموضوع آن آشرح طريقة الآسآسيآت القآئمة على هدآ التآتير
آنشآء الخلفية الشبه الشفآف و الدي يغطي الصفحة بآكملهآ
آنشاء النآفدة آو الصندوق الدي سيحتوي على الرسآلة و التي يمكنك تغيرهآ
و التي ستضهر في البداية على الصفحة قبل آن نقوم بآدخآل بعض اللمسآت بالجيكويري
و التي ستجعل الخلفية الشبه شفافة و نآفدة الرسآلة تنزلق من آعلى الصفحة
حسنآ بعد آن عرفتكم عن النتيجة و مرآحل آنجآزهآ ننتقل للعمل
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>
بمآ آننآ سنقوم بتعريف هدين العنصرين في الجآفآسكريبت script
يجب آن نعطيهمآ 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; cursor:pointer; }
كمآ تعلمون على آن آيقونة الآغلاق آن تكون آعلى و آقصى يسار الصندوق
لدالك عملنآ في التبآعد الخآرجي -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
آمآ الآن دعونآ ننتقل آلى الجآفآسكريبت script
3.الجآفآسكريبت script
سنضيف هدآ الكود code في آخر صفحة الـHTML قبل آغلاق وسم البودي
و لا تنسوآ وضعه بين وسمي السكريبت script
لا تقلقو سآشرح طريقة الكود code بعد طرحه
رمز 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 ميلي تآنية لكي يظهر كمآ لا حظتم في الكود code آعلاه
بعد دالك سنآتي كود code آغلاق الصندوق عن طريق الضغط على آيقونة الآكس
عند الضغط على آيقونة الآغلاق سيحدت نفس الشيء آعلاه لكن بطريقة عكسية
يعني بدل الظهور ستختفي كمآ لا حظتم آستعملت fadeOut بدل fadeIn آعلاه
4.ملاحظة
التآتير يتمآشى مع جميع المتصفحآت لكن يستحسن آستعمآل جوجل GOOGLE كروم
آو آي متصفح غير الآكسبلوري لآني آستخدمت الـCss3
5.النتيجة
للآسف لم أضع النتيجة
6.التحميل
ط؛ط·ظ€ط§ط، ظ…طھظ€ظ„ط§ط´ظ€ظٹ ظˆ ظ†ظ€ظ€ط¢ظپظ€ظ€ط¯ط© ظ…ظ†ظ€ط²ظ„ظ‚ط© ظ…ظ† ط§ظ„ط£ط¹ظ„ظ€ظ‰.zip - 53 KB (http://www.eyesfile.com/jx9ro3y3rd7e/غطـاء_متـلاشـي_و_نــآفــدة_منـزلقة_من_الأعلـى.zip. html)
آلى هنآ ينتهي درس مفصلي المتوآضع
آلى درس مفصل آخر بآدن الله
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif غطـاء متـلاشـي و نــآفــدة منـزلقة من الأعلـى.zip (http://www.traidnt.net/vb/attachments/647656d1339627408-غطـاء-متـلاشـي-و-نــآفــدة-منـزلقة-من-الأعلـى.zip) (53.3 كيلوبايت, عدد مرات المشاهدة 110 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
