برنامه نویسی 39 بازدید

در این راهنما در مورد روش ساخت یک کامپوننت برگه واکنش‌گرا با CSS و کد جاوا اسکریپت توضیح می‌دهیم. البته ساخت چنین برگه‌ای با استفاده صرف از CSS نیز امکان‌پذیر است؛ اما در این مثال سعی می‌کنیم از مهارت‌های جاوا اسکریپت خود نیز کمک بگیریم. در بخش زیر می‌توانید آن چه را که می‌خواهیم در چند مرحله طراحی کنیم می‌بینید:

توجه کنید که در این راهنما به بحث چگونگی دسترسی به برگه‌ها نمی‌پردازیم، چون این موضوع خود یک راهنمای مستقل را می‌طلبد.

کد HTML

در آغاز زبان نشانه‌گذاری را بررسی می‌کنیم. ما یک کانتینر داریم که شامل خود برگه‌ها (آیتم‌های لیست) است و همچنین محتوایی برای هر برگه (پنل‌های برگه) داریم. برای ایجاد ارتباط بین برگه و پنل مربوطه از خصوصیت سفارشی data-index استفاده کرده‌ایم که یک مقدار منحصر به فرد برای هر پنل برگه نگه‌داری می‌کند. از آنجا که شماره‌گذاری از صفر آغاز می‌شود یک پنل به صورت data-index=0 مربوط به برگه اول است. پنل دارای data-index=1 مربوط به پنل دوم است و همین طور تا آخر.

محتوای نشانه‌گذاری HTML به صورت زیر است:

کد  CSS

در مرحله بعدی چند قاعده CSS برای کامپوننت خود تعریف می‌کنیم. البته ظاهر چندان جذابی ندارد و تنها از چند سبک پایه استفاده کرده‌ایم. نکته‌ای که باید توجه داشته باشید این است که از هیچ ترانزیشنی همچون فید شدن یا اسلاید برای تغییر بین پنل‌های برگه نباید استفاده کنید، به جای آن می‌توانید از یک سوئیچ on/off ساده برای وضعیت نمایش/پنهان پنل‌ها استفاده می‌کنیم.

سبک‌های ابتدایی را در ادامه ارائه کرده‌ایم:

کد جاوا اسکریپت

با طراحی HTML و CSS اینک زمان آن رسیده که کد جاوا اسکریپت را بنویسیم. هر بار که روی یک برگه کلیک می‌کنیم، اتفاقات زیر رخ می‌دهند:

  • کلاس active از برگه مربوطه (به صورت پیش‌فرض روی برگه اول است) و از پنل برگه مربوطه (باز هم پیش‌فرض روی پنل اول است) حذف می‌شود.
  • والد li این برگه پیدا می‌شود و کلاس active به آن اضافه می‌شود و اندیس آن بازیابی می‌شود.
  • پنل برگه‌ای که مقدار خصوصیت مربوطه را دارد با اندیس فوق‌الذکر تطبیق می‌یابد و کلاس active به آن انتساب می‌یابد.

کد حاصل جاوا اسکریپت به صورت زیر خواهد بود:

 واکنش‌گرایی

کامپوننت ما اینک آماده است. آخرین کاری که می‌خواهیم انجام دهیم واکنش‌گرایی این کامپوننت است. بدین ترتیب وقتی پنجره ما بیشینه عرض 600 پیکسل دارد، کامپوننت ما باید فشرده شود و به صورت زیر در آید:

با توجه به این که ما از رویکرد دسکتاپ-نخست استفاده می‌کنیم، قواعد CSS وجود دارند که باید بازنویسی شوند:

دموی ما بر روی مرورگرها و دستگاه‌های جدید به خوبی کار می‌کند. اما باید این کد ES6 را به کد ES5 نیز کاهش دهیم تا سازگاری آن را بررسی کنیم.

سخن پایانی

در این راهنمای کوتاه تلاش کردیم تا یک کامپوننت برگه واکنش‌گرای مفید را با استفاده از HTML، CSS و جاوا اسکریپت بسازیم. با این که این کامپوننت کامل است، ولی هنوز هم می‌توان آن را تکمیل کرد. در صورت علاقه می‌توانید روی آن کار کنید و جنبه‌های مختلف کارکردی آن را ارتقا دهید.

اگر این نوشته مورد توجه شما قرار گرفته است، پیشنهاد می‌کنیم موارد زیر را نیز بررسی کنید:

==

آیا این مطلب برای شما مفید بود؟

نظر شما چیست؟

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