Formatting: Manual ToC

Tentang

Formatting Manual ToC adalah format HTML untuk membuat daftar isi secara manual - (Demo). Berkaitan dengan fitur Overlay ToC, daftar isi manual akan menjadi konten yang diprioritaskan dibandingkan dengan konten yang berasal dari proses Auto Scan.

Untuk Overlay ToC, dibandingkan dengan hanya mengandalkan sistem auto scan, pembuatan daftar isi manual sangat dianjurkan agar konten yang diletakkan pada Overlay ToC sesuai dengan yang diharapkan.



Spesifikasi




Konfigurasi




Penggunaan

  1. FORMAT TANPA SUB 
          	
<div class='w-toc'>
  <ol>
    <li><a href='#target_id1'>Heading 1</a></li>
    <li><a href='#target_id2'>Heading 2</a></li>
  </ol>
</div>


    FORMAT DENGAN SUB 
          
<div class='w-toc'>
  <ol>
    <li><a href='#target_id1'>Heading 1</a></li>
    <li>
      <a href='#target_id2'>Heading 2</a>
      <ol>
        <li><a href='#target_id2_1'>Heading 2.1</a></li>
        <li><a href='#target_id2_2'>Heading 2.2</a></li>
      </ol>
    </li>
  </ol>
</div>

    Keterangan: Pada HTML di atas, item ke-2 memiliki sub. Anda juga bisa menambahkan sub lagi pada item 2.1 dan seterusnya sesuai kebutuhan.


  2. Penambahan Konfigurasi Tambahkan konfigurasi yang dikehendaki dengan cara menambahkan atribut
    data-nama-konfigurasi='Nilai' pada elemen dengan class w-toc.

    Contoh: 
            
        <div class='w-toc' data-nested-counter='no'>
          <ol>
            <li><a href='#target_id1'>Heading 1</a></li>
            <li>
              <a href='#target_id2'>Heading 2</a>
              <ol>
                <li><a href='#target_id2_1'>Heading 2.1</a></li>
                <li><a href='#target_id2_2'>Heading 2.2</a></li>
              </ol>
            </li>
          </ol>
        </div>



Lainnya

Mengatur Tipe Marker
Pada semua HTML di atas, semua item didefinisikan dengan tag OL, ini artinya marker yang digunakan pada item yang bersangkutan adalah tipe Nomor. Anda juga bisa menggunakan marker tipe bullet dengan menggunakan tag UL. 

            
            <div class='w-toc'>
              <ol>
                <li><a href='#target_id1'>Heading 1</a></li>
                <li>
                  <a href='#target_id2'>Heading 2</a>
                  <ul>
                    <li><a href='#target_id2_1'>Heading 2.1</a></li>
                    <li><a href='#target_id2_2'>Heading 2.2</a></li>
                  </ul>
                </li>
              </ol>
            </div>

Menambahkan Elemen Judul
Formatting ini hanya meng-handle elemen list. Anda bisa menambahkan elemen judul menggunakan Formatting Heading. Letakkan HTML judul tepat sebelum elemen wrapper (elemen dengan class w-toc).

Contoh: 
            
        <div class='w-heading'>
          <div class='w-title'>
            Daftar isi:
          </div>
        </div>
        <div class='w-toc'>
          <ol>
            <li><a href='#target_id1'>Heading 1</a></li>
            <li><a href='#target_id2'>Heading 2</a></li>
          </ol>
        </div>

Tentang konfigurasi nested-counter
Ketika konfigurasi nested-counter ditambahkan pada elemen wrapper, konfigurasi akan diterapkan pada semua elemen OL. Untuk mengatur nested counter pada elemen OL tertentu saja, cukup tambahkan konfigurasi pada elemen OL yang bersangkutan.

Contoh: 
            
        <div class='w-toc'>
          <ol>
            <li>
              <a href='#target_id1'>Heading 1</a>
              <ol data-nested-counter='no'>
                <li><a href='#target_id1_1'>Heading 1.1</a></li>
                <li><a href='#target_id1_2'>Heading 1.2</a></li>
              </ol>
            </li>
            <li>
              <a href='#target_id2'>Heading 2</a>
              <ol>
                <li><a href='#target_id2_1'>Heading 2.1</a></li>
                <li><a href='#target_id2_2'>Heading 2.2</a></li>
              </ol>
            </li>
          </ol>
        </div>


Ketika terdapat data-nested-counter='no' pada elemen OL, nested counter pada elemen ol yang bersangkutan serta semua subnya akan selalu dinonaktifkan. Dengan kata lain, data-nested-counter='yes' tidak bisa digunakan di dalam data-nested-counter='no'.

Tentang Target ID
Bagi anda yang belum paham tentang peranan masing-masing ID pada format di atas (target_id1, target_id2, dst), Anda bisa mengunjungi halaman: Cara membuat link menuju ke bagian tertentu.
Komentar