خبرنامه
با عضویت در خبرنامه میتوانید آخرین اسکریپــت ها و قالب ها را در ایمیل خود دریافت کنید

برای عضویت در خبرنامه پیامکی، اطلاعات خود را وارد کنید

اطلاعات مطلب

نویسنده : Mehrdad Mohammadi
تاریخ ارسال : 19 ژوئن 2015 در 4:09 ب.ظ
تعداد دیدگاه : بدون ديدگاه
دسته بندی
آمار بازدید
  • 2,815
  • 3,772
  • 749,335
  • 715
  • 99
  • 194
  • 80
  • 0
  • مارس 27, 2017
دکووب را دنبال کنید

افکت لرزش فرم

افکت لرزش فرمReviewed by مهرداد محمدی on Jun 19Rating:
[تعداد: 0    میانگین: 0/5]

login

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

سلام خدمت همراهان همیشگی سئو ورک و دکو وب

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

برای این کار از یک پلاگین 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 خالی بود پیغام مورد نظر رو در این کادر نمایش بده. همچنین تمامی محتوای داخل فیلدهای نام کاربری و رمز عبور رو هم خالی کن.

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

نظر خود را به اشتراک بگذارید