طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

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


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

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

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

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

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

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

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

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

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

حتما بخوانید  ساخت لیست آبشاری به همراه چک باکس با jQuery

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

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

 

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

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

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

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

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

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

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

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

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



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

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

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

افزایش امنیت سایت

مجوزهای ما

logo-samandehi

بخش کاربران

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

دانلود کتاب

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