突破编程_前端_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.rhkb.cn/news/277146.html

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

相关文章

初识Spring MVC

初识Spring MVC

什么是Spring MVC? 官方给的解释是 Spring Web MVC 是基于 Servlet API 构建的原始 Web 框架&#xff0c;从⼀开始就包含在 Spring 框架中。它的 正式名称“Spring Web MVC”来⾃其源模块的名称(Spring-webmvc)&#xff0c;但它通常被称为"Spring MVC" 注:Severlet是…
阅读更多...
c语言按位与，按位或，按位异或，按位取反

c语言按位与，按位或，按位异或，按位取反

1、按位与& 按位与的实现逻辑是相同为1&#xff0c;相异为0&#xff1b; 2、按位或 | 按位或的实现逻辑是有1为1&#xff0c;无一为0&#xff1b; 3、按位异或 ^ 按位或的实现逻辑是相同为0&#xff0c;相异为1&#xff1b; 4、按位取反 ~ 按位取反的实现逻辑是0改1&am…
阅读更多...
软件测试之学习测试用例的设计（等价类法、边界值法、错误猜测法、场景法、因果图法、正交法）

软件测试之学习测试用例的设计（等价类法、边界值法、错误猜测法、场景法、因果图法、正交法）

1. 测试用例的概念 软件测试人员向被测试系统提供的一组数据的集合&#xff0c;包括 测试环境、测试步骤、测试数据、预期结果 2. 为什么在测试前要设计测试用例 测试用例是执行测试的依据 在回归测试的时候可以进行复用 是自动化测试编写测试脚本的依据 衡量需求的覆盖率…
阅读更多...
自动驾驶---Motion Planning之构建SLT Driving Corridor

自动驾驶---Motion Planning之构建SLT Driving Corridor

1 背景 在上篇博客《自动驾驶---Motion Planning之Speed Boundary》中，主要介绍了Apollo中Speed Boundary的一些内容，可以构造ST图得到边界信息，最后结合粗糙的速度曲线和路径曲线，即可使用优化的方法求解得到最终的轨迹信息（s，s，s，l，l，l）。 本篇博客笔者主要介绍近…
阅读更多...
sqllab第十八关通关笔记

sqllab第十八关通关笔记

知识点&#xff1a; UA注入 不进行url解析&#xff0c;不能使用 %20 编码等操作出现在User-agent字段中一般为insert语句 insert 表名(字段1&#xff0c;字段2&#xff0c;。。。) values(数据1&#xff0c;数据2&#xff0c;。。。) 通过admin admin进行登录发现页面打印出了…
阅读更多...
vue防止用户连续点击造成多次提交

vue防止用户连续点击造成多次提交

中心思想&#xff1a;在第一次提交的结果返回前&#xff0c;将提交按钮禁用。 方法一&#xff1a;给提交按钮加上disabled属性&#xff0c;在请求时先把disabled属性改成true&#xff0c;在结果返回时改成false 方法二&#xff1a;添加loading遮罩层&#xff0c;可以直接使用e…
阅读更多...
Redis应用与原理（一）

Redis应用与原理（一）

更好的阅读体验 \huge{\color{red}{更好的阅读体验}} 更好的阅读体验 缓存发展史 缓存经典场景 在没有引入缓存前&#xff0c;为了应对大量流量&#xff0c;一般采用&#xff1a; LVS 代理Nginx 做负载均衡搭建 Tomcat 集群 这种方式下&#xff0c;随着访问量的增大&#xf…
阅读更多...
Unity3d版白银城地图

Unity3d版白银城地图

将老外之前拼接的Unity3d版白银城地图&#xff0c;导入到国内某手游里&#xff0c;改成它的客户端地图模式&#xff0c;可以体验一把手游的快乐。 人物角色用的是它原版的手游默认的&#xff0c;城内显示效果很好&#xff0c;大家可以仔细看看。 由于前期在导入时遇到重大挫折&…
阅读更多...
GPT实战系列-LangChain构建自定义Agent

GPT实战系列-LangChain构建自定义Agent

GPT实战系列-LangChain构建自定义Agent LangChain GPT实战系列-LangChain如何构建基通义千问的多工具链 GPT实战系列-构建多参数的自定义LangChain工具 GPT实战系列-通过Basetool构建自定义LangChain工具方法 GPT实战系列-一种构建LangChain自定义Tool工具的简单方法 GPT…
阅读更多...
torch.nn.Conv2d()与slim.conv2d()函数参数详解

torch.nn.Conv2d()与slim.conv2d()函数参数详解

目录 1. tf.nn.conv2d()函数1.1 input&#xff1a;1.2 filter&#xff1a;1.3 strides&#xff1a;1.4 padding&#xff1a; 2.tf.contrib.slim.conv2d()函数3. torch.nn.Conv2d()函数3.1 官方例子&#xff1a; 1. tf.nn.conv2d()函数 tensorflow构建网络模型时常用的卷积函数…
阅读更多...
JavaParser的快速介绍

JavaParser的快速介绍

开发的工作主要是写代码&#xff0c; 有考虑过使用代码写代码&#xff0c; 使用代码分析和改进代码吗&#xff1f; JavaParser 就可以帮你用来处理Java 代码的这些功能。 Java Parser 的介绍 Java Parser是一个用于解析和分析Java源代码的开源工具。它提供了一个API接口&…
阅读更多...
网络通信与网络协议

网络通信与网络协议

网络编程是指利用计算机网络实现程序之间通信的一种编程方式。在网络编程中&#xff0c;程序需要通过网络协议(如 TCP/IP)来进行通信&#xff0c;以实现不同计算机之间的数据传输和共享。在网络编程中&#xff0c;通常有三个基本要素 IP 地址:定位网络中某台计算机端口号port:定…
阅读更多...
北斗卫星在桥隧坡安全监测领域的应用及前景展望

北斗卫星在桥隧坡安全监测领域的应用及前景展望

北斗卫星在桥隧坡安全监测领域的应用及前景展望 北斗卫星系统是中国独立研发的卫星导航定位系统&#xff0c;具有全球覆盖、高精度定位和海量数据传输等优势。随着卫星导航技术的快速发展&#xff0c;北斗卫星在桥隧坡安全监测领域正发挥着重要的作用&#xff0c;并为相关领域…
阅读更多...
Elasticsearch：从 Java High Level Rest Client 切换到新的 Java API Client

Elasticsearch：从 Java High Level Rest Client 切换到新的 Java API Client

作者&#xff1a;David Pilato 我经常在讨论中看到与 Java API 客户端使用相关的问题。 为此&#xff0c;我在 2019 年启动了一个 GitHub 存储库&#xff0c;以提供一些实际有效的代码示例并回答社区提出的问题。 从那时起&#xff0c;高级 Rest 客户端 (High Level Rest Clie…
阅读更多...
ffmpeg解码和渲染理解

ffmpeg解码和渲染理解

ffmpeg解码和渲染理解 ffmpeg视频解码步骤 FFmpeg 是一个功能强大的跨平台多媒体处理工具&#xff0c;包含了音视频编解码、封装/解封装、过滤器等功能。下面是一般情况下使用 FFmpeg 进行视频解码的步骤&#xff1a; 初始化 FFmpeg 库&#xff1a;首先需要初始化 FFmpeg 库&a…
阅读更多...
提升口才表达能力的重要性与途径

提升口才表达能力的重要性与途径

提升口才表达能力的重要性与途径 口才表达能力&#xff0c;即一个人通过口头语言准确、流畅、生动地传达思想、情感和观点的能力&#xff0c;是现代社会中不可或缺的一项基本技能。无论是在职场沟通、人际交往还是公共场合发言&#xff0c;优秀的口才表达能力都能为我们带来诸…
阅读更多...
BUGKU-WEB cookies

BUGKU-WEB cookies

题目描述 题目截图如下&#xff1a; 进入场景看看&#xff1a; 解题思路 看源码看F12&#xff1a;看请求链接看提示&#xff1a;cookies欺骗 相关工具 插件&#xff1a;ModHeader或者hackbarbase64解密 解题步骤 看源码 就是rfrgrggggggoaihegfdiofi48ty598whrefeoia…
阅读更多...
redis持久化策略

redis持久化策略

redis中持久化策略 1.持久化是什么 在前面的过程中讲述了有关于MySQL中事务的一些特性以及隔离等级。其中很重要的一条就提到了持久化&#xff0c;持久化就是可以将数据进行一个持久保存的意思。也就是将数据写入到硬盘中&#xff0c;虽然&#xff0c;redis是操作内存的一个数…
阅读更多...
智能合约开发基础知识：最小信任机制、智能合约、EVM

智能合约开发基础知识：最小信任机制、智能合约、EVM

苏泽 大家好 这里是苏泽 一个钟爱区块链技术的后端开发者 本篇专栏 ←持续记录本人自学两年走过无数弯路的智能合约学习笔记和经验总结 如果喜欢拜托三连支持~ 专栏的前面几篇详细了介绍了区块链的核心基础知识 有兴趣学习的小伙伴可以看看http://t.csdnimg.cn/fCD5E关于区块…
阅读更多...
C++模版进阶

C++模版进阶

文章目录 C模版进阶1、非类型模版参数2、模版的特化2.1、概念2.2、函数模版特化2.3、类模版特化2.3.1、类模版全特化2.3.1、类模版偏特化 2.4、类模版特化示例 3、模版的分离编译3.1、 什么是分离编译3.2、模版的分离编译 4、模版总结 C模版进阶 1、非类型模版参数 模板参数分…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发