رسائل الأخطاء .. باستخدام jQuery

السبت 3 يناير 2009

منصة jquery غيرت مفاهيم كثير من المطورين حول javascript، من لغة سيئة شريرة الى لغة جميلة ساحرة، بالإضافة الى هذه المنصة توجد منصات لا تقل شهرة مثل Mootools, script.aculo.us وهذه الاخيرة يبدو ان اسمها اشتق من صوت البقرة (مووو)، هناك أيضا (YUI, Mochikit, Dojo)

jQuery منصة جاهزة، بإضافة بعض الأسطر البسيطة أو بعض الإضافات Plugins، يمكنك التحكم في النماذج البريدية والتأكد من المعلومات التي يدخلها الزائر، أيضا تستطيع تحميل الملفات والصور بطريقة جديدة باستعمال ajax وأشياء كثيرة تجدها في المواقع المتخصصة مثل devsnippets

قبل ذلك، لنتعرف على طريقة تصميم رسائل الأخطاء باستخدام css و xhtml

<p class='alert'>
  error, please correct your email.
</p>

<div class="success">
  email was successfully updated.
</div>

p.success {
	background: #DAF0F6 url(success.gif) no-repeat 99% 50%;
	color:#499DCC;
	padding: 1em;
	text-indent: 14px;
	border: 1px solid #3DB2D0;
	border-width:1px 0
}

p.alert {
    color:#B28600;
	background: #FFFCDB url(alert.gif) no-repeat 99% 50%;
	padding: 1em;
	text-indent: 14px;
	border: 1px solid #FFE085;
	border-width:1px 0
}

رسائل الأخطاء أو success معروفة بهذا الشكل:

الان يكفي بعد استدعاء ملف jquery.js (استعمل النسخة min)، إضافة التأثير التالي:

<script type="text/javascript">
		$(document).ready(function(){
		    $("p.success").fadeOut(900).fadeIn(900);
		})
</script>

مع تغيير قيمة fadeout و fadein حسب الرغبة، يمكن أيضا استعمال slow, fast وكذلك الكلاس p.success

بعد ظهور التاثير يمكننا إخفاء الرسالة بإضافة hide لوسم p كالاتي:

<script type="text/javascript">
		$(document).ready(function(){
		    $("p.success").fadeOut(900).fadeIn(900);
		    $("p.success").hide('slow');
		})
</script>