İnteraktiv elementlər

6.1 <details> Tegi

HTML5 <details> və <summary> elementlərini əlavə edib, bunlar interaktiv açılıb-yığılan bloklar yaratmaq üçün nəzərdə tutulub. Bu elementlər istifadəçilərə məzmunu açıb-yığmağa imkan verir, istifadəçi ilə qarşılıqlı əlaqəni yaxşılaşdırır və veb-səhifədə yerə qənaət etməyə kömək edir.

<details> elementi açılıb-yığılan blok yaratmaq üçün istifadə olunur. Onun daxilində hər hansı HTML məzmununu yerləşdirmək olar. Açıldığında <details> daxil edilmiş məzmunu göstərir, yığıldığında isə gizlədir.

Sintaksis:

    
      <details>
        <summary>Başlıq</summary>
        <!-- Gizli məzmun -->
      </details>
    
  

open atributu:

Əgər atribut mövcuddursa, <details> bloku avtomatik olaraq açıq vəziyyətdə olacaq.

<details> istifadəsi üçün nümunə

    
      <details open>
        <summary>Əsas Məlumat</summary>
        <p>Bu məlumat atribut open təyin edildiyinə görə avtomatik olaraq görünür.</p>
      </details>
    
  

İzah

• <details>: Gizli məzmun üçün konteyner yaradır.
• <summary>: Həmişə görünən və üzərinə klik etməklə məzmunu açıb-yığmağa imkan verən başlığı təyin edir.

6.2 <summary> Taqı

<summary> elementi <details> daxilində başlıq yaratmaq üçün istifadə olunur. Bu başlıq həmişə görünəndir və <details> blokunun məzmununu açıb bağlamaq üçün idarəetmə elementi kimi xidmət edir.

Sintaksis:

    
      <details>
        <summary>Başlıq</summary>
        <!-- Gizli məzmun -->
      </details>
    
  

İstifadə nümunəsi:

    
      <details>
        <summary>Ətraflı</summary>
        <p>Bu gizli məzmundur və blok açıldığında görünür.</p>
      </details>
    
  

<details> və <summary> istifadə üstünlükləri

1. İstifadəçi təcrübəsinin yaxşılaşdırılması: istifadəçilər hansı məzmunu görmək istədiklərinə özləri qərar verə bilirlər.
2. Yerə qənaət: böyük miqdarda məlumatın interaktiv başlıqlar altında gizlədilməsi.
3. Semantik işarələmə: HTML sənədinin strukturunun yaxşılaşdırılması və onun istifadəçilər və axtarış sistemləri üçün əlçatanlığının artırılması.

6.3 JavaScript ilə qarşılıqlı təsir

<details> və <summary> elementlərini JavaScript vasitəsilə asanlıqla idarə etmək olar, daha interaktiv veb-səhifələr yaratmaq üçün.

JavaScript-dən istifadə nümunəsi:

    
      <details>
        <summary>Daha ətraflı</summary>
        <p>Bu, blokun açılması zamanı görünən gizli məzmundur.</p>
      </details>
      <details open>
        <summary>Əsas məlumatlar</summary>
        <p>Bu məlumatlar默认 olaraq görünür, çünki open atributu təyin edilib.</p>
      </details>
      <button id="toggleDetails">Qapama/Açma</button>
    
  

    
      // 'toggleDetails' id-li düyməni tapırıq və 'click' hadisəsini əlavə edirik
      document.getElementById('toggleDetails').addEventListener('click', () => {
        // Səhifədəki bütün 'details' elementlərini tapırıq
        document.querySelectorAll('details').forEach(detail => {
          // Hər bir 'details' elementinin 'open' xüsusiyyətinin dəyərini invert edirik
          detail.open = !detail.open; 
        });
      });
    
  

İzah:

• "Qapama/Açma" düyməsi: səhifədəki bütün <details> elementlərinin vəziyyətini idarə edir
• Click hadisəsi: bütün <details> elementlərinin open atributunu dəyişir