معرفی پلاگین Mask جی کوئری برای مدیریت بهتر فرم‌ها

پلاگین Mask راه حل خوبی هست برای ساخت فرم‌هایی که کاربر راحت‌تر، سریع و صحیح تکمیل کنه و اطلاعات لازم رو به سرویس یا سایت مربوطِ بفرسته. برای مثال در نظر بگیریم که فیلد‌ها فرم ما از موارد زیر تشکیل شده. تاریخ، شماره شبا و کارت بانکی، مبلغ که دارای حد مشخصی هست و الی‌آخر. اگر بخواهیم که چنین فیلدهای رو در فرم به صورت مرسوم قرار بدهیم، هم مدیریت ارسال محتوی از سمت کاربر به سرور کمی مشکل هست و هم اینکه کاربر تا مجبور نباشه فرم‌ها رو درست پر نمیکنه (یکم حق بدیم واقعا کار سختیِ 🙂 ).

برای رفع این مشکل پلاگین‌های زیادی وجود داره یه کی از اونها پلاگین Mask هست که مربوط به کتابخانه جی کوئری هست. برای شروع سورس پلاگین رو میتونم از صفحه گیت هاب دریافت کنید و فایل js که داخل پوشه dist قرار داره رو در فایل مربوطه (html) خودتون فراخوانی کنید. مثل تصویر زیر:

بعد از این که فایل جاوااسکریپ رو فراخوانی کردیم، باید برای inputهای که مد نظرم هستن ساختار متانسبشون رو درست کنیم. برای مثال من می‌خوام توی فرمی که آماده می‌کنم کاربر شناسه شبا، شماره کارت بانکی و تاریخ ابطال کارت و شماره تلفنش رو وارد کنه. برای چنین کاری در تصویر زیر مشخص شده که چه باید کرد.

و حالا نوبت نوشتن کدها html فرم میرسه. که باید دوکار رو بکنیم.

  1. قرار دادن اسلایل مربوطه برای مثال (shaba.) در کلاس input
  2. دادن مقدار پیش فرض برای placeholde

برای مدیریت فرم راه حل های فراوانی وجود داره. اگر شما هم از راه‌حل دیگه‌ای رو استفاده می‌کنید. خیلی خوشحال می‌شیم با ما به اشتراک بگذارید.

بنیامین نجفی

کل جریان من و طراحی از نوشتن شروع شد. اینقدر شوق نوشتن و وبلاگنویسی رو داشتم که کم‌کم برای تغییرات وبلاگ‌هام مجبور شدم چیزای در مورد طراحی یاد بگیرم. اگر میخواید سر حرف رو با من باز کنید، کتاب بهترین موضوعِ.

همچنین ممکن است دوست داشته باشید ...

یک واکنش

  1. وحید گفت:

    خیلی خوب بود

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *