labelBetter : پلاگینی برای ظاهر زیباتر label و placeholder

- visibility ۲ mode_comment

در این مطلب میخوام پلاگینی از jQuery رو بهتون معرفی کنم که با استفاده از اون میتونین رابطه ی زیبایی بین placeholder و label ایجاد کنید. حجم این پلاگین تقریبا 4 کیلوبایت هست. پشتیبانی این پلاگین از مرورگرها نسبتا خوبه و در هر مرورگری که از CSS3 و HTML5 پشتیبانی میکنه ، بخوبی اجرا میشه. این پلاگین بر روی IE10+ بخوبی کار میکنه.

میبینید که زمانی بر روی input فوکوس میکنید ، placeholder با ظاهر زیبایی تبدیل به label میشه.

برای شروع باید به صفحه مربوطه در سایت Github برین و فایلهای مورد نظر رو دانلود کنید. ما در این مطلب فقط به فایل jquery.label_better.min.js نیاز داریم. به خود کتابخانه ی jQuery هم نیاز داریم. من این فایل رو در انتهای همین مطلب قرار دادم و شما میتونین اونو دانلود کرده و ازش استفاده کنید.

نحوه استفاده :

ابتدا یک فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

تا اینجا فقط کدهای HTML و CSS رو قرار دادیم و ظاهر رو مشخص کردیم. در انتها هم کدهای Javascript رو به فایلمون اضافه کردیم و در انتها هم یک تگ باز و بسته ی script قرار دادیم که میتونیم در اون کدهای مورد نظر خودمون رو قرار بدیم.

برای شروع میایم و به input های خودمون کلاس label_better رو اضافه میکنیم :

حالا در انتها و در بین تگ باز و بسته ی script کدهای زیر رو قرار میدیم :

 توضیحات کد بالا :

  • position : با استفاده از این خاصیت میتونین مشخص کنید که بعد از focus کردن بر روی input ، لیبل ( label ) در کجا قرار بگیره. میتونین  مقدار top و left و right و bottom رو به این خصوصیت بدین. مقدار پیش فرض این خصیصه برابر با top هست.
  • animateTime : با استفاده از این ویژگی میتونین زمان انیمیشن رو مشخص کنید. این مقدار بر حسب میلی ثانیه هست. مقدار پیش فرض این مقدار 500 یا نیم ثانیه هست.
  • easing : با استفاده از این ویژگی میتونین نوع انیمیشن رو مشخص کنید. مقادیری همچون ease و linear و bounce و .... رو میتونین به این ویژگی نسبت بدین. مقدار پیش فرض این ویژگی ease-in-out هست.
  • offset : با استفاده از این ویژگی میتونین فاصله بین label تا input را بر حسب پیکسل مشخص کنید. مقدار پیش فرض این ویژگی 20 هست.
  • hidePlaceholderOnFocus : این خاصیت مشخص میکنه که ، هر زمان بر روی input فوکوس شد ، placeholder مخفی بشه یا نه. مقدار پیش فرض این ویژگی true هست.

کارایی که در بالا انجام دادیم روی همه ی input هایی که کلاس label_better دارن ، اعمال میشه. حالا فرض کنید بخواین یکی از input ها با بقیه فرق داشته باشه و مثلا label در پایین باز بشه. در این مواقع میتونین از خاصیت data-position استفاده کنید و مکانش رو مشخص کنید. بصورت زیر :

همچنین میتونین کاری کنید که ، متن placeholder و label با هم یکسان نباشند. برای اینکار میتونین از خاصیت data-new-placeholder استفاده کنید. بصورت زیر :

برای مطالعه بیشتر میتونین به این لینک برید.

امیدوارم بدردتون بخوره.

موفق باشید. یا علی

comment دیدگاه کاربران
حمید تیموری

جالبه!

محمد اسفندیاری

موفق باشید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.