آموزش پلاگین و افکت لرزش فرم

افکت لرزش فرم ، خوب تو این پست قصد کردم یه آموزش و پلاگین جالب واسه فرم ها بزارم البته پلاگین js هست نه پلاگین وردپرس! خوب با این پلاگین که در آخر لینک دانلودش رو هم واستون میزارم می تونید افکت لرزش رو به فرم خودتون اضافه کنید تا اگه کسی فرم رو اشتباه پر کرد یا یه قسمتی از اون رو پر نکرد فرم به لرزه در بیاد خوب پس بریم سراغ آموزش :
در ابتدای کار کتابخانه جی کوئری و پلاگین مورد نظر رو در صفحه فراخوانی می کنیم:
<script src="jquery.min.js"></script> <script src="vibrate.js"></script>
سپس یک فرم طراحی می کنیم که در این مثال فرم لاگین طراحی کردیم:
<div id="login"> <h3>روی دکمه ی ورود کلیک کنید</h3> <form action="" method="post" id="loginform"> <label for="username">نام کاربری :</label> <input type="text" name="username" id="username" /> <label for="pwd">رمز عبور:</label> <input type="password" name="pwd" id="pwd" /> <input type="button" name="Submit" id="submit_butt" value="ورود به مدیریت" /> </form> </div>
لایه ی اصلی رو با شناسه ی login و فرم رو با شناسه ی loginform نامگذاری میکنیم. همچنین فیلد نام کاربری رو با شناسه ی username و فیلد رمز عبور رو با شناسه ی pwd نامگذاری میکنیم. برای دکمه ی ارسال هم شناسه ی submit_butt در نظر میگیریم.
حالا برای ایجاد افکت لرزش از کد جی کوئری زیر استفاده می کنیم:
<script> $(document).ready(function() { $("#submit_butt").click( function() { var conf = { frequency: 5000, spread: 5, duration: 500 }; $("#login").vibrate(conf); if($("#errormsg").text() == "") $("#loginform").append('<p id="errormsg"> نام کاربری / رمز عبور اشتباه وارد شده است. </p>'); $("#username").val(""); $("#pwd").val(""); }); }); </script>
زمانی که شما روی دکمه با شناسه ی submit_butt کلیک کنید، این تکه کد اجرا میشه.
از frequency میتونید استفاده نکنید، با spread شدت لرزش رو مشخص می کنیم، با duration بازه ی زمانی این افکت رو مشخص می کنیم مثلا میگیم به مدت ۵ دهم ثانیه به لرزش دربیاد.
تمامی زمان هارو به میلی ثانیه وارد کنید، مثلا ۵۰۰۰ یعنی ۵ ثانیه .
بعد از تعریف conf مورد نیازمون گفتیم لایه ای که با شناسه ی login معرفی کردیم با کانفیگ conf به لرزش دربیاد.
در مرحله ی بعد میگیم اگر فیلد پیغام خطا یعنی errormsg خالی بود پیغام مورد نظر رو در این کادر نمایش بده. همچنین تمامی محتوای داخل فیلدهای نام کاربری و رمز عبور رو هم خالی کن.
منبع: مدرسه مجازی ایرانیان . کام
سلام خدمت شما، در خدمتتون هستم
سلام خدمت شما، در خدمتتون هستم
-
چگونه از غول های فارسی بک لینک رایگان بگیریم ؟!!!
15 فروردين 140418 1,296 0 -
افزونه پنل کاربری حرفه ای و بهترین افزونه ثبت نام وردپرس MemberShip Pro درگاه زرین پال
12 شهريور 139915 5,338 5 -
افزایش سرعت بارگذاری – بهترین افزونه های کش وردپرس
20 آذر 139314 317 0 -
دانلود افزونه Gravity Forms : ساخت انواع فرم های وردپرس
27 آذر 139313 407 0 -
ارسال خودکار مطالب وردپرس به تلگرام، اینستاگرام و سایر شبکههای اجتماعی
1 ارديبهشت 14049 3,553 0 -
آموزش قرار دادن سه نقطه برای متن های بسیار طولانی در وب سایت
8 تير 13969 1,806 3 -
معرفی 7 افزونه ساخت سایت مشاور املاک وردپرس
21 ارديبهشت 14049 2,979 4.8 -
آموزش افزونه حتما بخوانید وردپرس
25 بهمن 13958 395 5
-
6 افزونه رمزگذاری لینک دانلود در وردپرس + مقایسه + آموزش WordPress Download Manager
7 خرداد 14040 457 0 -
معرفی افزونههای ریست کامل سایت وردپرس + مقایسه + آموزش
6 خرداد 14040 283 0 -
معرفی افزونههای جلوگیری از نظرات اسپم و هرزنامه در وردپرس + مقایسه + آموزش
6 خرداد 14040 274 0 -
دامین اتوریتی چیست و چگونه آن را افزایش دهیم؟ + افزایش اعتبار دامنه و پیج اتوریتی (Domain Authority)
5 خرداد 14040 296 0 -
چگونه بر فعالیت کاربران سایت وردپرس نظارت کنیم؟ | ردیابی و بررسی رفتار کاربر در وردپرس
5 خرداد 14040 291 0 -
چگونه خطای Missed Schedule در وردپرس را حل کنیم؟ | ارور زمانبندی از دست رفته
4 خرداد 14040 21 0 -
چگونه خطای سرچ کنسول گوگل با عنوان “Clickable Elements Too Close Together” را در المنتور حل کنیم؟
4 خرداد 14040 34 0 -
چگونه مشکل لود نشدن المنتور را حل کنیم؟ | 5 روش حل خطا لودینگ و باز نشدن المنتور
3 خرداد 14040 36 0
تبلیغات متنی
به این مطالب نیز شاید علاقه مند باشید ...
مطالب مشابه
چطور با تبلیغات گوگل مشتریانی پیدا کنید که واقعا خریدارند؟
تصور کنید بودجه تبلیغاتی خود را صرف یک کمپینی کردید که فقط بازدیدکننده میآورد، اما هیچکس از شما خرید نمیکند. به نظر شما این ناامید کننده نیست؟ تبلیغات گوگل ادز میتواند کسب و کار شما را به مشتریان واقعی و آماده خرید متصل کند؛ به شرطی که استراتژی درستی داشته باشید. این ابزار قدرتمند به شما این […]
6 افزونه رمزگذاری لینک دانلود در وردپرس + مقایسه + آموزش WordPress Download Manager
معرفی افزونههای رمزگذاری لینک دانلود در وردپرس در دنیای دیجیتال امروز، اگر فایلی برای دانلود در سایت وردپرسی خود قرار میدهید، حتماً با دغدغهی امنیت و مدیریت دسترسی مواجه شدهاید. بسیاری از مدیران وبسایتها به دنبال راهی برای رمزگذاری لینک دانلود در وردپرس هستند تا فقط کاربران مجاز بتوانند به فایلهای خاص دسترسی پیدا کنند. […]
معرفی افزونههای ریست کامل سایت وردپرس + مقایسه + آموزش
معرفی افزونههای ریست کامل سایت وردپرس در برخی شرایط، مخصوصاً هنگام طراحی، تست یا رفع خطاهای مختلف، ممکن است نیاز به ریست کامل سایت وردپرس داشته باشید. این کار با استفاده از افزونه ریست سایت وردپرسی به سادگی قابل انجام است. ریست کردن باعث میشود تمام محتواها، تنظیمات و دادههای سفارشی حذف شده و سایت […]
معرفی افزونههای جلوگیری از نظرات اسپم و هرزنامه در وردپرس + مقایسه + آموزش
معرفی افزونههای جلوگیری از نظرات اسپم و هرزنامه در وردپرس نظرات اسپم یکی از چالشهای بزرگ برای صاحبان وبسایتهای وردپرسی است. این دیدگاههای ناخواسته علاوه بر تأثیر منفی بر سئو، باعث اشغال منابع سرور و کاهش اعتماد کاربران میشوند. خوشبختانه، افزونههای متعددی برای جلوگیری از درج کامنت اسپم در وردپرس وجود دارد که میتوانند با […]
لیست نظرات