عبارة عن حزمة من الجافا
سكريبت مجمعه فى عدة ملفات يمكنك تحميلها ورفعها على اى سيرفر , ومن ثم
الاستعانه بها وضمها للمدونة داخل بلوجر ( او اى موقع اخر ) والتمتع بقمة
من الاداء والحكم فى المدونة وانشاء عدد غير حصرى من الـ 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'">
سكريبت مجمعه فى عدة ملفات يمكنك تحميلها ورفعها على اى سيرفر , ومن ثم
الاستعانه بها وضمها للمدونة داخل بلوجر ( او اى موقع اخر ) والتمتع بقمة
من الاداء والحكم فى المدونة وانشاء عدد غير حصرى من الـ 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'">
