• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!
2 3685 ۲۱ آبان ۹۳ محمد اسفندیاری

در این مطلب میخوام پلاگینی از 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 استفاده کنید. بصورت زیر :

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

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

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

نوع کد رايگان

دیدگاه ها 2 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    حمید تیموری(۳۰ آبان ۱۳۹۴)

    جالبه!

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram