بسم الله الرحمن الرحيم ، اليوم ساحاول تحقيق حركة لطالما تكررت امام عيني في المواقع الكبيرة مثل ( تويتر ، فيسبوك ) ،


ولكني لم أعرها اهتماما ، ربما لقلة الملاحظة ، مع انها رائعة عند التطبيق ، جيدة في الأداء ، توصل الفكرة بطريقة سلسة و مريحة للزائر ،

مثال : Demo

يمكنك زيارة صفحة المثال من هنا .

الشرح :

الطريقة عادية جدا ، تطبق على عناصر مثل روابط ، أزرار ، عناوين .. أي شيء تريد ان تخبر الزوار بوصفه .
بعد استدعاء ملف مكتبة jQuery في رأس الصفحة ، أقوم باستدعاء الملف التالي
التعليقات مبينة بالملف ، اما عن طريقة الاستعمال ، فهي سهلة إن شاء الله ، اتبع معي :

$('#nord').tipsy({gravity: 'n'});

بحيث الحرف n يعني Nord التي أدللت بها للشمال ، حيث يتم إظهار الوصف من الجهة العليا للكلمة ، وهكذا بقية الحروف ، التي تم عملها في التطبيق ، وهي o , e, s وهي على التوالي ouest, est, sud نسبة إلى الجهات التي يمكنني أن اظهر فيها الوصف
هناك احتمال أن أدخل على الوصف تأثير النعومة او ما يعرف بـ fading ، يمكنني استعماله هكذا :

$('#fade').tipsy({ gravity: 's' , fade: true});

وسيتم تطبيق النعومة عليه ،

بالنسبة لكود css ، هذه الأوامر الخاصة بالتطبيق :

.desciption { 
	padding: 5px; 
	font-size: 10px; 
	opacity: 0.8; 
	filter: alpha(opacity=80); 
	background-repeat: no-repeat; 
}
.interieur{
	padding: 4px 5px; 
	background-color: 
	black; color: white; 
	max-width: 200px; 
	text-align: center; 
}
.sud { 
	background-image: url(tipsy-north.gif); 
	background-position: top center; 
}
.nord { 
	background-image: url(tipsy-south.gif); 
	background-position: bottom center;
 }
.est { 
	background-image: url(tipsy-east.gif); 
	background-position: right center; 
}
  .ouest { 
  	background-image: url(tipsy-west.gif); 
	background-position: left center; 
  }
#gravity { 
	width: 100%; 
	margin: 5px 0; 
	border-spacing: 5px; 
}

ملاحظات :

• جعلت اللون أسودا للوصف ،مع الشفافية من جيل Css3 لأطبق مثال المواقع المذكورة أعلاه جيدا ، لذلك لو أردت ان تجعل تنسيقات خاصة بك ، فما عليه سوى التعديل على اوامر css كما تريد
• في حالة استعملت تأثير fading على الوصف ، يجب أن أحدد له الاتجاه الذي يظهر فيه الوصف ، o, n ,e, أو s ، لذلك ، لو عملت فقط التأثير من دون التوجيه هكذا :

  $('#fade').tipsy({ fade: true});

  فإن القيمة الافتراضية للتوجيه هي n

• في التطبيق تم استعمال صور صغيرة للدلالة على بعض القوائم في الوصف
• التطبيق خاص بجلب عنصر title ، ماذا لو أردت أن أجلب غيره ؟؟ مثل الرابط href او وصف صورة alt ، أو أي شيء ، ما عليك سوى تغييره من ملف التطبيق في هذا السطر

  tip = $('<div class="desciption"><div class="interieur">' + $(this).attr('title') + '</div></div>');

  يمكنك أن تراجع الدرس السابق في جلب العناصر من الصفحة من هنا باستغلال attr في قيمة content

التحميل : Download

يمكنك تحميل التطبيق كاملا من هنا .

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

هذه التدوينة نُشرت في الثلاثاء, 20 أكتوبر, 2009 عند 9:28 م و مصنفة تحت تصنيف JavaScript. يمكنك متابعة أي تعليقات عبر رابط RSS 2.0. يمكنك ترك تعليق, أو تعقيب من مدونتك.