افزایش کارایی فرم ها با بهره گیری از پیام های خود کار
در این خود آموز نحوه اضافه کردن پیام های خود کار به فیلد های یک فرم آموزش داده میشه. با استفاده از این تکنیک هنگامی که کاربر یک فیلد رو انتخاب کنه یک پیام حبابی با جلوه FadeIn ( ظاهر شدن) نمایان میشه و موقعی هم که تمرکز از فیلد مورد نظر گرفته بشه با جلوه FadeOut غیب میشه.
در این تکنیک از فریم ورک Scriptaculous جهت خلق جلوه ها استفاده شده. برای دانلود این خود آموز هم اینجا رو کلیک کنید.
مرحله 1 : ضمیمه کردن کتابخانه های Scriptaculous
ابتدا یک فایل خالی html ( مثلا index.html ) رو ایجاد کنید و در قسمت Head اون کد زیر رو قرار بدین:
<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 showMsg(idElement){
idEl= idElement;
statusMenu = document.getElementById(‘msgstatus’);
if(statusMenu.value==0){
statusMenu.value=1;
Effect.toggle(‘msg’+idEl, ‘appear’); return false;
}
}
idEl= idElement;
statusMenu = document.getElementById(‘msgstatus’);
if(statusMenu.value==1){
statusMenu.value=0;
Effect.toggle(‘msg’+idEl, ‘appear’); return false;
}
}
افزایش کارایی فرم ها با بهره گیری از پیام های خود کار بیشتر بخوانید »
