پلاگین TickBox در jQuery

  • آپدیت شده در تاریخ

TickBox در jQuery یک نوع از پاپ آپ های نمایشی است که در داخل مرورگر به صورت یک باکس همراه با دکمه خروج و یا تایید و … نشان داده می شود .

TickBox ها می توانند بر اساس رویدادهایی مثل Click , MouseDown , hover و… نمایش داده شوند .

 

قابلیت های TickBox در jQuery

زمانی که TickBox نمایش داده می شود , صفحه بکگراند غیرفعال و تا زمانی که کاربر Tickbox را نبندد , اجازه استفاده از صفحه را نمی دهد.

این پاپ آپ ها حتی زمانی که صفحه اسکرول می شود در جای خود و همراه با شما اسکرول می شود و موقعیت خود را از دست نمی دهند .

Tickbox می تواند یک گالری تصویر , HTML , iFrame , درخواست AJAX و غیره .. باشد.

می تواند داده های داینامیک را نیز نمایش دهد .

پلاگین TickBox در jQuery

پیاده سازی TickBox در jQuery

برای پیاده سازی TickBox در پروژه نیاز به سه مرحله زیر داریم.

  • دانلود کتابخانه jQuery و فایل های TickBox
  • فایل جاوااسکریپت TickBox را باز کرده و مسیر لودر تصویر را مشخص کنید.
  • کتابخانه jQuery و فایل های TickBox را در بخش <head> لود کنید.

بعد از آن نیاز داریم که المنت HTML را با خصوصیات name و value برای نمایش TickBox مشخص کنید .

مثال : نمایش TickBox به همراه تصویر

در این مثال , ما TickBox را به یک تگ <a> اختصاص دادیم . و یک تگ <img> برای نمایش تصویر نیز اضافه کردیم .

خروجی نمایش TickBox

 پلاگین TickBox در jQuery

نکته : اگر هیچ طول و عرضی برای تصویر مشخص نکنید  بطور پیش فرض, در اندازه ۶۳۰x440 px نمایش داده خواهد شد.

امیدوارم از آموزش اضافه کردن محتوا در jQuery استفاده مفید را برده باشید و بتوانید بصورت موثر در پروژه های تحت وب خود استفاده کنید.

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

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید.

حسن شفیعی توسعه دهنده وب و موبایل مدیر سایت علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم. اگر نیاز به برنامه نویس برای انجام پروژه و نوشتن اسکریپت های سمت وب, اپلیکیشن های اندروید و ios, پیدا کردن راه حل توسعه و غیره داشتید حتما از طریق تماس با ما/ واتساپ/ تلگرام بهم پیام بدید. برایتهیه هاست مطمین و پرسرعت کلیک کنید
مطالب زیر را حتما بخوانید
دیدگاه کاربران

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

دوره های آموزشی