افکت لرزش در jQuery یا همان Shake باعث می شود که المنت HTML در جهات عمودی و افقی یک حرکت سریع و کوتاه انجام دهد . در بعضی از وبسایت ها , می توانیم افکت shake را در زمان لاگین ناموفق ببینیم.
برای پیاده سازی افکت لرزش در jQuery از کتابخانه jQuery UI بهره خواهیم برد.
در این آموزش , قصد داریم نحوه ایجاد افکت لرزش در jQuery را بر روی یک فرم لاگین هنگام وارد کردن اطلاعات غلط , نشان بدیم .
این افکت با استفاده از تابع effect() در جی کوئری ایجاد می شود .
فایل های کتابخانه بصورت زیر فراخوانی خواهد شد.
|
1 2 3 |
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-2.1.1.js"></script> <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> |
در این مثال , ما یک درخواست AJAX برای لاگین ارسال می کنیم .این اطلاعات با نام کاربری و پسورد موجود در دیتابیس بررسی می شوند . اگر اطلاعات صحیح بود به پنل کاربری ریدایرکت خواهد شد . در غیر اینصورت , افکت لرزش در jQuery به عنوان پیام ” لاگین موفقیت آمیز نبود” اجرا خواهد شد .
کد jQuery افکت shake بصورت زیر است :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function login() { $.ajax({ url: "login.php", type: "POST", data: {username:$("#username").val(),password:$("#password").val()}, success: function(data){ if(data) { window.location.href = "dashboard.php" } else { $("#login-form").effect("shake"); $("#error").html("Invalid Credentials"); } }, error: function() {} }); } |
افکت لرزش در jQuery
در مثال بالا از تابع effect() در جی کوئری با آپشن های پیش فرض استفاده کردیم . چندین آپشن مختلف وجود دارند که می توانیم آن را اعمال کنیم
- Direction – جهت لرزش المنت را مشخص می کند (vertical , hortizontal) همچنین left (پیش فرض) , right , up , down .
- Distance – محدوده لرزش را مشخص می کند . پیش فرض ۲۰ است .
- Times – تعداد لرزش را مشخص می کند . پیش فرض ۳ است .
افکت لرزش در jQuery همراه با آپشن ها
کد زیر برای کنترل افکت shake همراه با آپشن های بالا که تعریف کریم استفاده می شود
|
1 2 3 4 5 6 |
var options = { distance: '40', direction:'top', times:'2' } $("#login-form").effect("shake", options, 800); |
امیدوارم از آموزش ایجاد افکت لرزش در jQuery استفاده مفید را برده باشید.
برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق و پیروز باشید.
