2009-09-17
تعلم jquery اليوم الأول
لان الـ css بطئ التطور نسبيا بالنسبة للغات الاخرى , ولان الجافا سكريبت يحتاج الى وقت كبير جدا لاتعلمها واحترافها انا شخصيا مللت اثناء رحلتى لتعلم الجافا سكريبت وكدت ان اتراجع لولا ان عثرت على تلك الحزمة السحرية المسماه JQuery
تJQuery عبارة عن حزمة من الجافا سكريبت مجمعه فى عدة ملفات يمكنك تحميلها ورفعها على اى سيرفر , ومن ثم الاستعانه بها وضمها للمدونة داخل بلوجر ( او اى موقع اخر ) والتمتع بقمة من الاداء والحكم فى المدونة وانشاء عدد غير حصرى من الـ effcets كل هذا باقل كمية , فى الحقيقة بكمية صغيرة جدا جدا من الاكواد بالمقارنة بالجافا سكريبت . انت ستندهش صدقنى
لحسن الحظ ان البلوجر تدعم هذا النوع من السكريبتات , لذلك بعد البحث الكثير طوال الفترة الماضية , قررت ان اطرح سلسلة تعليمية من الصفر حول استخدام الجى كويرى فى عالم البلوجر , لا يمنع هذا ان الشرح سارى لاى صاحب موقع او مدونة اخرى تدعم الجى كويرى , لكن التركيز سينصب حول استخدامات الجى كويرى لمشتركى البلوجر .
السكريبت المكتوب باللون الازرق هو السكريبت الرئيسى للجى كويرى , لابد من وجوده فى الصندوق الاكواد ( يمكن وضعه فى جزء الراس head او جزء الجسم (body ) ويوجد ايضا ملفات جى كويرى فرعية ( سنتحدث عنها لاحقا ) تؤدى تلك الملفات وظائف معينة تختص بتاثيرا تمعينة .
السكريبت المكتوب باللون البنفسجى : هو سكريبت الوظيفة المعينة التى تريد اداءها على قطعة معينة , يمكن ان يوجد اكثر من سكريبت وظيفى فى نفس المدونة حسب اختيارك , ويمكن ضم كل الوظائف فى سكريبت واحد , لا يوجد اى مشكلة .
الجزء المكتوب باللون البرتقالى هو مثال لمحتوى المدونة الذى سيطبق عليه التاثير , وهو هنا عبارة عن لينك بسيط جدا .
انظر ايضا هذا الموضوع
_______________________
خامسا : نظرة عامة على تراكيب الـ css
لاحظ : بعض العناصر او القطع لها اى دى وكلاس معا
مثال :
_______________________
سادسا : مم يتركيب الكود الوظيفى للـ جى كويرى ؟
الهيكل الرئيسى للسكريبت الذى يحتوى على الكود الوظيفى هو شكل كلاسيكى جدا وسهل جدا , ويتميز بعلامة الدولار الامريكى $ .
<script type="text/javascript">
$(document).ready(function(){
SOME CODES HERE
});
</script>
علامة الدولار باللون الاحمر هى التى تميز لغة الجى كويرى , ستجدها دائما فى اول السكريبت لتعبر عن بداية وظيفة جديدة
الكلام باللون الازرق : معناه ان الوظيفة سيبدأ تنفيذها مباشرة عندما يكون المستند ( المدونة ) جاهزة للعرض ready .
الكلام باللون الاخضر : معناه : نفذ الوظيفة function او التاثيرات التالية عندما تنتهى من تحميل عناصر المدونة وتصبح جاهز للعرض , لاحظ ان القوس الاخضر لم ينتهى مباشرة بعد كلمة function بل انتهى بالاسفل بعد اكواد الوظيفة لكى يفهم المتصفح اين بداية ونهاية تلك الوظيفة .
لاحظ ايضا وجود قوسين باللون البنفسجى مغلقين , لاحقا ستعرف انه يمكن اضافة اكواد داخل هذين القوسين فى بعض الاحوال .
لاحظ ايضا وجود قوسين باللون البرتقالى وهما الذين يحتويان على كود الوظيفة بداخلهما .
_______________________
سابعا : مزيد من التفاصيل
<script type="text/javascript">
$(document).ready(function(){
$("a#test").click(function(event){
$("img.pic").hide("slow");
});
});
</script>
فى هذا المثال لاحظ الاتى :
اضفت هنا كود وظيفة معينة , عندما سنضغط على رابط معين ستختفى صورة معينة
اصنع بوست جديد للاختبار ( يستحسن ان تصنع مدونة للاختبار والتعلم ) , انتقل الى وضع الـ هتمل وليس وضع الانشاء , وضف الكود التالى الذى يعبر عن لينك وصورة .
اللينك : لينك بسيط جدا لكن يوجد به id اسمه test سنستطيع من خلال هذا الاى دى ان نحدد هذا الرابط المعين دون غيره من بين مئات اللينكات داخل المدونة .
الصورة : كود صورة عادى جدا ايضا لكن يوجد به class اسمه pic سنستطيع ايضا من خلال هذا الكلاس ان نحدد تلك الصورة دون غيرها من بين الكثير من الصور داخل المدونة .
<a id='test' href='javascript:void(0);'>اخفاء الصورة</a>
<img class='pic' src='http://www.barnardos.org.uk/microsite_smile.gif'/>
اضغط على اللينك التالى وستختفى الصورة فورا
اخفاء الصورة
ساشرح الكود الان اذن
$("a#test").click(function(event){
$("img.pic").hide("slow");
});
فى البداية ستجد ايضا علامة الدولار بالشكل الاحمر لتعبر عن بداية الوضيفة ( لانه فى حالة تعدد اكثر من وظيفة لابد من تحدد بداية لكل منها ) , فى هذا المثال عندما نضغط click على اللينك a الذى يحتوى على id اسمه test سيتم تنفيذ function معينة ستوجد فى السطر التالى . لاحظ ان علامة # تعنى id وستجعل الجى كويرى يبحث عن الرابط الذى لديه id اسمه كذا .
فى السطر التالى ستجد الوظيفة التى ستتم عندما تضغط على اللينك , فى البادية ايضا ستجد علامة الدولار الاحمر ( لنفرض انك تريد اكثر من وظيفة عندما تقوم بالضغط على اللينك , لذلك لابد من وجود تلك العلامة لكى تحدد بداية كل وظيفة على حدة ) , محتوى تلك الوظيفة هو الاتى : الصورة img التى بها كلاس class اسمه pic ستختفى hide بطريقة بطيئة slow .
فى السطر الاخير لابد من وجود تلك الاقواس والفصلات لتعبر عن نهاية الاكواد كما سبق الذكر .
مثال كامل لكل ما سبق :
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a#test").click(function(event){
$("img.pic").hide("slow");
});
});
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
_______________________
ثامنا : المزيد من الأمثلة :
1- عند الضغط على الرابط a الذى يحتوى على id اسمه hello ستظهر رسالة ترحيب معينة
<script type="text/javascript">
$(document).ready(function(){
$("a#hello").click(function(event){
alert("Thanks for visiting!");
});
});
</script>
للتجربة : اضف كود المثال التالى فى اداة من نوع هتمل/جافا سكريبت او فى تدوينة ( بوست ) للاختبار , بالطبع بعد اضافة الجى كويرى للمدونة
<a href="javascript:void(0);" id="hello">اظهر رسالة الترحيب</a>
للمعاينة : اضغط الرابط الاتى :
اظهر رسالة الترحيب
2- عند الضغط على الرابط a الذى يحتوى على id اسمه slideup ستنزلق الصورة التى بها class اسمه slidup الى اعلى فى وقت 1000 مللى ثانية .
<script type="text/javascript">
$(document).ready(function(){
$("a#slideup").click(function(event){
$("img.slidup").slideUp("slow");
});
});
</script>
للتجربة : اضف كود المثال التالى فى اداة من نوع هتمل/جافا سكريبت او فى تدوينة ( بوست ) للاختبار
<a href="javascript:void(0);" id="slideup">اضغط هنا</a>
<img src="http://www.barnardos.org.uk/microsite_smile.gif" class="slidup" />
للمعاينة : اضغط الرابط التالى:
اضغط هنا
_______________________
تاسعا : لمسات نهائية :
الان بعد تطبيق تلك التاثيرات على الصورة بوسطة الضغط على الرابط , يمكنك التاثير على اى قطعة اخرى فى المدونة يكون لها id او class , فمثلا الهيدر #header ,لو اردت ان تختفى عندما تضغط على رابط معين استخدم div#header بدلا من img#pic
يوجد المزيد والمزيد من التاثيرات مثل hide و slideUp بالاعلى : اهمها الاتى :
show( ) عكس hide
toggle( ) معناها ( اخفاء / اظهار ) شيئا ما عن الضغط على رابط .
slideUp( speed, callback ) : معناها ان الشئ ( تحت التأثير ) سينزلق لاسفل بسرعة معينة .
slideUp( speed, callback ) : معناها ان الشئ ( تحت التأثير ) سينزلق لاعلى بسرعة معينة .
fadeIn( speed, callback ) : معناها ان الشئ ( تحت التأثير ) سيختفى بالتدريج بسرعة معينة .
fadeOut( speed, callback ) : معناها ان الشئ ( تحت التأثير ) سيظهر بالتدريج بسرعة معينة .
animate( params, duration, easing, callback ) : ان الشئ ( تحت التاثير ) سيتحرك animate من مكان لاخر او من لون لاخر او من حجم لاخر وهكذا , فى وقت معين .
_______________________
عاشرا واخيرا : كانت تلك مقدمة بسيطة جدا عن امكانيات الجى كويرى للمبتدئين جدا جدا , هناك المزيد من الامثلة والاستخدامات الاكثر اهمية واحترافية بالطبع , لكن تلك الاساسيات لابد من ذكرها اولا .
قريبا ان شاء الله ساتعرض للامثلة مباشرة , وكيف يستغل مستخدم البلوجر تلك الميزة من اجل الوصول الى تصميم احترافى , حتى ذلك الحين اتمنى وضع اى اسئلة او تعليق او اقتراح يخص المبتدئين او يخص هذا الدرس .
الى اللقاء قريبا .
تJQuery عبارة عن حزمة من الجافا سكريبت مجمعه فى عدة ملفات يمكنك تحميلها ورفعها على اى سيرفر , ومن ثم الاستعانه بها وضمها للمدونة داخل بلوجر ( او اى موقع اخر ) والتمتع بقمة من الاداء والحكم فى المدونة وانشاء عدد غير حصرى من الـ effcets كل هذا باقل كمية , فى الحقيقة بكمية صغيرة جدا جدا من الاكواد بالمقارنة بالجافا سكريبت . انت ستندهش صدقنى
لحسن الحظ ان البلوجر تدعم هذا النوع من السكريبتات , لذلك بعد البحث الكثير طوال الفترة الماضية , قررت ان اطرح سلسلة تعليمية من الصفر حول استخدام الجى كويرى فى عالم البلوجر , لا يمنع هذا ان الشرح سارى لاى صاحب موقع او مدونة اخرى تدعم الجى كويرى , لكن التركيز سينصب حول استخدامات الجى كويرى لمشتركى البلوجر .
اولا : ماهى الجى كويرى :
كما سبق هى عبارة عن حزمة من الجافا سكريبت فى عدة ملفات ( بعضها رئيسية لابد منها وبعضها الاخر فرعيه تخص كل تاثير على حدة ) تلك الملفات تستطيع ضمها للمدونة او الموقع , بعد اضافة تلك الملفات الرئيسية الى مدونتك ( ستعرف الطريقة لاحقا ) ستمنحك تلك الملفات القدرة على اختيار select اى شئ فى المدونة ( لينك , قطعة , صورة , اى شئ ) ومن ثم التحكم فيه بشكل كامل ( اخفاء , تحريك , زووم ان / اوت , الخ الخ ) بالاضافة الى اضافة المزيد من الاحداث , مثلا : هل لاحظت اقتراحات جووجل اثناء البحث ؟ هذا مثال منهم .
كل هذا يمكنك عمله من خلال ابسط كمية من الاكواد وبطريقة سهلة جدا ساحاول ان اشرحها هنا ان شاء الله تباعا عن طريق الامثلة .
_______________________
ثانيا : موقع الجى كويرى jquery لم يريد التعلم من خلال ملفات المساعدة هناك باللغة الانجليزية .
_______________________
ثالثا : كيف تستطيع ضم ملفات الجى كويرى للمدونة :
من خلال تحميل اخر نسخة من هنا , لو كنت تملك مساحة خاصة يمكنك رفع الملفات عليها ثم ضمها بالمدونة
او الطريقة الافضل : الا وهى : اجعل جووجل يستضيف تلك الملفات من اجلك ! وهى الطريقة الامثل ليس فقط لانها الاسهل لكن كى تستفيد ايضا من سرعة نقل الملفات من سيرفر جووجل مباشرة .
الطريقة :
ابحث فى صندوق الاكواد عن
اضف الكود التالى بعدها مباشرة
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
ثم احفظ
الان انت اضفت الجزء الرئيسى من ملفات الجى كويرى الى مدونتك , الجزء الباقى هو ان تتعلم كيف تختار select الجزء الذى تريد اضافة التأثير عليه , ثم ايضا تتعلم كيفية كتابة الكود الخاص بهذا التاثير .
_______________________
رابعا : نظرة عامة على تركيب الجى كويرى
<html>
<head>
هنا يوجد اكواد الاستايل
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
هنا كود سكريبت الوظيفة المعينة
</script>
</head>
<body>
اللينك التالى هو الذى سنطبق عليه الوظيفة
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
كما سبق هى عبارة عن حزمة من الجافا سكريبت فى عدة ملفات ( بعضها رئيسية لابد منها وبعضها الاخر فرعيه تخص كل تاثير على حدة ) تلك الملفات تستطيع ضمها للمدونة او الموقع , بعد اضافة تلك الملفات الرئيسية الى مدونتك ( ستعرف الطريقة لاحقا ) ستمنحك تلك الملفات القدرة على اختيار select اى شئ فى المدونة ( لينك , قطعة , صورة , اى شئ ) ومن ثم التحكم فيه بشكل كامل ( اخفاء , تحريك , زووم ان / اوت , الخ الخ ) بالاضافة الى اضافة المزيد من الاحداث , مثلا : هل لاحظت اقتراحات جووجل اثناء البحث ؟ هذا مثال منهم .
كل هذا يمكنك عمله من خلال ابسط كمية من الاكواد وبطريقة سهلة جدا ساحاول ان اشرحها هنا ان شاء الله تباعا عن طريق الامثلة .
_______________________
ثانيا : موقع الجى كويرى jquery لم يريد التعلم من خلال ملفات المساعدة هناك باللغة الانجليزية .
_______________________
ثالثا : كيف تستطيع ضم ملفات الجى كويرى للمدونة :
من خلال تحميل اخر نسخة من هنا , لو كنت تملك مساحة خاصة يمكنك رفع الملفات عليها ثم ضمها بالمدونة
او الطريقة الافضل : الا وهى : اجعل جووجل يستضيف تلك الملفات من اجلك ! وهى الطريقة الامثل ليس فقط لانها الاسهل لكن كى تستفيد ايضا من سرعة نقل الملفات من سيرفر جووجل مباشرة .
الطريقة :
ابحث فى صندوق الاكواد عن
</head>
اضف الكود التالى بعدها مباشرة
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
ثم احفظ
الان انت اضفت الجزء الرئيسى من ملفات الجى كويرى الى مدونتك , الجزء الباقى هو ان تتعلم كيف تختار select الجزء الذى تريد اضافة التأثير عليه , ثم ايضا تتعلم كيفية كتابة الكود الخاص بهذا التاثير .
_______________________
رابعا : نظرة عامة على تركيب الجى كويرى
<html>
<head>
هنا يوجد اكواد الاستايل
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
هنا كود سكريبت الوظيفة المعينة
</script>
</head>
<body>
اللينك التالى هو الذى سنطبق عليه الوظيفة
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
<html>
هو اول كود فى صندوق الاكواد وينتهى فى آآآخر الصفحة بنفس الكود قبله سلاش /<head>
هى بداية الراس head وتحتوى على اكواد الـ style وهى عبارة عن الاكواد التى تحدد مظهر كل قطعة فى المدونة ( طول وعرض وخلفية وبوردر الخ الخ الخ ) وتحتوى ايضا على سكريبتات الجى كويرى ( الرئيسية والفرعية وسكريبت الوظيفة ) وتنتهى بنفس العبارة ايضا قبلها سلاش /السكريبت المكتوب باللون الازرق هو السكريبت الرئيسى للجى كويرى , لابد من وجوده فى الصندوق الاكواد ( يمكن وضعه فى جزء الراس head او جزء الجسم (body ) ويوجد ايضا ملفات جى كويرى فرعية ( سنتحدث عنها لاحقا ) تؤدى تلك الملفات وظائف معينة تختص بتاثيرا تمعينة .
السكريبت المكتوب باللون البنفسجى : هو سكريبت الوظيفة المعينة التى تريد اداءها على قطعة معينة , يمكن ان يوجد اكثر من سكريبت وظيفى فى نفس المدونة حسب اختيارك , ويمكن ضم كل الوظائف فى سكريبت واحد , لا يوجد اى مشكلة .
<body>
هى بداية جزء الجسم body ويتواجد به الاكواد التى ستحدد محتوى المدونة , وينتهى بنفس العبارة قبلها سلاش /الجزء المكتوب باللون البرتقالى هو مثال لمحتوى المدونة الذى سيطبق عليه التاثير , وهو هنا عبارة عن لينك بسيط جدا .
انظر ايضا هذا الموضوع
_______________________
خامسا : نظرة عامة على تراكيب الـ css
<div>
اختصار division = قسم , مثلا جزء الهيدر , الاطار الجانبى (سايدبار) , ذيل المدونة (فووتر ) الجزء الرئيسى الذى يوجد به التدوينات , كل تلك الاجزاء ماهى الا اقسام توجد فى جزء جسم المدونة body .<p>
اختصار paragraph وهو قطعة كتابية .<a>
الكود المعبر عن ( الرابط ) او اللينك<img>
الكود المعبر عن الصورة image<ul>
هذا الكود والذى يليه يستخدمان فى عمل الجداول ul = unorderd list<li>
< id=" sidebar '">
بعض العناصر "القطع " تحتوى على اى دى معين (side bar مثلا ) يميزها عن بعض القطع الاخرى , عادة ما يستخدم هذا الاى دى لتحديد تلك القطعة دون سواها , لتحديد الاى دى نستعمل العلامة شباك< class=" main ">
بعض العناصر الاخرى لها كلاس class او فئة معينة ( main مثلا ) , نستخدمها ايضا لتحديد تلك القطعة دون سواها , ولتحديد الكلاس نستخدم ( دوت ) = ( . )لاحظ : بعض العناصر او القطع لها اى دى وكلاس معا
مثال :
< id="'sidebar'" class="'sidebar-wrapper'">
انظر ايضا هذا الموضوع_______________________
سادسا : مم يتركيب الكود الوظيفى للـ جى كويرى ؟
الهيكل الرئيسى للسكريبت الذى يحتوى على الكود الوظيفى هو شكل كلاسيكى جدا وسهل جدا , ويتميز بعلامة الدولار الامريكى $ .
<script type="text/javascript">
$(document).ready(function(){
SOME CODES HERE
});
</script>
علامة الدولار باللون الاحمر هى التى تميز لغة الجى كويرى , ستجدها دائما فى اول السكريبت لتعبر عن بداية وظيفة جديدة
الكلام باللون الازرق : معناه ان الوظيفة سيبدأ تنفيذها مباشرة عندما يكون المستند ( المدونة ) جاهزة للعرض ready .
الكلام باللون الاخضر : معناه : نفذ الوظيفة function او التاثيرات التالية عندما تنتهى من تحميل عناصر المدونة وتصبح جاهز للعرض , لاحظ ان القوس الاخضر لم ينتهى مباشرة بعد كلمة function بل انتهى بالاسفل بعد اكواد الوظيفة لكى يفهم المتصفح اين بداية ونهاية تلك الوظيفة .
لاحظ ايضا وجود قوسين باللون البنفسجى مغلقين , لاحقا ستعرف انه يمكن اضافة اكواد داخل هذين القوسين فى بعض الاحوال .
لاحظ ايضا وجود قوسين باللون البرتقالى وهما الذين يحتويان على كود الوظيفة بداخلهما .
_______________________
سابعا : مزيد من التفاصيل
<script type="text/javascript">
$(document).ready(function(){
$("a#test").click(function(event){
$("img.pic").hide("slow");
});
});
</script>
فى هذا المثال لاحظ الاتى :
اضفت هنا كود وظيفة معينة , عندما سنضغط على رابط معين ستختفى صورة معينة
اصنع بوست جديد للاختبار ( يستحسن ان تصنع مدونة للاختبار والتعلم ) , انتقل الى وضع الـ هتمل وليس وضع الانشاء , وضف الكود التالى الذى يعبر عن لينك وصورة .
اللينك : لينك بسيط جدا لكن يوجد به id اسمه test سنستطيع من خلال هذا الاى دى ان نحدد هذا الرابط المعين دون غيره من بين مئات اللينكات داخل المدونة .
الصورة : كود صورة عادى جدا ايضا لكن يوجد به class اسمه pic سنستطيع ايضا من خلال هذا الكلاس ان نحدد تلك الصورة دون غيرها من بين الكثير من الصور داخل المدونة .
<a id='test' href='javascript:void(0);'>اخفاء الصورة</a>
<img class='pic' src='http://www.barnardos.org.uk/microsite_smile.gif'/>
اضغط على اللينك التالى وستختفى الصورة فورا
اخفاء الصورة
ساشرح الكود الان اذن
$("a#test").click(function(event){
$("img.pic").hide("slow");
});
فى السطر التالى ستجد الوظيفة التى ستتم عندما تضغط على اللينك , فى البادية ايضا ستجد علامة الدولار الاحمر ( لنفرض انك تريد اكثر من وظيفة عندما تقوم بالضغط على اللينك , لذلك لابد من وجود تلك العلامة لكى تحدد بداية كل وظيفة على حدة ) , محتوى تلك الوظيفة هو الاتى : الصورة img التى بها كلاس class اسمه pic ستختفى hide بطريقة بطيئة slow .
فى السطر الاخير لابد من وجود تلك الاقواس والفصلات لتعبر عن نهاية الاكواد كما سبق الذكر .
مثال كامل لكل ما سبق :
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a#test").click(function(event){
$("img.pic").hide("slow");
});
});
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
_______________________
ثامنا : المزيد من الأمثلة :
1- عند الضغط على الرابط a الذى يحتوى على id اسمه hello ستظهر رسالة ترحيب معينة
<script type="text/javascript">
$(document).ready(function(){
$("a#hello").click(function(event){
alert("Thanks for visiting!");
});
});
</script>
للتجربة : اضف كود المثال التالى فى اداة من نوع هتمل/جافا سكريبت او فى تدوينة ( بوست ) للاختبار , بالطبع بعد اضافة الجى كويرى للمدونة
<a href="javascript:void(0);" id="hello">اظهر رسالة الترحيب</a>
للمعاينة : اضغط الرابط الاتى :
اظهر رسالة الترحيب
2- عند الضغط على الرابط a الذى يحتوى على id اسمه slideup ستنزلق الصورة التى بها class اسمه slidup الى اعلى فى وقت 1000 مللى ثانية .
<script type="text/javascript">
$(document).ready(function(){
$("a#slideup").click(function(event){
$("img.slidup").slideUp("slow");
});
});
</script>
للتجربة : اضف كود المثال التالى فى اداة من نوع هتمل/جافا سكريبت او فى تدوينة ( بوست ) للاختبار
<a href="javascript:void(0);" id="slideup">اضغط هنا</a>
<img src="http://www.barnardos.org.uk/microsite_smile.gif" class="slidup" />
للمعاينة : اضغط الرابط التالى:
اضغط هنا
_______________________
تاسعا : لمسات نهائية :
الان بعد تطبيق تلك التاثيرات على الصورة بوسطة الضغط على الرابط , يمكنك التاثير على اى قطعة اخرى فى المدونة يكون لها id او class , فمثلا الهيدر #header ,لو اردت ان تختفى عندما تضغط على رابط معين استخدم div#header بدلا من img#pic
يوجد المزيد والمزيد من التاثيرات مثل hide و slideUp بالاعلى : اهمها الاتى :
show( ) عكس hide
toggle( ) معناها ( اخفاء / اظهار ) شيئا ما عن الضغط على رابط .
slideUp( speed, callback ) : معناها ان الشئ ( تحت التأثير ) سينزلق لاسفل بسرعة معينة .
slideUp( speed, callback ) : معناها ان الشئ ( تحت التأثير ) سينزلق لاعلى بسرعة معينة .
fadeIn( speed, callback ) : معناها ان الشئ ( تحت التأثير ) سيختفى بالتدريج بسرعة معينة .
fadeOut( speed, callback ) : معناها ان الشئ ( تحت التأثير ) سيظهر بالتدريج بسرعة معينة .
animate( params, duration, easing, callback ) : ان الشئ ( تحت التاثير ) سيتحرك animate من مكان لاخر او من لون لاخر او من حجم لاخر وهكذا , فى وقت معين .
_______________________
عاشرا واخيرا : كانت تلك مقدمة بسيطة جدا عن امكانيات الجى كويرى للمبتدئين جدا جدا , هناك المزيد من الامثلة والاستخدامات الاكثر اهمية واحترافية بالطبع , لكن تلك الاساسيات لابد من ذكرها اولا .
قريبا ان شاء الله ساتعرض للامثلة مباشرة , وكيف يستغل مستخدم البلوجر تلك الميزة من اجل الوصول الى تصميم احترافى , حتى ذلك الحين اتمنى وضع اى اسئلة او تعليق او اقتراح يخص المبتدئين او يخص هذا الدرس .
الى اللقاء قريبا .
اشكال بديلة اخرى من هـنـا
