إعادة ضبط علامات التبويب وتغيير حجم النافذة باستخدام جافا سكريبت

مقدمة

التعامل مع واجهات المستخدم في تطبيقات الويب يتطلب أحيانًا تغييرات ديناميكية لضمان تجربة مستخدم سلسة ومريحة. واحدة من هذه التغيرات هي إعادة تعيين علامات التبويب (tabs) إلى حجمها الافتراضي عند تغيير حجم نافذة المتصفح. في هذا المقال، سنتناول كيفية استخدام JavaScript لتحقيق ذلك، مع التركيز على كيفية استخدام ResizeObserver لمراقبة تغييرات حجم النافذة بشكل فعال.

استخدام JavaScript لإعادة تعيين علامات التبويب

عند إنشاء واجهات تفاعلية، تعتبر علامات التبويب جزءًا أساسيًا يُستخدم لتنظيم المحتوى. لكن يجب التأكد من أن هذه العلامات تظل مرئية وسهلة الاستخدام، حتى عند تغير حجم نافذة المتصفح. هنا يأتي دور JavaScript، والذي يتيح لنا التحكم في سلوك هذه العلامات.

إعداد علامات التبويب

أول خطوة هي تعريف العناصر الخاصة بعلامات التبويب والمحتوى المرتبط بها. يمكن القيام بذلك باستخدام document.querySelectorAll لجلب العناصر المطلوبة، وتحويلها إلى مصفوفة لتسهيل التعامل معها.

let tabs = document.querySelectorAll(".tabs li");
let tabsArray = Array.from(tabs);
let divs = document.querySelectorAll(".two, .one, .three");
let divsArray = Array.from(divs);

إضافة الأحداث على علامات التبويب

لجعل علامات التبويب تفاعلية، نحتاج إلى إضافة أحداث click لكل علامة تبويب. عندما ينقر المستخدم على أي علامة، نقوم بإزالة الفئة active من جميع العلامات الأخرى، ثم نضيفها إلى العلامة التي تم النقر عليها ونعرض المحتوى المناسب.

tabsArray.forEach((ele) => {
    ele.addEventListener("click", function(e) {
        tabsArray.forEach((ele) => {
            ele.classList.remove("active");
        });
        e.currentTarget.classList.add("active");
        divsArray.forEach((div) => {
            div.style.display = "none";
        });
        document.querySelector(e.currentTarget.dataset.content).style.display = "block";
    });
});

مراقبة حجم النافذة

للتعامل مع تغييرات حجم النافذة، نستخدم ResizeObserver, وهي واجهة توفر وسيلة لمراقبة قياسات عنصر معين. يمكنها تنبيهنا عند تغييرات الحجم، مما يتيح لنا إعادة تعيين الحالة الافتراضية لعناصر واجهة المستخدم.

const element = document.querySelector('.tabs');
const observer = new ResizeObserver(entries => {
    for (let entry of entries) {
        const width = entry.contentRect.width;
        // المنطق لإعادة تعيين الحالة الافتراضية
    }
});
observer.observe(element);

استنتاج

باستخدام JavaScript ومراقبة حجم النافذة، يمكننا خلق واجهة مستخدم ديناميكية تتكيف مع حجم الشاشة. في حال تم تغيير حجم النافذة، يمكن للمستخدم العودة إلى حالة العلامات الافتراضية بسهولة. تعتبر هذه التقنية ضرورية لضمان تجربة مستخدم مرضية.

خاتمة

باختصار، تعد القدرة على إعادة تعيين علامات التبويب إلى حجمها الافتراضي عند تغيير حجم نافذة المتصفح أمرًا بالغ الأهمية في تصميم واجهات الاستخدام. كما يساعد استخدام تقنيات مثل ResizeObserver في تحسين الأداء وتقديم تجربة مستخدم سلسة. المضي قدمًا، يمكن لمطوري الويب الاستفادة من هذه المفاهيم لتطوير تطبيقات أكثر تفاعلية وملاءمة لمختلف أحجام الشاشات.

بهذه الطريقة، نكون قد وضحنا كيفية استخدام JavaScript لتحقيق تجربة مستخدم ديناميكية ومرنة، مما يسهل على المتصفح التعامل مع مختلف أحجام المحتوى بشكل فعال.