50درصد تخفیف سورس فروشگاهی دیجی کالا + اپلیکیشن اندروید تا پایان این هفته - کد تخفیف : off50
با تخفیف میخرم

تغییر قالب با jQuery

  • منتشر شده در تاریخ

تغییر قالب با jQuery

در این آموزش jQuery , قصد داریم به شما نحوه تغییر رنگ قالب را توسط jQuery نشان بدیم. در این مثال ما دو دکمه مختلف داریم. یکی برای برگشت به قالب پیش فرض و دیگیری برای لیست کردن قالب ها است.

از این روش در سایت های برای نمایش حالت شب (night mode) یا در قالب های پیشرفته پنل مدیریت که در گیت هاب و یا مارکت های CodeCanyon وجود دارند, استفاده می شود.

در این مثال, ما سه قالب مختلف با CSS های متفاوت را داریم. ما بر اساس تغییر فایل CSS قالب مورد نظر را انتخاب می کنیم. بعد از آن نتیجه بر روی دکمه ها و لیست آبشاری ما نمایان می شود که خب شما با توجه به قالب خودتان گستردگی بیشتری روی تمام المان های صفحه خواهید داشت

تغییر قالب با jQuery

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

کد HTML برای نمایش دکمه ها

کد جی کوئری تغییر قالب با jQuery

این اسکریپت jQuery برای مدیریت رویداد click دکمه ها استفاده شده است. با کلیک روی “Default Theme” فایل default-theme.css اعمال می شود. و دکمه “More” لیست قالب ها را نشان می دهد. به انتخاب قالب ها , استایل دکمه ها با لود فایل CSS مورد نظر تغییر می کند.

با تلفیق این روش با کوکی ها می توانید رابط کاربری لذت بخش تری را برای کاربران سایت خود ایجاد کنید.

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

 

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

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

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

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

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران

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

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