افزایش کارایی فرم ها با بهره گیری از پیام های خود کار

در این خود آموز نحوه اضافه کردن پیام های خود کار به فیلد های یک فرم آموزش داده میشه. با استفاده از این تکنیک هنگامی که کاربر یک فیلد رو انتخاب کنه یک پیام حبابی با جلوه FadeIn ( ظاهر شدن) نمایان میشه و موقعی هم که تمرکز از فیلد مورد نظر گرفته بشه با جلوه FadeOut غیب میشه.

در این تکنیک از فریم ورک Scriptaculous جهت خلق جلوه ها استفاده شده. برای دانلود این خود آموز هم اینجا رو کلیک کنید.

مرحله 1 : ضمیمه کردن کتابخانه های Scriptaculous

ابتدا یک فایل خالی html ( مثلا index.html ) رو ایجاد کنید و در قسمت Head اون کد زیر رو قرار بدین:

مرحله 2 : کد HTML

در این مرحله یک فیلد متنی به عنوان نمونه جهت جستجو یکی جهت ایمیل و یک فیلد مخفی دیگه با شناسه msgstatus در بدنه فایل HTML قرار میدیم. کار این فیلد مخفی نگه داشتن وضعیت نمایش کادر پیام هست.

<input type=“text” name=“name” id=“name“ onfocus=“javascript:showMsg(1)“/>
<input id=“msgstatus” type=“hidden” value=“0” />
<div class=”msg” id=“msg1“ style=“display:none;”>
…some html code here…
<a href=“#” onClick=“javascript:hideMsg(1)“> Close </a>
<div/>

<input type=“text” name=“email” id=“email“ onfocus=“javascript:showMsg(2)“/>
<input id=“msgstatus” type=“hidden” value=“0” />
<div class=”msg” id=“msg2“ style=“display:none;”>
…some html code here…
<a href=“#” onClick=“javascript:hideMsg(2)“> Close </a>
<div/>

توجه کنید که در قطعه کد بالا از تگ div برای نمایش کادر پیام استفاده میشه. حالا اگر نیاز داشته باشید که تعداد فیلد های بیشتری بسازین و برای هر کدوم هم یه کادر پیام مجزا بذارین باید قسمت ID هر تگ div رو به صورت افزایشی نامگذاری کنید. مثلا msg3 ، msg4 . از طرف دیگه باید شماره هر کادر رو هم با تابع showMsg اعلام کنید.

مرحله 3 : توابع Javascript

الان نوبت این هست که کدهای جاوا اسکریپتی رو که قرار هست باعث نمایان شدن و غیب شدن پیام ها میشه در قسمت head فایل خودمون درج کنیم. بلو اولی برای نمایان کردن پیام هست و دومی برای غیب کردنش.

function hideMsg(idElement){
idEl= idElement;
statusMenu = document.getElementById(‘msgstatus’);
if(statusMenu.value==1){
statusMenu.value=0;
Effect.toggle(‘msg’+idEl, ‘appear’); return false;
}
}

</script>

تمام شد! تبریک میگم به همین سادگی شما تونستید کارایی و قابلیت فرم های خودتون رو بالا ببرید و تجربه دلچسب تری رو برای کاربر نهایی رغم بزنید.

منبع