مكتبة jquery هي من أشهر مكتبات التعامل مع الجافاسكريبت الكثير من المواقع المشهورة تستخدم هذه المكتبة لإضافة بعض السحر على مواقعها مثل المؤثرات البصرية و تطبيقات الاجاكس . في هذا الموضوع سأعرفكم على القليل من سحر هذه المكتبة و بعض المؤثرات البسيطة و الجميلة على المواقع .

تحميل المكتبة

يمكنك تحميل المكتبة من موقعها الرسمي Jquery .

عند تحميلها يمكنك استدعاها بواسطة
[js]

[/js]
لو كنت وضعت المكتبة في مجلد منفصل تأكد من إضافة اسم المجلد في الشفرة السابقة .

 

لو كنت تستخدم وردبريس ضع الملف في مجلد قالبك و استخدم الدالة التالية
[js]
<script language="javascript" type="text/javascript" src="/jquery.js ">
[/js]
و الآن إذا أردنا لاي أمر أن يتنفذ عند تحميل الصفحة و قبل تحميل المحتوى يجب أن يتم استدعاءه داخل الدالة التالية .
[html]
$(document).ready(function() {
// هنا ضع أوامرك
});
[/html]
استخدام هذه الطريقة له فوائد كبيرة و هي الطريقة الأضمن للقيام بذلك و تذكر كل أسطر و دوال الجافا سكريبت التالية ستكون داخل هذه الدالة أو داخل هذين السطرين .

&nbsp;

حيلة ١:عرض و أخفاء

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

ما سنقوم به هو إنشاء وصلة أو زر للضغط عليها و إنشاء المنطقة التي ستعرض فيها الاوسمة و إعطاءها معرف خاص

الزر سيكون بالشكل التالي .. لاحظ أننا يجب أن نعطي معرف خاص للزر مثلا هنا اسميتهtogglebutton . المعرف id ضروري لأنها الطريقة التي سيميز بها الجافا سكريبت هذا الزر عن غيره .

xhtml
[html]

[/html]
و المنطقة التي ستظهر و تختفي
[html]
<div>هنا الاوسمة  ...</div>
[/html]
المنطقة حددتها كتقسيم div يمكن أن تكون أي وسم p , span و غيرها . و اعطيتهاsidebartags كمعرف ID .

&nbsp;

Css

لن ندخل في تفاصيل الشكل الجمالي من ألوان و اطر فهذا ليس موضوعنا لكن انا أريد أن لا يظهر المحتوى للزائر عند تحميل الصفحة فما سأقوم به هو مبدأيا إخفاء المحتوى و ذلك بواسطة التالي
[html]
#sidebartags{Display:none;}
[/html]
و بالتالي عند تحميل الصفحة سيكون المحتوى مخفي.

&nbsp;

JS

أولا نريد إعطاء الزر حدث event الضغط كأننا نأمر الزر إذا تم الضغط عليك نفذ التالي و سيكون ذلك بواسطة الحدث Click
[html]
$(document).ready(
function() {$("#togglebutton").click(function () {
// أوامرنا هنا
});
});
[/html]
و الأن سنستخدم الدالة Toggle ( و هي دالة خاصة بإظهار و اخفاء العناصر يختبر العنصر لو كان ظاهرا يخفيه و لو كان مخفيا يظهره ).لذلك سنخبره أن يظهر و يخفي المنطقةsidebartags .
[html]

$(document).ready(
function() {
 $("#togglebutton").click(function () {
 $("#sidebartags").toggle("slow");
 });
});

[/html]
بالطبع يمكنك ترك الدالة toggle بدون متغيرات أو قيم لكني اعطيته القيمة Slow لتكون الحركة بطيئة .

&nbsp;

لو لاحظت الصور من فلكري في أسفل الموقع ستجد أنها باهته لكن عند مرور الفأرة عليها ستظهر بشكل أوضح . هناك طريقة للقيام بذلك بواسطة css لكنها في نظري لن تكون بنفس الجمال خاصة في طريقة تدرج اللون .

جميع الصور في الاسفل تحمل Class المسمى thumb .
[html]

<img src="image.gif" alt="" />

[/html]
سنستعين هنا بالدالة fadeTo وهي تقوم بتعديل شفافية الصورة بالتدريج .
[html]

$(".thumb").fadeTo ("slow", 0.3);

[/html]
سنطلب منه اولا و عند التحميل أعطي الصور درجة شفافية 0.3 حيث ١ تعني ظهور الصورة بالكامل و 0 يعني صورة شفافة بالكامل .
بعد ذلك سنستخدم الحدث event المسمى hover و هو مخصص لالتقاط حركة مرور الفأرة على العنصر . فهو يميز هل مرت الفأرةعلى العنصر و هل خرجت من على العنصر .
بالشكل التالي
[html]
$(".thumb").hover(
function(){
      $(this).fadeTo("slow", 1.0)
;},
  function(){
$(this).fadeTo("slow", 0.3);
});

[/html]
عند مرور الفأرة نفذ الدالة الأولى و التي ستقوم بتحويل الصورة إلى الشفافية ١ ( أي ظاهرة غير شفافة ) و عند خروج الفأرة من على الصورة نفذ الدالة التالية اعد الصورة للشفافية 0.3 .
الشفرة بشكل كامل
[js]

$(document).ready(function() {
    $(".thumb").fadeTo ("slow", 0.3);
    $(".thumb").hover(
        function(){$(this).fadeTo("slow", 1.0);},
        function(){$(this).fadeTo("slow", 0.3);
    });
});

[/js]
‪الحيلة ٣ ‫:‬ روابط خارجية مميزة
الحيلة التالية ستقوم بإضافة أيقونة صغيرة إلى جانب الوصلات الخارجية .
[js]
$(document).ready(function() {
 $('a').filter(function() {
 return this.hostname && this.hostname !== location.hostname;
 }).after(' <img src="/images/external.png" alt="external link" />');
});
[/js]
سنقارن بين عنوان الموقع location.hostname وبين عنوان الوصلة this.hostname لو اختلفا اضفنا الأيقونة بعد الوصلة after كما علينا التحقق من وجود عنوان موقع this.hostname لتفادي تحقق الشرط في حالات خاطئة مثلا في حالة وصلة إلى بريد إلكتروني Mailto .
الشرط سيكون كالتالي
[js]
this.hostname && location.hostname !== this.hostname.

[/js]
سنستخدم الدالة  filter و من اسمها هي فلتر أو تصفية فقط العناصر التي تحقق الشرط . و بعدها باستخدام الدالة  ِAfter اضف صورة