Hide this notice

مرحبا أنت تستخدم انترنت اكسبلورر ٦ و هو متصفح اصدر في العام 2001 الا يبدو لك ذلك قديما .

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

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

Post Pic

3 حيل Jquery سريعة و مفيدة

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

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

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

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

<script type="text/javascript" src="jquery.js"></script>

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

لو كنت تستخدم وردبريس ضع الملف في مجلد قالبك و استخدم الدالة التالية

<script language="javascript" type="text/javascript" src="<? bloginfo('template_url') ?>/jquery.js "></script>

و الآن إذا أردنا لاي أمر أن يتنفذ عند تحميل الصفحة و قبل تحميل المحتوى يجب أن يتم استدعاءه داخل الدالة التالية .


$(document).ready(function() {

// هنا ضع أوامرك

});

استخدام هذه الطريقة له فوائد كبيرة و هي الطريقة الأضمن للقيام بذلك و تذكر كل أسطر و دوال الجافا سكريبت التالية ستكون داخل هذه الدالة أو داخل هذين السطرين .

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

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

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

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

xhtml

<input type="button" id="togglebutton" value="الأوسمة " />

و المنطقة التي ستظهر و تختفي

<div id="sidebartags"">هنا الاوسمة  ...</div>

المنطقة حددتها كتقسيم div يمكن أن تكون أي وسم p , span و غيرها . و اعطيتها sidebartags كمعرف ID .

Css

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

#sidebartags{Display:none;}

و بالتالي عند تحميل الصفحة سيكون المحتوى مخفي.

JS

أولا نريد إعطاء الزر حدث event الضغط كأننا نأمر الزر إذا تم الضغط عليك نفذ التالي و سيكون ذلك بواسطة الحدث Click

$(document).ready(
function() {$("#togglebutton").click(function () {
// أوامرنا هنا
});
});

و الأن سنستخدم الدالة Toggle ( و هي دالة خاصة بإظهار و اخفاء العناصر يختبر العنصر لو كان ظاهرا يخفيه و لو كان مخفيا يظهره ).لذلك سنخبره أن يظهر و يخفي المنطقة sidebartags .

<scirpt type="text/javascript">
$(document).ready(
function() {
	$("#togglebutton").click(function () {
		$("#sidebartags").toggle("slow");
	});
});
</script>

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

حيلة ٢: تأثير مرور الفأرة

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

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

<img  src="image.gif"  class="thumb"/>

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

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

سنطلب منه اولا و عند التحميل أعطي الصور درجة شفافية 0.3 حيث ١ تعني ظهور الصورة بالكامل و 0 يعني صورة شفافة بالكامل .

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

بالشكل التالي

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

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

الشفرة بشكل كامل

<script type="text/javascript">
$(document).ready(function() {
	$(".thumb").fadeTo ("slow", 0.3);
	$(".thumb").hover(
		function(){$(this).fadeTo("slow", 1.0);},
		function(){$(this).fadeTo("slow", 0.3);
	});
});
</script>

‪الحيلة ٣ ‫:‬ روابط خارجية مميزة

الحيلة التالية ستقوم بإضافة أيقونة صغيرة إلى جانب الوصلات الخارجية .


$(document).ready(function() {
 $('a').filter(function() {
 return this.hostname && this.hostname !== location.hostname;
 }).after(' <img src="/images/external.png" alt="external link"/>');
});

سنقارن بين عنوان الموقع location.hostname وبين عنوان الوصلة this.hostname لو اختلفا اضفنا الأيقونة بعد الوصلة after كما علينا التحقق من وجود عنوان موقع this.hostname لتفادي تحقق الشرط في حالات خاطئة مثلا في حالة وصلة إلى بريد إلكتروني Mailto .

الشرط سيكون كالتالي


this.hostname && location.hostname !== this.hostname.

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

مصدر هذه الحيلة :Learning Jquery

بقلم : فاطمة العمادي

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

أوسمة : , , , ,

تعليقات الزوار (8)

[+] أضف تعليقك من فضلك



  1. omar كتب:

    يعنى كنت اتمنى انى اصل الى الى هذا المستوى ولكن لسة فى سنة اولى تصميم ويب (نرجو الدعاء )


  2. omar كتب:

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


  3. قياسي كتب:

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


  4. شكرا للجميع على المرور الكريم .. و إن شاء الله ستكون هناك المزيد من المقالات حول المكتبة و مزيد من الشروحات .


  5. لدي الشرف الكبير أنني مريت على موقعك المميز و الرائع و المتقن …الله يحرك أنت و عائلتك الفاضلة و انا سأتابع موقعك عن كثب


  6. ما شاء الله تقنيه ممتازه فعلا و استخدمها احيانا فى تصميم ثيمات ووردبريس فهى تعطى للتصميم رونق خاص بسحر يجذب المستخدم الى كثرة استخدام الازرار و خدمات الموقع :) على كل حال اختى الفاضله الله يوفقك و ننتظر الجديد دائما منكٍِِ .. احترامى