عبارة عن حزمة من الجافا
سكريبت مجمعه فى عدة ملفات يمكنك تحميلها ورفعها على اى سيرفر , ومن ثم
الاستعانه بها وضمها للمدونة داخل بلوجر ( او اى موقع اخر ) والتمتع بقمة
من الاداء والحكم فى المدونة وانشاء عدد غير حصرى من الـ effcets كل هذا
باقل كمية , فى الحقيقة بكمية صغيرة جدا جدا من الاكواد بالمقارنة بالجافا
سكريبت . انت ستندهش صدقنى
لحسن الحظ ان البلوجر
تدعم هذا النوع من السكريبتات , لذلك بعد البحث الكثير طوال الفترة الماضية
, قررت ان اطرح سلسلة تعليمية من الصفر حول استخدام الجى كويرى فى عالم
البلوجر , لا يمنع هذا ان الشرح سارى لاى صاحب موقع او مدونة اخرى تدعم
الجى كويرى , لكن التركيز سينصب حول استخدامات الجى كويرى لمشتركى البلوجر .
ا ولا : ماهى الجى كويرى :
كما سبق هى عبارة عن حزمة من الجافا سكريبت فى عدة ملفات (
بعضها رئيسية لابد منها وبعضها الاخر فرعيه تخص كل تاثير على حدة ) تلك
الملفات تستطيع ضمها للمدونة او الموقع , بعد اضافة تلك الملفات الرئيسية
الى مدونتك ( ستعرف الطريقة لاحقا ) ستمنحك تلك الملفات القدرة على اختيار
select اى شئ فى المدونة ( لينك , قطعة , صورة , اى شئ ) ومن ثم التحكم فيه
بشكل كامل ( اخفاء , تحريك , زووم ان / اوت , الخ الخ ) بالاضافة الى
اضافة المزيد من الاحداث , مثلا : هل لاحظت اقتراحات جووجل اثناء البحث ؟
هذا مثال منهم .
كل هذا يمكنك عمله من خلال ابسط كمية من الاكواد وبطريقة سهلة جدا ساحاول ان اشرحها هنا ان شاء الله تباعا عن طريق الامثلة .
_______________________
ثانيا : موقع الجى كويرى jquery لم يريد التعلم من خلال ملفات المساعدة هناك باللغة الانجليزية .
_______________________
ثالثا : كيف تستطيع ضم ملفات الجى كويرى للمدونة :
من خلال تحميل اخر نسخة من هنا , لو كنت تملك مساحة خاصة يمكنك رفع الملفات عليها ثم ضمها بالمدونة
او الطريقة الافضل : الا وهى : اجعل جووجل يستضيف تلك الملفات من
اجلك ! وهى الطريقة الامثل ليس فقط لانها الاسهل لكن كى تستفيد ايضا من
سرعة نقل الملفات من سيرفر جووجل مباشرة .
الطريقة :
ابحث فى صندوق الاكواد عن

اضف الكود التالى بعدها مباشرة




ثم احفظ
الان انت اضفت الجزء الرئيسى من ملفات الجى كويرى الى مدونتك ,
الجزء الباقى هو ان تتعلم كيف تختار select الجزء الذى تريد اضافة التأثير
عليه , ثم ايضا تتعلم كيفية كتابة الكود الخاص بهذا التاثير .
رابعا : نظرة عامة على تركيب الجى كويرى




هنا يوجد اكواد الاستايل


هنا كود سكريبت الوظيفة المعينة



اللينك التالى هو الذى سنطبق عليه الوظيفة


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]




الهيكل الرئيسى للسكريبت الذى يحتوى على الكود الوظيفى هو شكل كلاسيكى جدا وسهل جدا , ويتميز بعلامة الدولار الامريكى $ .




$(document).ready(function(){

SOME CODES HERE

});




علامة الدولار باللون الاحمر هى التى تميز لغة الجى كويرى , ستجدها دائما فى اول السكريبت لتعبر عن بداية وظيفة جديدة
الكلام باللون الازرق : معناه ان الوظيفة سيبدأ تنفيذها مباشرة عندما يكون المستند ( المدونة ) جاهزة للعرض ready .
الكلام باللون الاخضر : معناه : نفذ الوظيفة function او التاثيرات
التالية عندما تنتهى من تحميل عناصر المدونة وتصبح جاهز للعرض , لاحظ ان
القوس الاخضر لم ينتهى مباشرة بعد كلمة function بل انتهى بالاسفل بعد
اكواد الوظيفة لكى يفهم المتصفح اين بداية ونهاية تلك الوظيفة .
لاحظ ايضا وجود قوسين باللون البنفسجى مغلقين , لاحقا ستعرف انه يمكن اضافة اكواد داخل هذين القوسين فى بعض الاحوال .
لاحظ ايضا وجود قوسين باللون البرتقالى وهما الذين يحتويان على كود الوظيفة بداخلهما .











هو اول كود فى صندوق الاكواد وينتهى فى آآآخر الصفحة بنفس الكود قبله سلاش /


هى بداية الراس head وتحتوى على اكواد الـ style وهى عبارة عن
الاكواد التى تحدد مظهر كل قطعة فى المدونة ( طول وعرض وخلفية وبوردر الخ
الخ الخ ) وتحتوى ايضا على سكريبتات الجى كويرى ( الرئيسية والفرعية
وسكريبت الوظيفة ) وتنتهى بنفس العبارة ايضا قبلها سلاش /

السكريبت
المكتوب باللون الازرق هو السكريبت الرئيسى للجى كويرى , لابد من وجوده فى
الصندوق الاكواد ( يمكن وضعه فى جزء الراس head او جزء الجسم (body )
ويوجد ايضا ملفات جى كويرى فرعية ( سنتحدث عنها لاحقا ) تؤدى تلك الملفات
وظائف معينة تختص بتاثيرا تمعينة .

السكريبت
المكتوب باللون البنفسجى : هو سكريبت الوظيفة المعينة التى تريد اداءها
على قطعة معينة , يمكن ان يوجد اكثر من سكريبت وظيفى فى نفس المدونة حسب
اختيارك , ويمكن ضم كل الوظائف فى سكريبت واحد , لا يوجد اى مشكلة .


هى بداية جزء الجسم body ويتواجد به الاكواد التى ستحدد محتوى المدونة , وينتهى بنفس العبارة قبلها سلاش /

الجزء المكتوب باللون البرتقالى هو مثال لمحتوى المدونة الذى سيطبق عليه التاثير , وهو هنا عبارة عن لينك بسيط جدا .
انظر ايضا هذا الموضوع
_______________________

خامسا : نظرة عامة على تراكيب الـ css



اختصار division = قسم , مثلا جزء الهيدر , الاطار الجانبى

(سايدبار) , ذيل المدونة (فووتر ) الجزء الرئيسى الذى يوجد به التدوينات ,

كل تلك الاجزاء ماهى الا اقسام توجد فى جزء جسم المدونة body .




اختصار paragraph وهو قطعة كتابية .




الكود المعبر عن ( الرابط ) او اللينك





الكود المعبر عن الصورة image




هذا الكود والذى يليه يستخدمان فى عمل الجداول ul = unorderd list







li = list item





< id=" sidebar '">



بعض العناصر "القطع " تحتوى على اى دى معين (side bar مثلا )



يميزها عن بعض القطع الاخرى , عادة ما يستخدم هذا الاى دى لتحديد تلك



القطعة دون سواها , لتحديد الاى دى نستعمل العلامة شباك





< class=" main ">



بعض العناصر الاخرى لها كلاس class او فئة معينة ( main مثلا ) ,



نستخدمها ايضا لتحديد تلك القطعة دون سواها , ولتحديد الكلاس نستخدم ( دوت )



= ( . )



لاحظ : بعض العناصر او القطع لها اى دى وكلاس معا



مثال :





< id="'sidebar'" class="'sidebar-wrapper'">