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

بدون دیدگاه

منتشر شده توسط صالح طالبی در تاریخ ۳ دی ۱۳۹۳

JQUERY & JAVASCRIPT / آموزش

افکت لرزش فرم ، خوب تو این پست قصد کردم یه آموزش و پلاگین جالب واسه فرم ها بزارم البته پلاگین js هست نه پلاگین وردپرس! خوب با این پلاگین که در آخر لینک دانلودش رو هم واستون میزارم می تونید افکت لرزش رو به فرم خودتون اضافه کنید تا اگه کسی فرم رو اشتباه پر کرد یا یه قسمتی از اون رو پر نکرد فرم به لرزه در بیاد خوب پس بریم سراغ آموزش :

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

<script src="jquery.min.js"></script>
<script src="vibrate.js"></script>

1 2	<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>

<label for="username">نام کاربری :</label>

</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>

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

منبع: مدرسه مجازی ایرانیان . کام

دانلود با لینک مستقیم

پیشنمایش آنلاین