|
بقعة لغات البرمجة يناقش هاذا المنتدى لغات البرمجة فيجوال بيسيك , فيجوال سي ++ , دلفي , أكسيس , أوراكل , جافا , الاسمبلي, بي اتش بي, HTML , .. |
انشر الموضوع |
|
أدوات الموضوع | انواع عرض الموضوع |
28.06.2012, 05:36 | المشاركة رقم: 1 | ||||||||||||||||||||||||||||||||||
|
المنتدى :
بقعة لغات البرمجة
سآقدم لكم درس برمجي جديد عن كيفية آنشآء نآفدة منزلقة من الآعلى بآستخدآم مكتبة الجيكويري فمن المفيد آن آشرح لكم هده التقنية في الدرس قررت بآدن الله في هدآ الموضوع آن آشرح الآسآسيآت القآئمة على هدآ التآتير آنشآء الخلفية الشبه الشفآف و الدي يغطي الصفحة بآكملهآ آنشاء النآفدة آو الصندوق الدي سيحتوي على الرسآلة و التي يمكنك تغيرهآ و التي ستضهر في البداية على الصفحة قبل آن نقوم بآدخآل بعض اللمسآت بالجيكويري و التي ستجعل الخلفية الشبه شفافة و نآفدة الرسآلة تنزلق من آعلى الصفحة حسنآ بعد آن عرفتكم عن النتيجة و مرآحل آنجآزهآ ننتقل للعمل 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 آلى هنآ ينتهي درسي المتوآضع |
||||||||||||||||||||||||||||||||||
04.12.2012, 04:42 | المشاركة رقم: 2 | ||||||||||||||||||||||||||||||||||
|
كاتب الموضوع :
لوجين
المنتدى :
بقعة لغات البرمجة
سلمت اناملك الراقيه على هذا النثر الاكثر من رائع |
||||||||||||||||||||||||||||||||||
15.12.2012, 12:18 | المشاركة رقم: 3 | ||||||||||||||||||||||||||||||||
|
كاتب الموضوع :
لوجين
المنتدى :
بقعة لغات البرمجة
موضوع رااااااااااائع كروووعه حضورك يعطيك العااافيه عالطرح الرااقي |
||||||||||||||||||||||||||||||||
24.03.2013, 01:28 | المشاركة رقم: 4 | ||||||||||||||||||||||||||||||||||||
|
كاتب الموضوع :
لوجين
المنتدى :
بقعة لغات البرمجة
|
||||||||||||||||||||||||||||||||||||
19.08.2013, 06:58 | المشاركة رقم: 5 | ||||||||||||||||||||||||||||||
|
كاتب الموضوع :
لوجين
المنتدى :
بقعة لغات البرمجة
يعطيك الف عافيه يااالغلا لاعدمنا تميزك لآحرمنا الله من جديدك |
||||||||||||||||||||||||||||||
20.08.2013, 10:05 | المشاركة رقم: 6 | ||||||||||||||||||||||||||||||||||||
|
كاتب الموضوع :
لوجين
المنتدى :
بقعة لغات البرمجة
دآإئمـاَ تَـبهَـرٍوٍنآآ بَمَ ـوٍآضيعكـ أإلتي تَفُـوٍح مِنهآ عَ ـطرٍ أإلآبدآع وٍأإلـتَمـيُزٍ لك الشكر من كل قلبى |
||||||||||||||||||||||||||||||||||||
21.08.2013, 09:49 | المشاركة رقم: 7 | ||||||||||||||||||||||||||||||||||||
|
كاتب الموضوع :
لوجين
المنتدى :
بقعة لغات البرمجة
ودمت بحفظ الرحمن ورعايته تقبل مروري مع خالص تقديري |
||||||||||||||||||||||||||||||||||||
22.08.2013, 11:44 | المشاركة رقم: 8 | ||||||||||||||||||||||||||||||||||||
|
كاتب الموضوع :
لوجين
المنتدى :
بقعة لغات البرمجة
زخم من الابداع والجمال فسلمت ايادي جلبت لنا كل جميل ولآحرمنا الله جديدك الرآئع.. تحيه معطره برياحين الياسمين |
||||||||||||||||||||||||||||||||||||
23.08.2013, 02:58 | المشاركة رقم: 9 | ||||||||||||||||||||||||||||||||||
|
كاتب الموضوع :
لوجين
المنتدى :
بقعة لغات البرمجة
رااااااااااااائع تسلم اديك |
||||||||||||||||||||||||||||||||||
24.08.2013, 11:01 | المشاركة رقم: 10 | ||||||||||||||||||||||||||||||||
|
كاتب الموضوع :
لوجين
المنتدى :
بقعة لغات البرمجة
ب إنتظآر جديدك وعذب أطروحآتك...) إحترآمي وتقديري...) |
||||||||||||||||||||||||||||||||
مواقع النشر (المفضلة) |
الكلمات الدلالية (Tags) |
منزلفه, مكتوب, برمجة, شرح, عليها, نافذة, كيفية |
أدوات الموضوع | |
انواع عرض الموضوع | |
|
|
المواضيع المتشابهه | ||||
الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
برنامج لمعرفة من اقفل نافذة المحادثة | adam | ~ ..آڸڪمـْبيۉٺژ ۉآڸبژآمـْج .. ~ ღ | 0 | 27.03.2010 01:13 |
اسطوانات تعليم فيجوال سي+ برمجة الالعاب+برمجة انظمة التشغيل + دلفي+PHP2008+asp | نور الحق | بقعة لغات البرمجة | 0 | 02.03.2010 02:35 |
كيفية برمجة برنامج دليل الهاتف | ابتسم للحياة | بقعة لغات البرمجة | 1 | 16.12.2009 01:24 |
كل من عليها فان | ابتسم للحياة | الفلاشات الوعظية والمحاضرات والقرآن والادعية | 3 | 24.10.2009 11:15 |
مكتوب ومقدر ....<<<<<<تفضلوا بالدخول>>>>>>> | w m v | بقعة الاناشيد | 0 | 01.07.2009 03:38 |