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

منتشرشده: آوریل 14, 2008 در برنامه نویسی و توسعه وب, ترفندها, دنیای کامپیوتر
برچسب‌ها:,

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

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

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

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

<script src=«scriptaculous/lib/prototype.js» type=«text/javascript»></script>

<script src=«scriptaculous/src/scriptaculous.js» type=«text/javascript»></script>
مرحله 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 فایل خودمون درج کنیم. بلو اولی برای نمایان کردن پیام هست و دومی برای غیب کردنش.

<script language=«javascript»>
function showMsg(idElement){
idEl= idElement;
statusMenu = document.getElementById(‹msgstatus›);
if(statusMenu.value==0){
statusMenu.value=1;
Effect.toggle(‹msg›+idEl, ‹appear›); return false;
}
}
function hideMsg(idElement){
idEl= idElement;
statusMenu = document.getElementById(‹msgstatus›);
if(statusMenu.value==1){
statusMenu.value=0;
Effect.toggle(‹msg›+idEl, ‹appear›); return false;
}
}
</script>
تمام شد! تبریک میگم به همین سادگی شما تونستید کارایی و قابلیت فرم های خودتون رو بالا ببرید و تجربه دلچسب تری رو برای کاربر نهایی رغم بزنید.
دیدگاه‌ها
  1. سینا می‌گه:

    لینک دانلو.د خرابه

  2. silvercover می‌گه:

    اره حق با تو هست نبی جان. ولی خب چاره ای نیست. لا اقل میشه از نسخه های فشردش شدش استفاده کرد. ولی بازم با دیزل نت صفحه طول میکشه تا لود بشه.

  3. نبی می‌گه:

    پیشنهاد میکنم حداقل تا وقتی که میدونی مخاطبت توی ایرانه خودت رو درگیر یه فایل 122 کیلوبایتی نکن! prototype رو میگم…

    فقط mootools

پاسخی بگذارید

در پایین مشخصات خود را پر کنید یا برای ورود روی شمایل‌ها کلیک نمایید:

نشان‌وارهٔ وردپرس.کام

شما در حال بیان دیدگاه با حساب کاربری WordPress.com خود هستید. بیرون رفتن / تغییر دادن )

تصویر توییتر

شما در حال بیان دیدگاه با حساب کاربری Twitter خود هستید. بیرون رفتن / تغییر دادن )

عکس فیسبوک

شما در حال بیان دیدگاه با حساب کاربری Facebook خود هستید. بیرون رفتن / تغییر دادن )

عکس گوگل+

شما در حال بیان دیدگاه با حساب کاربری Google+ خود هستید. بیرون رفتن / تغییر دادن )

درحال اتصال به %s