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


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

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

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

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

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

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

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

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

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

حتما بخوانید  قالب HTML شرکتی کیکا (تک صفحه ای)

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

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

 

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

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

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

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

دیدگاه کاربران

دیدگاهتان را بنویسید

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

جدیدترین آموزش های آنلاین



دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

مجوزهای ما

logo-enamd
logo-samandehi

دانلود کتاب

عضویت در خبرنامه