突破编程_前端_JS编程实例(目录导航)

1 开发目标

目录导航组件旨在提供一个滚动目录导航功能,使得用户可以方便地通过点击目录条目快速定位到对应的内容标题位置,同时也能够随着滚动条的移动动态显示当前位置在目录中的位置:

在这里插入图片描述

2 详细需求

2.1 标题提取与目录生成

  • 组件需要能够自动提取网页内容中的所有标题元素(如 h1, h2, h3 等)。
  • 提取的标题需要按照其在网页中的层级关系(如 h1 后面跟着的 h2 是其子章节)进行组织,形成一个目录容器。
  • 目录容器需以清晰、直观的方式展示给用户,允许用户通过点击目录条目进行导航。

2.2 滚动定位

  • 当用户在目录容器中点击某个目录条目时,网页的滚动条需要动态移动到对应的标题位置,使得该标题出现在页面的最上方。
  • 滚动过程应该平滑且快速,提升用户体验。

2.3 滚动条与目录条目交互

  • 当用户滚动网页的滚动条时,目录容器中的对应目录条目应该能够实时更新状态,以指示当前所在位置。
  • 当滚动条经过某个标题时,对应的目录条目应改变颜色(如高亮显示),以提醒用户当前的位置。

2.4 无滚动条情况处理

  • 如果网页内容较少,没有出现滚动条,那么点击目录条目时不应触发任何滚动动作。
  • 这种情况下,目录容器仍应正常显示,以供用户浏览网页内容的结构。

3 代码实现

首先创建一个 neat_directory.js 文件,该文件用于本组件的工具类、目录处理函数的代码构建。

(1)在具体的业务代码编写之前,先实现一个工具类以及一些工具方法,方便后面调用:

class CommonUtil {// 设置 DIV 中的文字为垂直居中static centerYTextInDiv(container) {container.style.display = 'flex';container.style.justifyContent = 'center';container.style.flexDirection = 'column';}// 判断 DIV 有无垂直滚动条static hasScrollbar(container) {var divStyle = window.getComputedStyle(container);var isOverflowing = container.scrollHeight > container.clientHeight;var isScrollbarVisible = isOverflowing &&(divStyle.overflow === 'scroll' || divStyle.overflow === 'auto' || divStyle.overflowY === 'scroll' || divStyle.overflowY === 'auto');return isScrollbarVisible;}
}

(2)接下来,开始定义目录节点类型,目录节点显示在目录区域:

class DirectoryNode {static LEVEL_OFFSET = 20;     // 每个级别的目录节点偏移像素static NODE_HEIGHT = '30px';     // 目录节点高度static NODE_NAME_FONTSIZE = '14px';     // 默认目录标题字符串的字体大小static NODE_NAME_COLOR = '#000';     // 默认目录标题字符串字体颜色static NODE_NAME_ACTIVE_COLOR = 'red';     // 默认目录标题在激活情况下字符串字体颜色constructor(container, para) {this.container = container;                 // 本目录节点的容器this.para = para;                           // 配置参数,包含页面内容的容器、标题容器以及标题等级等this.init();}

上面代码定义了 DirectoryNode 的一些默认属性与成员变量,并且创建构造函数,该函数接收调用者传入的 DIV 容器,并且调用 render 方法。
在 render 方法中,需要渲染当前目录节点,并且还要定义点击事件:

	render() {this.container.style.width = '100%';this.container.style.height = this.para.height ?? DirectoryNode.NODE_HEIGHT;this.container.style.fontSize = this.para.fontSize ?? DirectoryNode.NODE_NAME_FONTSIZE;this.container.style.color = this.para.color ?? DirectoryNode.NODE_NAME_COLOR;this.container.innerText = this.para.name;if (this.para.level > 1) {      // 设置目录节点偏移this.container.style.paddingLeft = ((this.para.level - 1) * DirectoryNode.LEVEL_OFFSET) + 'px';}this.container.style.cursor = 'pointer';// 点击事件let that = this;this.container.onclick = function () {that.para.onClick.call(that.para.onClickObj, that);}}

然后需要对目录节点的激活与非激活状态以及目录跳转逻辑做实现:

	// 目录节点激活并跳转对应目录位置activate() {this.container.style.color = DirectoryNode.NODE_NAME_ACTIVE_COLOR;}// 目录节点非激活deactivate() {this.container.style.color = this.para.color ?? DirectoryNode.NODE_NAME_COLOR;}// 目录跳转jump() {// 计算目标元素相对于父元素的位置  let targetElementRect = this.para.titleContainer.getBoundingClientRect();let parentRect = this.para.contentContainer.getBoundingClientRect();// 滚动到目标元素的顶部let offset = targetElementRect.top - parentRect.top + this.para.contentContainer.scrollTop;this.para.contentContainer.scrollTop = offset;}// 获取在页面内容的容器中,当前目录节点所对应的标题元素离顶部的距离getTopOffset() {let targetElementRect = this.para.titleContainer.getBoundingClientRect();let parentRect = this.para.contentContainer.getBoundingClientRect();return targetElementRect.top + parentRect.top;}
}

(3)在完成 DirectoryNode 的实现以后,开始创建目录类型 Directory :

class Directory {constructor(container, para) {this.container = container;                 // 传入的目录容器,用于渲染提取生成的目录this.para = para;                           // 配置参数,包含页面内容的容器this.nodes = [];                            // 目录节点集合this.jumpFlag=false;                        // 当前是否处于点击目录节点进行跳转的状态this.render();}

目录类型 Directory 的渲染函数 render 主要是获取页面内容中所有节点,遍历处理标题元素,然后创捷目录节点。此后,还需要定义页面内容的容器在滚动滚动轴时,触发目录变化的逻辑:

	render() {// 清空目录容器this.container.innerHTML = '';// 获取页面内容中所有节点,遍历处理标题元素let containerNodes = this.para.contentContainer.childNodes;containerNodes.forEach(element => {if (!element.tagName) {return;}let tagName = element.tagName.toUpperCase();if (2 == tagName.length) {let tagName1 = tagName.slice(0, 1);let tagName2 = tagName.slice(1, 2);if ('H' == tagName1 && !isNaN(tagName2)) {let level = parseInt(tagName2);     // 标题等级let directoryNodeContainer = document.createElement('div');this.container.appendChild(directoryNodeContainer);let nodePara = {"name": element.innerText,"level": level,"titleContainer": element,"contentContainer": this.para.contentContainer,"onClick": this.jumpTo,"onClickObj": this,}let node = new DirectoryNode(directoryNodeContainer, nodePara);this.nodes.push(node);}}});// 页面内容的容器在滚动滚动轴时,触发目录变化let that = this;this.para.contentContainer.addEventListener('scroll', function () {// 如果网页内容较少,没有出现滚动条,那么页面内容的容器在滚动滚动轴时,不做任何触发// 如果当前是处于点击目录节点进行跳转的状态,则不做处理if (!CommonUtil.hasScrollbar(that.para.contentContainer) || that.jumpFlag) {return;}// 判断当前内容属于哪一个目录节点let activeNode=null;for (let index = 0; index < that.nodes.length; index++) {const node = that.nodes[index];if(node.getTopOffset()<0 && index+1<that.nodes.length && that.nodes[index+1].getTopOffset()>0){activeNode = node;break;}}if(null == activeNode && that.nodes.length>0){activeNode = that.nodes[0];}that.nodes.forEach(element => {element.deactivate();});activeNode.activate();});}

在完成渲染函数 render 的实现后,即要实现点击后目录跳转的功能,注意:如果网页内容较少,没有出现滚动条,那么点击目录条目时不应触发任何滚动动作:

	// 目录跳转jumpTo(node) {// 如果网页内容较少,没有出现滚动条,那么点击目录条目时不应触发任何滚动动作if (!CommonUtil.hasScrollbar(this.para.contentContainer)) {return;}this.jumpFlag=true; this.nodes.forEach(element => {element.deactivate();});node.activate();node.jump();// 延迟一段时间let that = this;setTimeout(function() {  that.jumpFlag=false; }, 100); }
}

至此,整个目录导航功能的组件构建结束。

(4)完成目录导航功能的组件的代码编写后,可以创建 neat_directory.html 文件,调用该组件:

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>header tab</title><style>html {height: 100%;}body {margin: 0;height: 100%;}</style>
</head><body><div id="divMain" style="height: 100%;width: 100%;display: flex;"><div id="divDirectory" style="margin:10px;height: 500px;width: 300px;border: 1px solid #aaa;padding: 10px;"></div><div id="divContent" style="margin:10px;height: 500px;width: 600px;border: 1px solid #aaa;padding: 10px;overflow-y: auto;"><h1>1 第一章</h1><h2>1.1 第一章 第一节 </h2><span>组件需要能够自动提取网页内容中的所有标题元素(如 h1, h2, h3 等)。</span><span>提取的标题需要按照其在网页中的层级关系(如 h1 后面跟着的 h2 是其子章节)进行组织,形成一个目录容器。</span><span>目录容器需以清晰、直观的方式展示给用户,允许用户通过点击目录条目进行导航。</span><h3>1.1.1 第一章 第一节 第一段</h3><span>组件需要能够自动提取网页内容中的所有标题元素(如 h1, h2, h3 等)。</span><span>提取的标题需要按照其在网页中的层级关系(如 h1 后面跟着的 h2 是其子章节)进行组织,形成一个目录容器。</span><span>目录容器需以清晰、直观的方式展示给用户,允许用户通过点击目录条目进行导航。</span><h3>1.1.2 第一章 第一节 第二段</h3><span>组件需要能够自动提取网页内容中的所有标题元素(如 h1, h2, h3 等)。</span><span>提取的标题需要按照其在网页中的层级关系(如 h1 后面跟着的 h2 是其子章节)进行组织,形成一个目录容器。</span><span>目录容器需以清晰、直观的方式展示给用户,允许用户通过点击目录条目进行导航。</span><h1>2 第二章</h1><h2>2.1 第二章 第一节 </h2><span>组件需要能够自动提取网页内容中的所有标题元素(如 h1, h2, h3 等)。</span><span>提取的标题需要按照其在网页中的层级关系(如 h1 后面跟着的 h2 是其子章节)进行组织,形成一个目录容器。</span><span>目录容器需以清晰、直观的方式展示给用户,允许用户通过点击目录条目进行导航。</span><h3>2.1.1 第二章 第一节 第一段</h3><span>组件需要能够自动提取网页内容中的所有标题元素(如 h1, h2, h3 等)。</span><span>提取的标题需要按照其在网页中的层级关系(如 h1 后面跟着的 h2 是其子章节)进行组织,形成一个目录容器。</span><span>目录容器需以清晰、直观的方式展示给用户,允许用户通过点击目录条目进行导航。</span><h3>2.1.2 第二章 第一节 第二段</h3><span>组件需要能够自动提取网页内容中的所有标题元素(如 h1, h2, h3 等)。</span><span>提取的标题需要按照其在网页中的层级关系(如 h1 后面跟着的 h2 是其子章节)进行组织,形成一个目录容器。</span><span>目录容器需以清晰、直观的方式展示给用户,允许用户通过点击目录条目进行导航。</span></div></div>
</body>
<script src="./neat_directory.js"></script>
<script>let para = {"contentContainer":document.getElementById('divContent'),}let directory = new Directory(document.getElementById('divDirectory'),para);</script></html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/735257.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

虚拟机实验环境配置与使用(计算机系统2)

一、 实验目标&#xff1a; 熟悉Linux上C程序的编译和调试工具&#xff0c;包括以下内容&#xff1a; 1. 了解Linux操作系统及其常用命令 2. 掌握编译工具gcc的基本用法 3. 掌握使用gdb进行程序调试 二、实验环境与工件 1.个人电脑 2. Fedora 13 Linux 操作系统 3. gcc…

【Python】牛客网—软件开发-Python专项练习(day1)

1.&#xff08;单选&#xff09;下面哪个是Python中不可变的数据结构&#xff1f; A.set B.list C.tuple D.dict 可变数据类型&#xff1a;列表list[ ]、字典dict{ }、集合set{ }(能查询&#xff0c;也可更改)数据发生改变&#xff0c;但内存地址不变 不…

OPCUA 学习笔记:程序模型

无论是边缘控制器&#xff0c;还是PLC 中&#xff0c;除了信息模型之外&#xff0c;还有应用程序&#xff0c;这些程序可能是IEC61131-3 编写的程序&#xff0c;也可能是其它程序开发的可执行程序。 尽管OPCUA 描述模型能力很强&#xff0c;但是它缺乏算法的描述方式。但是OPCU…

YOLOV5 初体验:简单猫和老鼠数据集模型训练

1、前言 前两天&#xff0c;通过OpenCV 对猫和老鼠视频的抽取&#xff0c;提取了48张图片。这里不再介绍&#xff0c;可以参考之前的文章&#xff1a;利用OpenCV 抽取视频的图片&#xff0c;并制作目标检测数据集-CSDN博客 数据的目录如下&#xff1a; 项目的下载见文末 2、制…

MongoDB聚合运算符:$dayOfYear

$dayOfYear返回日期在当年的那一天&#xff0c;值的范围1~366。 语法 { $dayOfYear: <dateExpression> }参数说明&#xff1a; <dateExpression>为可被解析为Date、Timestamp或ObjectID的表达式<dateExpression>也可以是一个文档{ date: <dateExpressi…

【Web】浅聊Java反序列化之Rome——EqualsBeanObjectBean

目录 简介 原理分析 ToStringBean EqualsBean ObjectBean EXP ①EqualsBean直球纯享版 ②EqualsBean配合ObjectBean优化版 ③纯ObjectBean实现版 关于《浅聊Java反序列化》系列&#xff0c;纯是记录自己的学习历程&#xff0c;宥于本人水平有限&#xff0c;内容很水&a…

Linux运维工具-ywtool-README.md

工具下载链接: 2024.2.29(目前最新)-ywtool工具下载链接 提取码&#xff1a;dhzt 目录 README.md备注:未完成:2023.2.18之前2023.1.282023.2.182023.2.202023.3.202023.4.42023.4.172023.5.212023.6.172023.7.152023.7.212023.7.262023.11.82023.11.29-2023.12.82023.12.13-202…

YOLOv5-Openvino-ByteTrack【CPU】

纯检测如下&#xff1a; YOLOv5-Openvino和ONNXRuntime推理【CPU】 YOLOv6-Openvino和ONNXRuntime推理【CPU】 YOLOv8-Openvino和ONNXRuntime推理【CPU】 YOLOv9-Openvino和ONNXRuntime推理【CPU】 注&#xff1a;YOLOv5和YOLOv6代码内容基本一致&#xff01; 全部代码Github&…

类与对象D13

0、什么是类与对象&#xff1a; 类&#xff1a;具有相同特征或者行为的一个群体&#xff1b; 对象&#xff1a;个体 类&#xff1a;模型&#xff08;造对象&#xff09; 对象&#xff1a;模型生出来&#xff08;造出来&#xff09;具体的东西。 1、实例属性和类属性的区别&a…

代码随想录Day43:最后一块石头的重量、目标和、一和零

最后一块石头的重量 class Solution { public:int lastStoneWeightII(vector<int>& stones) {int sum 0;for(int a : stones){sum a;}int target sum / 2;vector<int> dp(target 1, 0);for(int i 0; i < stones.size(); i){for(int j target; j >…

深入探索时间复杂度:解锁算法性能的关键

在算法的世界里,性能是王道。了解和优化算法的时间复杂度是每个算法工程师的必修课。本篇文章旨在深入探讨时间复杂度的概念、计算方法,以及如何通过时间复杂度来评估算法性能。通过生动的类比和详细的代码示例,我们将一起揭开时间复杂度的神秘面纱,让你轻松掌握这一核心概…

Linux--文件类型与权限

Linux上一切皆文件; 蓝色的是目录文件 Linux不以文件的扩展名来区分文件类型,而是在文件属性中有一列专门记录文件类型. ls -l 可以查看 普通文件:.c .cpp .h .txt .pdf .xls (-) 目录文件:文件夹 (d) 管道文件:用于进程间通信的一种文件 (p) 链接文件:相当于W…

一图看懂Redis持久化机制!

持久化策略 Redis 提供了两种持久化策略&#xff1a; RDB (Redis Database Snapshot) 持久化机制&#xff0c;会在一段时间内生成指定时间点的数据集快照(snapshot) AOF&#xff08;Append Only File&#xff09; 持久化机制&#xff0c;记录 server 端收到的每一条写命令&am…

【开发工具】认识Git | 认识工作区、暂存区、版本库

文章目录 一、Git初识git本质上是一个版本控制器 二、Git的安装 - CentOS三、Git基本操作1. 创建Git本地仓库2. 配置Git3. 认识工作区、暂存区、版本库4. 版本回退5. 撤销修改情况1&#xff1a;对于工作区的代码&#xff0c;还没有add情况二&#xff1a;已经add &#xff0c;但…

OB_GINS学习

OB_GINS学习 组合导航中的杆臂测量加速度计的零偏单位转换受到经纬度以及高程影响的正常重力位的计算公式大地坐标系&#xff08;LBH&#xff09;向空间直角坐标系&#xff08;XYZ&#xff09;的转换及其逆转换导航坐标系&#xff08;n系&#xff09;到地心地固坐标系&#xff…

【Prometheus】DataModel

数据模型 DataModel 指标 Metric metric 包含 metric name 和 metric label 格式&#xff1a; <metric name>{<label name><label value>, ...}例如&#xff1a;服务器 HTTP 接口 /messages 的总请求数 api_http_requests_total{method"POST",…

创建机器学习系统及一些思想

我们在创建一个优秀的神经网络需要一个漫长的循环过程。 先选择一个架构&#xff0c;再对我们的架构进行训练&#xff0c;最后诊断我们的误差&#xff0c;再回到我们重新的循环&#xff0c;直到我们的神经网络足够优秀。这就是机器学习迭代的过程。 误差分析&#xff1a; 我…

【嵌入式——QT】MDI应用程序设计

MDI应用程序就是在主窗口里创建多个同类型的MDI子窗口&#xff0c;这些MDI子窗口在主窗口里显示&#xff0c;并享受主窗口上的工具栏和菜单等操作功能&#xff0c;主窗口上的操作都针对当前活动的MDI子窗口进行。 图示 代码示例 QWMainWindow.h #ifndef QWMAINWINDOW_H …

悬浮工具球(仿 iphone 辅助触控)

悬浮工具球&#xff08;仿 iphone 辅助触控&#xff09; 兼容移动端 touch 事件点击元素以外位置收起解决鼠标抬起触发元素的点击事件问题 Demo Github <template><divref"FloatingBal"class"floating_ball":class"[dragging, isClick]&q…

MT笔试题

前言 某团硬件工程师的笔试题&#xff0c;个人感觉题目的价值还是很高的&#xff0c;分为选择题和编程题&#xff0c;选择题考的是嵌入式基础知识&#xff0c;编程题是两道算法题&#xff0c;一道为简单难度&#xff0c;一道为中等难度 目录 前言选择题编程题 选择题 C语言中变…