突破编程_前端_JS编程实例（工具栏组件）

1 开发目标

工具栏组件旨在模拟常见的桌面软件工具栏，所以比较适用于 electron 的开发，该组件包含工具栏按钮、工具栏分割条和工具栏容器三个主要角色，并提供一系列接口和功能，以满足用户在不同场景下的需求：

在这里插入图片描述

点击工具栏按钮后，可以回调用户传入的函数：

在这里插入图片描述

2 详细需求

2.1 工具栏按钮

（1）图标与标题： 工具栏按钮应包含一个可自定义的小图标和一个标题。图标和标题应清晰可见，且能够准确反映按钮的功能。

（2）点击动作： 用户点击工具栏按钮后，应触发相应的动作或事件。具体动作或事件由开发者在实现时定义。

（3）禁用接口： 工具栏按钮应提供禁用接口。当调用该接口后，按钮应变为禁用状态，具体表现为：

  • 小图标和标题变灰，以区分于正常状态的按钮。
  • 鼠标在禁用状态的按钮上移动时，不会变成手型图标。
  • 点击禁用状态的按钮不会触发任何动作或事件。

2.2 工具栏分割条

（1）视觉表现： 工具栏分割条应具有明确的视觉表现，用于区分不同组别的工具栏按钮。

（2）位置与布局： 工具栏分割条应位于一组工具栏按钮的两侧，帮助用户清晰地识别按钮组。

2.3 工具栏容器

（1）保存与渲染： 工具栏容器应负责保存工具栏按钮和工具栏分割条，并根据布局规则进行渲染，确保界面美观且易用。

（2）对外接口： 工具栏容器应提供一系列对外接口，以便开发者进行动态操作，如：

  • 动态增加一个工具栏按钮：提供接口允许开发者在运行时向工具栏容器中添加新的工具栏按钮。
  • 动态移除一个工具栏按钮：提供接口允许开发者在运行时从工具栏容器中移除已存在的工具栏按钮。
  • 动态调整工具栏按钮的位置或顺序：提供接口允许开发者在运行时调整工具栏按钮的布局。

3 代码实现

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

（1）在具体的业务代码编写之前，先实现一个工具类以及一些工具方法，方便后面调用：

class CommonUtil {// 设置 DIV 中的文字为水平与垂直居中static centerTextInDiv(container) {container.style.display = 'flex';container.style.textAlign = 'center';container.style.justifyContent = 'center';container.style.flexDirection = 'column';}// 设置 DIV 中的文字为垂直居中static centerYTextInDiv(container) {container.style.display = 'flex';container.style.justifyContent = 'center';container.style.flexDirection = 'column';}// 禁止文字选中static disableSelection(container) {if (typeof container.onselectstart != 'undefined') {container.onselectstart = function () { return false; };} else if (typeof container.style.MozUserSelect != 'undefined') {container.style.MozUserSelect = 'none';} else {container.onmousedown = function () { return false; };}container.style.cursor = 'default';}// 设置 DIV 为带图标的 labelstatic setIconLabelInDiv(container, title, para) {container.style.display = 'flex';if (para.icon) {let divIcon = document.createElement('div');divIcon.style.height = '100%';if (para.iconWidth) {divIcon.style.width = para.iconWidth;}if (para.iconColor) {divIcon.style.color = para.iconColor;}if (para.iconSize) {divIcon.style.fontSize = para.iconSize;}container.appendChild(divIcon);CommonUtil.centerTextInDiv(divIcon);divIcon.innerHTML = '<i class="' + para.icon + '"></i>';}let divTitle = document.createElement('div');divTitle.style.height = '100%';if (para.fontSize) {divTitle.style.fontSize = para.fontSize;}container.appendChild(divTitle);CommonUtil.centerYTextInDiv(divTitle);divTitle.innerHTML = title;CommonUtil.disableSelection(container);}
}

（2）创建工具栏按钮类型：

class NeatToolBarItem {static NEATTOOLBARITEM_FONTSIZE = '14px';                     // 工具栏按钮标题字体大小static NEATTOOLBARITEM_ICON_WIDTH = '30px';                     // 工具栏按钮图标宽度static NEATTOOLBARITEM_FONT_COLOR = '#000';                     // 工具栏按钮标题字体颜色static NEATTOOLBARITEM_BACKGROUNDCOLOR = '#ffffff';           // 工具栏按钮默认背景颜色static NEATTOOLBARITEM_BACKGROUNDCOLOR_MOVE = '#e5f3ff';           // 鼠标划过时的颜色static NEATTOOLBARITEM_BACKGROUNDCOLOR_MOUSEDOWN = '#cce8ff';      // 鼠标按下时的颜色static NEATTOOLBARITEM_COLOR_DISABLE = '#888888';                 // 工具栏按钮禁用时的颜色static NEATTOOLBARITEM_COLOR_SPLITTER = '#dddddd';                 // 工具栏分割条颜色constructor(container, title, para) {this.container = container;                 // 本工具栏按钮的容器this.title = title;                         // 本工具栏按钮的标题this.para = para;                           // 配置参数，包含图标（为简便起见，使用font awesome）各种属性this.disableFlag = false;                   // 本工具栏按钮是否被禁用this.render();}

上面代码定义了 NeatToolBarItem 的一些默认属性与成员变量，并且创建构造函数，该函数接收调用者传入的 DIV 容器，并且调用 render 方法。
在 render 方法，需要渲染当前工具栏按钮，并且还要控制鼠标动作事件：

	render() {this.container.style.height = '100%';this.container.style.paddingRight = '10px';this.para.fontSize = NeatToolBarItem.NEATTOOLBARITEM_FONTSIZE;CommonUtil.setIconLabelInDiv(this.container, this.title, this.para);this.container.style.cursor = 'pointer';// 监听鼠标滑过事件  this.container.addEventListener('mouseover', function () {// 当鼠标滑过时，改变背景颜色 if (!this.disableFlag) {this.container.style.backgroundColor = NeatToolBarItem.NEATTOOLBARITEM_BACKGROUNDCOLOR_MOVE;}}.bind(this));// 监听鼠标滑出事件  this.container.addEventListener('mouseout', function () {// 当鼠标滑出时，改变背景颜色  if (!this.disableFlag) {this.container.style.backgroundColor = NeatToolBarItem.NEATTOOLBARITEM_BACKGROUNDCOLOR;}}.bind(this));// 监听鼠标按下事件  this.container.addEventListener('mousedown', function () {// 当鼠标按下时，改变背景颜色 if (!this.disableFlag) {this.container.style.backgroundColor = NeatToolBarItem.NEATTOOLBARITEM_BACKGROUNDCOLOR_MOUSEDOWN;}}.bind(this));// 监听鼠标释放事件来恢复颜色 this.container.addEventListener('mouseup', function () {// 当鼠标释放时，恢复背景颜色if (!this.disableFlag) {this.container.style.backgroundColor = NeatToolBarItem.NEATTOOLBARITEM_BACKGROUNDCOLOR_MOVE;}}.bind(this));// 处理点击回调函数if(this.para.onClick){this.container.addEventListener('click', this.para.onClick);}}

接下来需要定义工具栏按钮的启用和禁用状态，主要通过状态变量 disableFlag 来控制：

	// 启用setEnable() {this.container.style.color = NeatToolBarItem.NEATTOOLBARITEM_FONT_COLOR;if (this.para.iconColor) {this.container.childNodes[0].style.color = this.para.iconColor;}this.disableFlag = false;this.container.style.cursor = 'pointer';}// 禁用setDisable() {this.container.style.color = NeatToolBarItem.NEATTOOLBARITEM_COLOR_DISABLE;this.container.childNodes[0].style.color = NeatToolBarItem.NEATTOOLBARITEM_COLOR_DISABLE;this.disableFlag = true;this.container.style.cursor = 'default';}
}

（3）创建工具栏类型：

class NeatToolBar {constructor(container) {this.container = container;                 // 本工具栏的容器this.items = [];this.render();}render() {this.container.style.display = 'flex';}// 增加工具栏按钮addToolbarItem(title, para) {let itemContainer = document.createElement('div');this.container.appendChild(itemContainer);let item = new NeatToolBarItem(itemContainer, title, para);this.items.push(item);return item;}// 增加工具栏分割条addSplitter() {let splitterContainer = document.createElement('div');splitterContainer.style.margin = '2px';splitterContainer.style.border = '1px solid ' + NeatToolBarItem.NEATTOOLBARITEM_COLOR_SPLITTER;this.container.appendChild(splitterContainer);}
}

这是一个基础版的工具栏类，提供了添加按钮和分割条的基本功能。其包含两个核心方法：addToolbarItem(title, para) 以及 addSplitter()。

addToolbarItem(title, para) 主要作用在于：

  • 创建一个新的 div 元素 itemContainer 作为工具栏按钮的容器。
  • 将 itemContainer 添加到 container 中。
  • 创建一个新的 NeatToolBarItem 实例并将其添加到 items 数组中。
  • 返回新创建的 NeatToolBarItem 实例。

addSplitter() 主要作用在于：

  • 创建一个新的 div 元素 splitterContainer 作为工具栏分割条的容器。
  • 为 splitterContainer 设置样式，包括外边距（margin）和边框（border）。
  • 将 splitterContainer 添加到 container 中。

（4）完成工具栏组件的代码编写后，可以创建 neater_toolbar.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><link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.css">
</head><body><div id="divMain" style="height: 100%;width: 100%;"><div id="divToolbar"style="margin-top: 100px;margin-left: 100px; height: 30px;width: 600px;border: 1px solid #aaaaaa;"></div></div>
</body>
<script src="./neat_toolbar.js"></script>
<script>let toolbar = new NeatToolBar(document.getElementById('divToolbar'));let para = {"icon": "fa fa-area-chart","iconWidth": "30px","iconColor": "#1e9f75","onClick": function () { alert('hello toolbar') }}let toolbarItemChart = toolbar.addToolbarItem('查看曲线', para);para = {"icon": "fa fa-bar-chart","iconWidth": "30px","iconColor": "#d9534f",}let toolbarItemBar = toolbar.addToolbarItem('查看柱状图', para);toolbarItemBar.setDisable();toolbar.addSplitter();para = {"icon": "fa fa-picture-o","iconWidth": "30px","iconColor": "#4f9fcf",}let toolbarItemPic = toolbar.addToolbarItem('打开图片', para);toolbar.addSplitter();para = {"icon": "fa fa-info-circle","iconWidth": "30px","iconColor": "#777777",}let toolbarItemInfo = toolbar.addToolbarItem('关于', para);</script></html>

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

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

相关文章

【MatLab】之：Simulink安装

【MatLab】之：Simulink安装

一、内容简介 本文介绍如何在 MatLab 中安装 Simulink 仿真工具包。 二、所需原材料 MatLab R2020b&#xff08;教学使用&#xff09; 三、安装步骤 1. 点击菜单中的“附加功能”&#xff0c;进入附加功能管理器&#xff1a; 2. 在左侧的“按类别筛选”下选择Using Simulin…
阅读更多...
Linux网络编程: IP协议详解

Linux网络编程: IP协议详解

一、TCP/IP五层模型 物理层&#xff08;Physical Layer&#xff09;&#xff1a;物理层是最底层&#xff0c;负责传输比特流&#xff08;bitstream&#xff09;以及物理介质的传输方式。它定义了如何在物理媒介上传输原始的比特流&#xff0c;例如通过电缆、光纤或无线传输等。…
阅读更多...
购票小程序有哪些功能

购票小程序有哪些功能

​通过小程序购买电子票&#xff0c;然后在使用时&#xff0c;出示电子票二维码&#xff0c;由商家进行验证/核销。通过小程序购票和核销&#xff0c;使得整个流程非常顺利&#xff0c;免去了线下购票的繁琐&#xff0c;而且还容易遗失。下面我们就来具体看一下小程序如何进行购…
阅读更多...
Postman进行Websocket接口测试

Postman进行Websocket接口测试

Postman进行Websocket接口测试 前言下载地址使用1、new一个一个WebSocket Request2、填写内容和需要请求头携带的参数3、表示成功 网页请求101表示握手成功 前言 有些较低版本postman不支持websocket接口测试&#xff0c;如果根据此文未找到创建websocket接口测试的目录&#…
阅读更多...
面向对象（C# ）

面向对象（C# ）

面向对象&#xff08;C# &#xff09; 文章目录 面向对象&#xff08;C# &#xff09;ref 和 out传值调用和引用调用ref 和 out 的使用ref 和 out 的区别 结构体垃圾回收GC封装成员属性索引器静态成员静态类静态构造函数拓展方法运算符重载内部类和分布类 继承里氏替换继承中的…
阅读更多...
Qt 鼠标滚轮示例

Qt 鼠标滚轮示例

1.声明 void wheelEvent(QWheelEvent *event) override;2.实现&#xff08;方便复制、测试起见用静态变量&#xff09; #include <mutex> void MainWindow::wheelEvent(QWheelEvent *event) {static QLabel *label new QLabel("Zoom Level: 100%", this);st…
阅读更多...
elementUi中表格超出一行省略，鼠标放入显示完整提示

elementUi中表格超出一行省略，鼠标放入显示完整提示

一、想要的效果 二、代码&#xff0c;加入show-overflow-tooltip即可 <el-table-column min-width"220" prop"content" show-overflow-tooltip> </el-table-column>
阅读更多...
PCB设计中的MARKER

PCB设计中的MARKER

今天在给板子布局的时候发现了一个这样的东西&#xff0c;名叫MARKER&#xff0c;查了一下这个东西分享一下&#xff1a; 目录 MARKER是什么样的&#xff1f; MARKER的用途&#xff1a; MARKER是必须的吗&#xff1f; MARKER是什么样的&#xff1f; 他在PCB中是这样的&…
阅读更多...
web 课程

web 课程

文章目录 格式图片超链接书签链接表格例子横跨束跨 格式 <br /> <br/> #换行图片 <img> 标签是用于在网页中嵌入图像的 HTML 标签&#xff0c;它有一些属性可以用来控制图像的加载、显示和交互。以下是对 <img> 标签常用属性的详细介绍&#xff1a;…
阅读更多...
MySQL基础架构

MySQL基础架构

文章目录 MySQL基础架构一、连接器 - 建立连接&#xff0c;权限认证二、查缓存 - 提高效率三、分析器 - 做什么四、优化器 - 怎么做五、执行器 - 执行语句六、存储引擎1、存储引擎的概述2、存储引擎的对比3、存储引擎的命令4、存储引擎的选择 MySQL基础架构 大体来说&#xff…
阅读更多...
旅游管理系统 |基于springboot框架+ Mysql+Java+Tomcat的旅游管理系统设计与实现(可运行源码+数据库+设计文档)

旅游管理系统 |基于springboot框架+ Mysql+Java+Tomcat的旅游管理系统设计与实现(可运行源码+数据库+设计文档)

推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 目录 前台功能效果图 管理员功能登录前台功能效果图 系统功能设计 数据库E-R图设计 lunwen参考 摘要 研究…
阅读更多...
Transformer面试题总结101道

Transformer面试题总结101道

在本文中&#xff0c;我们将回答一系列关于Transformer的问题&#xff0c;涵盖了从基础概念到高级应用的多个方面。无论您是准备面试、学习深度学习&#xff0c;还是对自然语言处理技术感兴趣&#xff0c;都希望本文能为您提供有益的启示和知识。 注&#xff0c;本文的面试题借…
阅读更多...
idea中database的一些用法

idea中database的一些用法

1、查看表结构 方法1&#xff0c;右键&#xff0c;选这个 方法2 双击表后&#xff0c;看到数据&#xff0c;点DDL 方法3 写SQL时&#xff0c;把鼠标放在表名上&#xff0c;可以快速查看表结构 2、表生成对应的实体类 表中右键&#xff0c;选择这2个&#xff0c;选择生成的路…
阅读更多...
FPGA和ASIC

FPGA和ASIC

前言 大家好&#xff0c;我是jiantaoyab&#xff0c;这是我所总结作为学习的笔记第16篇,在本篇文章给大家介绍FPGA和ASIC。 一个四核i7的CPU的晶体管中有20亿的晶体管&#xff0c;需要链接起20亿的晶体管可不是一件容易的事情&#xff0c;所以设计一个CPU需要用年来算&#x…
阅读更多...
【代码随想录】【回溯算法】补day24：组合问题以及组合的优化

【代码随想录】【回溯算法】补day24：组合问题以及组合的优化

回溯算法&#xff1a;递归函数里面嵌套着for循环 给定两个整数 n 和 k&#xff0c;返回 1 … n 中所有可能的 k 个数的组合。 示例: 输入: n 4, k 2 输出: [ [2,4], [3,4], [2,3], [1,2], [1,3], [1,4], ] 包含组合问题和组合问题的剪枝优化 class solution:def combine(se…
阅读更多...
C# 第三方曲线库及其特点

C# 第三方曲线库及其特点

在 C# 中&#xff0c;有几个第三方库可以用于绘制曲线图&#xff0c;每个库都有自己的特点和优势。以下是一些常见的 C# 第三方曲线库及其特点&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1.LiveC…
阅读更多...
力扣L10--- 3. 无重复字符的最长子串--2024年3月14日

力扣L10--- 3. 无重复字符的最长子串--2024年3月14日

1.题目 2.知识点 注1&#xff1a;containsKey 是 Java 中 HashMap 类的一个方法&#xff0c;用于检查哈希表中是否包含指定的键。 注2&#xff1a;在哈希表&#xff08;HashMap)中&#xff0c;每个键对应着唯一的值&#xff0c;因此键不能重复&#xff0c;但值可以重复。 (1)创…
阅读更多...
Java后端面试经验分享，~纯分享

Java后端面试经验分享，~纯分享

本文将从面试、工作、学习三个方面分享最近面试的一些心得以及以后发展的一些规划&#xff0c;仅供参考&#xff0c;哈哈&#xff0c;毕竟本人也很菜&#xff0c;因为菜才要多学习。一会儿也会分享两本Java面试题库&#xff08;题库是b站大学找的&#xff0c;一会儿我也会分享出…
阅读更多...
SpringBoot整合Seata注册到Nacos服务

SpringBoot整合Seata注册到Nacos服务

项目引入pom文件 <!-- SpringCloud Seata 组件--> <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-alibaba-seata</artifactId><version>${alibaba.seata}</version><exclusions><exc…
阅读更多...
初学者必看的python中类型转换

初学者必看的python中类型转换

Python中常见的类型转换 int(x [,base ]) 将x转换为一个整数 long(x [,base ]) 将x转换为一个长整数 float(x ) 将x转换到一个浮点数 complex(real [,imag ]) 创建一个复数 str(x ) 将对象 x 转换为字符串 repr(x ) 将对象 x 转换为表达式字符串 eval(str ) 用来计算在字符串中…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023