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

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



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

datedropper : پلاگین jQuery مدیریت تاریخ برای input

2 1381 ۲۱ اسفند ۹۳

در این مطلب میخوام یک پلاگین jQuery بنام datedropper رو خدمت شما معرفی کنم و اونو آموزش بدم.

datedropper

با استفاده از این پلاگین میتونین مقدار تاریخ مورد نظرتون رو با استایلی بسیار زیبا انتخاب کنید و رضایت کاربران رو جلب کنید. این ابزار امکانات زیادی رو در اختیار شما قرار میده و از مرورگرهای جدید و IE9 به بالا هم پشتیبانی میکنه.

میبینید که اگر بر روی input کلیک کنید ، یک بخش باز میشه و میتونین تاریخ مورد نظرتون رو انتخاب کنید و با زدن تیک ، اون رو در input قرار بدین.

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

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به datedropper.css و jquery.min.js و datedropper.min.js نیاز داریم. من این فایلهارو در انتهای این مطلب قرار دادم و میتونین از اونا استفاده کنید.

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

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای HTML و CSS مورد نظر رو نوشتیم.

اولین کاری که باید انجام بدین اینه که یک input از نوع text با id = departure قرار بدین. بصورت زیر :

بعد از اون باید در تگ اسکریپت نهایی ، کد زیر رو قرار بدین :

میبینید که ابتدا input رو انتخاب کردیم و متد dateDropper رو برای اون فراخوانی کردیم. بهمین سادگی. تا اینحا اگر در خروجی ببینید ، تنظیمات پیش فرض اعمال شده هست. این متد ، ویژگی های زیادی داره که چنتا از مهمتریناش رو در اینجا میارم :

 توضیح هر کدام :

  • placeholder : میتونین متن placeholder درون input رو تغییر بدین
  • minYear : کمترین سال موجود در این ابزار رو مشخص میکنه
  • animation : میتونین نوع انیمیشن در موقع باز شدن رو انتخاب کنید که سه حالت dropdown و bounce و fadein رو قبول میکنه
  • color : رنگ کلی و پایه ابزار
  • textColor : رنگ نوشته ها
  • bgColor : رنگ پس زمینه
  • borderColor : رنگ border
  • borderRadius : میزان گردی گوشه ها

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

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

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

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

  • ‏‏
    محمدحسین(۲۳ اسفند ۱۳۹۳)

    تاریخش فارسی باشه خوبه

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram