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

در این آموزش jQuery , قصد داریم به شما نحوه تغییر رنگ قالب را توسط jQuery نشان بدیم. در این مثال ما دو دکمه مختلف داریم. یکی برای برگشت به قالب پیش فرض و دیگیری برای لیست کردن قالب ها است.از این روش در سایت های برای نمایش حالت شب (night mode) یا در قالب های پیشرفته پنل مدیریت که در گیت هاب و یا مارکت های CodeCanyon وجود دارند, استفاده می شود.در این مثال, ما سه قالب مختلف با CSS های متفاوت را داریم. ما بر اساس تغییر فایل CSS قالب مورد نظر را انتخاب می کنیم. بعد از آن نتیجه بر روی دکمه ها و لیست آبشاری ما نمایان می شود که خب شما با توجه به قالب خودتان گستردگی بیشتری روی تمام المان های صفحه خواهید داشتتوجه کنید اگر قصد استفاده در پروژه های تحت وب خود از این روش را دارید مطمینا باید از طریق کوکی ها اطلاعات قالب فعلی مربوط به کاربر را ذخیره کنید تا در سراسر صفحات وب سایت شما قالب انتخابی یکسان باشد.کد HTML برای نمایش دکمه ها

Default ThemeMore…

Mercury
Sky
Golden

12345678 Default ThemeMore… Mercury Sky Golden کد جی کوئری تغییر قالب با jQueryاین اسکریپت jQuery برای مدیریت رویداد click دکمه ها استفاده شده است. با کلیک روی “Default Theme” فایل default-theme.css اعمال می شود. و دکمه “More” لیست قالب ها را نشان می دهد. به انتخاب قالب ها , استایل دکمه ها با لود فایل CSS مورد نظر تغییر می کند.حتما بخوانید  ساخت منو ریسپانسیو با jQuery و CSS
123456789101112131415با تلفیق این روش با کوکی ها می توانید رابط کاربری لذت بخش تری را برای کاربران سایت خود ایجاد کنید.همچنین پلاگین های جی کوئری آماده زیادی هستند که این قابلیت را بصورت حرفه ای تر در اختیار شما قرار می دهند امیدوارم از آموزش تغییر قالب با jQuery نهایت استفاده را برده باشید .برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.