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

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

Vue+SpringBoot打造音乐平台

Vue+SpringBoot打造音乐平台

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、系统展示 四、核心代码4.1 查询单首音乐4.2 新增音乐4.3 新增音乐订单4.4 查询音乐订单4.5 新增音乐收藏 五、免责说明 一、摘要 1.1 项目介绍 基于微信小程序JAVAVueSpringBootMySQL的音乐平台&#xff0c;包含了音乐…
阅读更多...
tigramite教程（五）使用TIGRAMITE 进行自助聚合和链接置信度量化

tigramite教程（五）使用TIGRAMITE 进行自助聚合和链接置信度量化

使用TIGRAMITE 进行自助聚合和链接置信度量化 自助聚合&#xff08;Bagging&#xff09;和置信度估计例子数据生成模型基本的PCMCIBagged-PCMCI使用优化后的pc_alpha进行自举聚合使用优化的pc_alpha进行CMIknn的自举聚合 TIGRAMITE是一个用于时间序列分析的Python模块。它基于P…
阅读更多...
如何批量获取公众号所有文章的阅读数点赞数和留言数导出excel？

如何批量获取公众号所有文章的阅读数点赞数和留言数导出excel？

如何批量获取公众号所有文章的阅读数点赞数和留言数导出excel&#xff1f;我写了个脚本批量抓取&#xff0c;导出的excel文章数据包含文章日期&#xff0c;文章标题&#xff0c;文章链接&#xff0c;文章简介&#xff0c;文章作者&#xff0c;文章封面图&#xff0c;是否原创&a…
阅读更多...
《圣斗士星矢：纵横宇宙》（上）AI制作真人版大电影

《圣斗士星矢：纵横宇宙》（上）AI制作真人版大电影

《圣斗士星矢&#xff1a;纵横宇宙》&#xff08;上&#xff09;AI制作真人版大电影 平行宇宙&#xff0c;黑暗来袭&#xff0c;十二件黄金圣衣合体成为究极秘密武器&#xff01; 《圣斗士星矢&#xff1a;纵横宇宙》&#xff08;上&#xff09;电影开场&#xff0c;星矢等一众…
阅读更多...
网络通信与网络协议

网络通信与网络协议

网络编程是指利用计算机网络实现程序之间通信的一种编程方式。在网络编程中&#xff0c;程序需要通过网络协议(如 TCP/IP)来进行通信&#xff0c;以实现不同计算机之间的数据传输和共享。在网络编程中&#xff0c;通常有三个基本要素 IP 地址:定位网络中某台计算机端口号port:定…
阅读更多...
Nginx高级技术: 代理缓存配置

Nginx高级技术: 代理缓存配置

一、缓存说明 Nginx缓存&#xff0c;Nginx 提供了一个强大的反向代理和 HTTP 服务器功能&#xff0c;同时也是一个高效的缓存服务器。一般情况下系统用到的缓存有以下三种&#xff1a; 1、服务端缓存&#xff1a;缓存存在后端服务器&#xff0c;如 redis。 2、代理缓存&#…
阅读更多...
6.【Linux】进程间通信(管道命名管道||简易进程池||简易客户端服务端通信）

6.【Linux】进程间通信(管道命名管道||简易进程池||简易客户端服务端通信）

介绍 进程间通信的方式 1.Linux原生支持的管道----匿名和命名管道 2.System V-----共享内存、消息队列、信号量 3.Posix------多线程、网路通信 进程间通信目的 数据传输&#xff1a;一个进程需要将它的数据发送给另一个进程 资源共享&#xff1a;多个进程之间共享同样的资源。…
阅读更多...
UE4_调试工具_绘制调试球体

UE4_调试工具_绘制调试球体

学习笔记&#xff0c;仅供参考&#xff01; 效果&#xff1a; 步骤&#xff1a; 睁开眼睛就是该变量在此蓝图的实例上可公开编辑。 勾选效果&#xff1a;
阅读更多...
VUE3生命周期钩子

VUE3生命周期钩子

概念 每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤&#xff0c;比如设置好数据侦听&#xff0c;编译模板&#xff0c;挂载实例到 DOM&#xff0c;以及在数据改变时更新 DOM。在此过程中&#xff0c;它也会运行被称为生命周期钩子的函数&#xff0c;让开发者有机会在…
阅读更多...
文件包含例子

文件包含例子

一、常见的文件包含函数 php中常见的文件包含函数有以下四种&#xff1a; include() require() include_once() require()_once() include与require基本是相同的&#xff0c;除了错误处理方面: include()&#xff0c;只生成警告&#xff08;E_WARNING&#xff09;&#x…
阅读更多...
基于java+springboot+vue实现的自习室管理和预约系统（文末源码+Lw）23-177

基于java+springboot+vue实现的自习室管理和预约系统（文末源码+Lw）23-177

摘 要 传统办法管理信息首先需要花费的时间比较多&#xff0c;其次数据出错率比较高&#xff0c;而且对错误的数据进行更改也比较困难&#xff0c;最后&#xff0c;检索数据费事费力。因此&#xff0c;在计算机上安装自习室管理和预约系统软件来发挥其高效地信息处理的作用&a…
阅读更多...
Python爬取淘宝商品评价信息实战

Python爬取淘宝商品评价信息实战

文章目录 一、分析需要爬取的页面二、实现爬取商品评价信息的代码1、通过解析显示评价信息的元素获取商品评价信息2、通过mitmproxy代理进行流量抓包获取商品评价信息 三、附-完整代码 前期出了一个《爬取京东商品评价信息实战》的教程&#xff0c;最近又有网友提到要出一个爬淘…
阅读更多...
案例分析篇13：系统分析与设计考点（2024年软考高级系统架构设计师冲刺知识点总结系列文章）

案例分析篇13：系统分析与设计考点（2024年软考高级系统架构设计师冲刺知识点总结系列文章）

专栏系列文章推荐： 2024高级系统架构设计师备考资料（高频考点&真题&经验）https://blog.csdn.net/seeker1994/category_12593400.html 【历年案例分析真题考点汇总】与【专栏文章案例分析高频考点目录】（2024年软考高级系统架构设计师冲刺知识点总结-案例分析篇-…
阅读更多...
幸福金龄会第二届《锦绣中华》广东省中老年协会携团队共襄盛举

幸福金龄会第二届《锦绣中华》广东省中老年协会携团队共襄盛举

近日&#xff0c;一场盛大的文化艺术盛宴——第二届《锦绣中华》中老年文旅文化艺术节在广东隆重举行。此次活动由幸福金龄会主办&#xff0c;吸引了广东省内各中老年协会的领导及文艺团队纷纷参与&#xff0c;共同为中华文化的传承与发展贡献力量。 广东省各中老年协会的会长、…
阅读更多...
Java项目：56 ssm681基于Java的超市管理系统+jsp

Java项目：56 ssm681基于Java的超市管理系统+jsp

作者主页&#xff1a;源码空间codegym 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 功能包括:商品分类&#xff0c;供货商管理&#xff0c;库存管理&#xff0c;销售统计&#xff0c;用户及角色管理&#xff0c;等等功能。项目采…
阅读更多...
WpsOfficeExcel表格固定首行,点视图下的冻结窗格下的冻结首行

WpsOfficeExcel表格固定首行,点视图下的冻结窗格下的冻结首行

wps 和 微软 excel 表格固定首行的方法基本一样 WpsExcel表格固定首行,点视图下的冻结窗格下的冻结首行 WpsExcel表格固定首行,点视图下的冻结窗格下的冻结首行 Excel表格固定首行,点视图下的冻结窗格下的冻结首行 在Excel中固定首行&#xff0c;通常是通过“冻结窗格”功能…
阅读更多...
复现文件上传漏洞

复现文件上传漏洞

一、搭建upload-labs环境 将下载好的upload-labs的压缩包&#xff0c;将此压缩包解压到WWW中&#xff0c;并将名称修改为upload&#xff0c;同时也要在upload文件中建立一个upload的文件。 然后在浏览器网址栏输入&#xff1a;127.0.0.1/upload进入靶场。 第一关 选择上传文件…
阅读更多...
综合实验---Web---进阶版

综合实验---Web---进阶版

实验配置&#xff1a; 7-1为内网Nginx服务器&#xff1b;7-2和7-3为Web服务器&#xff1b;7-4为网关服务器&#xff1b;7-5为外网客户机&#xff1b; yum安装Nginx&#xff1b;yum安装Mysql&#xff1b; 编译安装PHP&#xff1b;编译安装 由于我们Nginx和Mysql都是yum安装&…
阅读更多...
webserver烂大街？还有必要做么？

webserver烂大街？还有必要做么？

目录 什么是 Web Server&#xff1f; 如何提供 HTTP 服务&#xff1f; HTTP协议 简介 工作原理 工作步骤 HTTP请求报文格式 HTTP响应报文格式 HTTP请求方法 HTTP状态码 ​总结 都说webserver是C选手人手必备的烂大街项目&#xff0c;那么webserver 还有必要做么&…
阅读更多...
CAP 理论：分布式场景下我们真的只能三选二吗？

CAP 理论：分布式场景下我们真的只能三选二吗？

什么是 CAP 理论 CAP 理论是加州理工大学伯克利分校的 Eric Brewer 教授在 2000 年 7 月的 ACM PODC 会议上首次提出的&#xff0c;它是 Eric Brewer 在 Inktomi 期间研发搜索引擎、分布式 Web 缓存时得出的关于数据一致性&#xff08; C&#xff1a;Consistency &#xff09;…
阅读更多...
最新文章

Copyright @ 2022~2023