自定义，添加 ToC 和索引控件

在我们的应用程序中，有时需要自定义一些控件以增强用户体验。在此文中我们将介绍如何自定义添加 Table of Contents（ToC）和索引控件。

Table of Contents

Table of Contents（ToC）通常用于长文本或文档中，旨在快速查看和找到关键信息。要添加 ToC 控件，请遵循以下步骤：

1. 定义 HTML 结构和 CSS 样式，如下所示：

   <div class="table-of-contents">
       <p class="title">Table of Contents</p>
       <ul class="toc-list">
           <li><a href="#section-1">Section 1</a></li>
           <li><a href="#section-2">Section 2</a></li>
           <li><a href="#section-3">Section 3</a></li>
       </ul>
   </div>
   
   <style>
   .table-of-contents {
       width: 200px;
       position: fixed;
       top: 100px;
       right: 50px;
       border: 1px solid #ccc;
       background-color: #f8f8f8;
       padding: 10px;
   }
   
   .title {
       font-weight: bold;
   }
   
   .toc-list {
       list-style: none;
       padding-left: 0;
   }
   
   .toc-list li {
       margin-top: 10px;
   }
   
   .toc-list li a {
       color: #333;
       text-decoration: none;
   }
   </style>
   

   你可以根据自己的需要修改容器的大小和位置，也可以调整标题和列表项的样式。

2. 然后，将以下 JavaScript 代码添加到页面中：

   function generateToc() {
       var headings = document.querySelectorAll("h1, h2, h3, h4, h5, h6"),
           tocList = document.querySelector(".toc-list");
   
       for (var i = 0; i < headings.length; i++) {
           var heading = headings[i];
   
           if (!heading.id) {
               heading.id = "section-" + i;
           }
   
           tocList.innerHTML += "<li><a href='#" + heading.id + "'>" + heading.innerText + "</a></li>";
       }
   }
   
   window.onload = generateToc;
   

   此代码片段将遍历页面上的所有标题，并创建一份 ToC。每个列表项都链接到其对应的标题。

3. 最后，你需要在你的页面上包含这些标题。每个标题的 ID 将用于创建目录项的链接。示例如下：

   <h1 id="section-1">Section 1</h1>
   <p>内容</p>
   
   <h2 id="section-2">Section 2</h2>
   <p>内容</p>
   
   <h2 id="section-3">Section 3</h2>
   <p>内容</p>
   

   运行你的页面，你将看到类似这样的 ToC。

   

索引控件

索引控件是帮助用户快速定位和查找信息的另一种方式。如果你有一个大量记录的列表并且需要用户快速找到信息，那么索引控件是一个不错的选择。以下是添加索引控件的方法：

1. 定义 HTML 结构和 CSS 样式，如下所示：

   <div class="index-container">
       <ul class="index-list">
           <li><a href="#a">A</a></li>
           <li><a href="#b">B</a></li>
           <li><a href="#c">C</a></li>
           <!-- ... -->
           <li><a href="#z">Z</a></li>
       </ul>
   </div>
   
   <style>
   .index-container {
       width: 200px;
       position: fixed;
       bottom: 0;
       right: 50px;
       border: 1px solid #ccc;
       background-color: #f8f8f8;
       padding: 10px;
   }
   
   .index-list {
       list-style: none;
       padding-left: 0;
   }
   
   .index-list li {
       display: inline-block;
       margin-right: 10px;
   }
   
   .index-list li a {
       color: #333;
       font-weight: bold;
       text-decoration: none;
   }
   </style>
   

2. 然后，将以下 JavaScript 代码添加到页面中：

   function generateIndex() {
       var indexList = document.querySelector(".index-list"),
           alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
   
       for (var i = 0; i < alphabet.length; i++) {
           var letter = alphabet[i];
   
           indexList.innerHTML += "<li><a href='#" + letter + "'>" + letter + "</a></li>";
       }
   }
   
   window.onload = generateIndex;
   

   此代码将在你的索引控件中创建每个字母的链接。

3. 你需要为页面上每个可索引项创建 ID 属性。比如，如果有一个名为 "Apple" 的项目，你应该将其添加到页面，如下所示：

   <h2 id="a">A</h2>
   
   <h3 id="apple">Apple</h3>
   <p>Apple 是一种水果。</p>
   

   运行你的页面，你将看到如下所示的索引控件。

   

结论

以上就是自定义添加 ToC 和索引控件的方法。通过在我们的应用程序中添加这些控件，我们可以帮助用户快速查找和定位关键信息，提高应用程序的易用性和可访问性。