در این آموزش jQuery , قصد داریم به شما نحوه تغییر رنگ قالب را توسط jQuery نشان بدیم. در این مثال ما دو دکمه مختلف داریم. یکی برای برگشت به قالب پیش فرض و دیگیری برای لیست کردن قالب ها است.
از این روش در سایت های برای نمایش حالت شب (night mode) یا در قالب های پیشرفته پنل مدیریت که در گیت هاب و یا مارکت های CodeCanyon وجود دارند, استفاده می شود.
در این مثال, ما سه قالب مختلف با CSS های متفاوت را داریم. ما بر اساس تغییر فایل CSS قالب مورد نظر را انتخاب می کنیم. بعد از آن نتیجه بر روی دکمه ها و لیست آبشاری ما نمایان می شود که خب شما با توجه به قالب خودتان گستردگی بیشتری روی تمام المان های صفحه خواهید داشت
توجه کنید اگر قصد استفاده در پروژه های تحت وب خود از این روش را دارید مطمینا باید از طریق کوکی ها اطلاعات قالب فعلی مربوط به کاربر را ذخیره کنید تا در سراسر صفحات وب سایت شما قالب انتخابی یکسان باشد.
کد HTML برای نمایش دکمه ها
|
1 2 3 4 5 6 7 8 |
<div> <a class="theme-color" id="default-theme">Default Theme</a><a id="theme-button">More...</a> <ul id="theme-menu"> <li class="theme-color" id="mercury-theme">Mercury</li> <li class="theme-color" id="sky-theme">Sky</li> <li class="theme-color" id="gold-theme">Golden</li> </ul> </div> |
کد جی کوئری تغییر قالب با jQuery
این اسکریپت jQuery برای مدیریت رویداد click دکمه ها استفاده شده است. با کلیک روی “Default Theme” فایل default-theme.css اعمال می شود. و دکمه “More” لیست قالب ها را نشان می دهد. به انتخاب قالب ها , استایل دکمه ها با لود فایل CSS مورد نظر تغییر می کند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> $(function() { $( "#theme-button" ).click(function() { $("#theme-menu").show(); $( document ).on( "click", function() { $("#theme-menu").hide(); }); $( ".theme-color" ).on( "click", function() { var id = $(this).attr("id"); $("#theme-style").attr("href",id+".css"); }); return false; }) }); </script> |
با تلفیق این روش با کوکی ها می توانید رابط کاربری لذت بخش تری را برای کاربران سایت خود ایجاد کنید.
همچنین پلاگین های جی کوئری آماده زیادی هستند که این قابلیت را بصورت حرفه ای تر در اختیار شما قرار می دهند
امیدوارم از آموزش تغییر قالب با jQuery نهایت استفاده را برده باشید .
برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق و پیروز باشید
