آموزش طراحی وب

افکت لرزش فرم

یکی از دوستان در سامانه پرسش و پاسخ درخواست داده بودند که یک فرمی شبیه به فرم ورود وردپرس طراحی کنیم، یعنی برای نمایش خطا فرم به لرزش دربیاد.

login

اعلام خطا با افکت لرزش فرم

سلام خدمت همراهان همیشگی مدرسه مجازی ایرانیان

یکی از دوستان در سامانه پرسش و پاسخ درخواست داده بودند که یک فرمی شبیه به فرم ورود وردپرس طراحی کنیم، یعنی برای نمایش خطا فرم به لرزش دربیاد.

برای این کار از یک پلاگین js استفاده می کنیم. این پروژه رو میتونید در انتهای مطلب دانلود کنید.

 

در ابتدای کار کتابخانه جی کوئری و پلاگین مورد نظر رو در صفحه فراخوانی می کنیم:

سپس یک فرم طراحی می کنیم که در این مثال فرم لاگین طراحی کردیم:

لایه ی اصلی رو با شناسه ی login و فرم رو با شناسه ی loginform نامگذاری میکنیم. همچنین فیلد نام کاربری رو با شناسه ی username و فیلد رمز عبور رو با شناسه ی pwd نامگذاری میکنیم. برای دکمه ی ارسال هم شناسه ی submit_butt در نظر میگیریم.

حالا برای ایجاد افکت لرزش از کد جی کوئری زیر استفاده می کنیم:

زمانی که شما روی دکمه با شناسه ی submit_butt کلیک کنید، این تکه کد اجرا میشه.

از frequency میتونید استفاده نکنید، با spread شدت لرزش رو مشخص می کنیم، با duration بازه ی زمانی این افکت رو مشخص می کنیم مثلا میگیم به مدت ۵ دهم ثانیه به لرزش دربیاد.

تمامی زمان هارو به میلی ثانیه وارد کنید، مثلا ۵۰۰۰ یعنی ۵ ثانیه .

بعد از تعریف conf مورد نیازمون گفتیم لایه ای که با شناسه ی login معرفی کردیم با کانفیگ conf به لرزش دربیاد.

در مرحله ی بعد میگیم اگر فیلد پیغام خطا یعنی errormsg خالی بود پیغام مورد نظر رو در این کادر نمایش بده. همچنین تمامی محتوای داخل فیلدهای نام کاربری و رمز عبور رو هم خالی کن.

 

دیگه فکر نمیکنم مورد دیگه ای مونده باشه، میتونید دموی آنلاین رو ببینید و اگر نیاز داشتید دانلود کنید.

موفق و پاینده باشید.

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۸

  • درود

    آقای همت یار واقعا لطف کردید، خیلی سپاسگذارم، فقط اگر لطف کنید بگید چطور کد رو تغییر بدم که مثل فرم لاگین جیمیل به اطراف حرکت کنه نه اینکه در جا بلرزه (منظورم اینه که به چپ و راست حرکت کنه)

    • سلام دوست عزیز
      راستش رو بخواین من تو جیمیل ندیدم که همچین افکتی باشه ولی توی وردپرس هست.

  • والا قبلاٌ داست این حالت Shake رو ، خب وردپرس هم خوبه ، میشه بگید چجوری مثل اون در بیارم فرمم رو ؟

    • سلام دوست عزیز
      این روهم باید طی یک مقاله آموزشی تو سایت قرار بدم.
      موفق و پاینده باشید

    • سلام دوست عزیز
      توی css نمیتونید validation رو بررسی کنید حتما باید از جی کوئری استفاده بشه ، حالا میتونید یه css در نظر بگیرید و تو جی کوئری به اون المان اختصاص بدید، اما با animate css نمیشه.
      موفق و پاینده باشید

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

    • سلام دوست عزیز
      شما باید از popup های جی کوئری استفاده کنید.
      موفق و پاینده باشید

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

اموزش تصادفی