العودة مطور Mtwer > دورات و دروس مطور المتخصصة > دورة تصميم المواقع بإسلوب المحترفين web2.0
تحديث الصفحة
[الدرس الحادى عشر] شرح التعامل بمكتبة jquery وعمل التاثيرات الرائعة لمـــوقعــــك

دورة تصميم المواقع بإسلوب المحترفين web2.0 دورة تصميم المواقع بإسلوب المحترفين web2.0
ملقي الدورة: [vista-design]

موضوع مغلق
اسحب وشارك
 
LinkBack أدوات الموضوع انواع عرض الموضوع
  #1  
قديم 17-01-2010, 02:53 AM

0

الصورة الرمزية vista-design
مسؤول قسم الدورات

 
تاريخ التسجيل: 04-05-2008
المشاركات: 1,612
vista-design is on a distinguished road
Arrow [الدرس الحادى عشر] شرح التعامل بمكتبة jquery وعمل التاثيرات الرائعة لمـــوقعــــك


([الدرس الحادى عشر] شرح التعامل بمكتبة jquery وعمل التاثيرات الرائعة لمـــوقعــــك)
[الدرس الحادى عشر] شرح التعامل بمكتبة jquery وعمل التاثيرات الرائعة لمـــوقعــــك


نبدأ الان نعرف كيف راح نستخدم ونستغل التأثيرات المخلتفة للمكتبة

دون الخوض فى طلاسم أكوادها البرمجية, رغم انى حزين من ذلك , فكنت أود
ان اشرحلكم الjquery وكيفية التعامل معها برمجيا, وهذه كانت
تحتاج لسلسة دروس فيديو ,

لذلك نكتفى بمعرفتك بتأثيراتها المختلفة وكيف يمكنك ادراجها فى اى موقع

تريد اضافة لمسات الjquery له :


انظر للصورة لنأخذ أهم التأثيرات المختلفة للمكتبة وكيف راح نستخدمها:





نبدأ على بركة الله :

1-كيفية عمل عرض مكبر للصورة ب jquery:



شاهد مثال عملى :







كيفية الاستخدام والتعديل:



افتح ملف الindex.htm : وراح تجد هالكود:

كود:
<a href="one.jpg"><img src="oneTN.jpg" alt="image" /></a>
<a href="two.jpg"><img src="twoTN.jpg" alt="image" /></a>
<a href="three.jpg"><img src="threeTN.jpg" alt="image" /></a>
كل ما عليك هو تسوى صورة بمقاسين :1-صورة مصغرة 2-صورة مكبرة

الصورة المصغرة :



الصورة المكبرة لها:




الصورة المصغرة هى الطبيعية اللى راح تظهر بدون مرور الماوس
وراح يكون مسارها فى هذا الكود بفرض اخذنا الصورة الاولى من الكود :

كود:
<img src="oneTN.jpg" alt="image" />
وراح تكون الصورة المكبرة هى التى راح تظهر بمجرد مرور الماوس :
وكودها راح يكون:

كود:
<a href="one.jpg"></a>

طبعا الطريقة سهله ...........


2- اظهار مربع متطلبات بمجرد مرور الماوس:



من الطرق الرائعة فى jquery, فتخيل انك بهذه الطريقة يمكنك
بمرور الماوس على كلمة واحدة , ان تقوم بإظهار مقال كامل
بدون تحميل الصفحة .

شاهد مثال عملى :






كيفية الاستخدام والتعديل:

راح تجد فى كود الajax: هالجملة :

كود:
html +=    '<h4>مقال عن كيفية الكتابة التلقائية </h4>';
		html +=	   '<img src="image.jpg" alt="image" />';
		html +=	   '<p>هذا المقال يتحدث عن كيفية عمل عرض لمقال بمجرد مرور الماوس على زر</p>';

لاحظ كل جزء من الكود وشوف الصورة الاتية حتى تعرف التعديل الخاص بها:





اعتقد سهلة كتير, ايش هالسهولة



3- اضافة عنصر وازالته من الصفحة دون تحميلها:

مثال عملى لا يحتاج لشرح :








4-اضافة اى بيانات لقاعدة البيانات :

هذه الطريقة تحتاج لتعاملك الجيد مع php&mysql

لذلك راح أشرحها فى درس لاحق بأذن الله خارج الدورة
لان فيها كلام كثير لازم اتكلم عنه



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


ملحوظه: ملفات الدرس مرفقة

المطلوب من الاعضاء:

طلب واحد مجمع من الدروس السابقة:
المطلوب: عمل عرض مكبر للصور (لاربع صور) +مع توسيطها
فى نفس الصفحة ووضعها فى مربع حدوده 1px

وارفاق الملفات


أخوكم vista-design


الملفات المرفقة
نوع الملف: zip hover.zip‏ (178.2 كيلوبايت, المشاهدات 445)
نوع الملف: zip tooltips.zip‏ (72.3 كيلوبايت, المشاهدات 334)
نوع الملف: zip create.zip‏ (16.2 كيلوبايت, المشاهدات 210)

توقيعي


عالم مطورى الويب لتعليم برمجة وتصميم المواقع
www.advphp.com

آخر تعديل بواسطة vista-design ، 09-02-2010 الساعة 01:48 AM
  #2  
قديم 09-02-2010, 01:48 AM

0

الصورة الرمزية vista-design
مسؤول قسم الدورات

 
تاريخ التسجيل: 04-05-2008
المشاركات: 1,612
vista-design is on a distinguished road

upppppppppppp


توقيعي


عالم مطورى الويب لتعليم برمجة وتصميم المواقع
www.advphp.com
موضوع مغلق

العلامات المرجعية

مواضيع جديدة في قسم دورة تصميم المواقع بإسلوب المحترفين web2.0

أدوات الموضوع
انواع عرض الموضوع

ضوابط المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا يمكنك اضافة مرفقات
لا يمكنك تعديل مشاركاتك

BB code متاحة
كود [IMG] متاحة
كود HTML معطلة
Trackbacks are متاحة
Pingbacks are متاحة
Refbacks are متاحة

الانتقال السريع

المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
[مناقشة ] الدرس الثانى أساسيات التعامل مع jquery vista-design تصميم المواقع بتقنية الـ جي كويري jQuery 36 12-05-2011 07:56 PM
(دورة php بالفيديو) .. شرح التعامل مع الثوابت define [الدرس 11 الحادي عشر] عبدالله عيد دورة PHP بالفيديو .. الجزء الأول 5 25-12-2010 03:46 AM
درس jquery ، أساسيات التعامل مع الjquery لغير المبرمجين، [الدرس الثانى] vista-design تصميم المواقع بتقنية الـ جي كويري jQuery 0 13-08-2010 02:50 PM
مناقشة الدرس الحادى عشر شرح التعامل مع مكتبة الjquery vista-design دورة تصميم المواقع بإسلوب المحترفين web2.0 9 16-02-2010 04:17 PM
[الدرس العاشر]تعريف بمكتبة jquery قبل البدء فى التعامل معهــــا vista-design دورة تصميم المواقع بإسلوب المحترفين web2.0 1 09-02-2010 01:52 AM



جميع الأوقات بتوقيت GMT +3. الساعة الآن 01:45 AM.
Search Engine Friendly URLs by vBSEO 3.5.2

الحقوق محفوظة لكل المطورين والمواقع العربية

Security team