«
»

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

Saturday 3 January 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 معروفة بهذا الشكل:

alert

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>

مثال للتجربة

تعليق واحد

  1. عمر الدليمي says:
    January 7, 2009 at 6:29 pm

    جافاسكربت مخيفة :) تماما :).
    لكن جي كويري المروض تبعها :D .. إختراع جميل ^^

التعليقات مغلقة.