登录 注册

求大佬代码片段支持 / 分组 ←→快速切换分组

本贴最后更新于 496 天前，其中的信息可能已经沧海桑田

希望可以通过 方向键 ←→ 快速切换不同分组 而不是现在的仅可以支持 ↑↓

每一个框住的可以做一个分组

image.png

使用主题 Asri

image.png

有一个大概的思路

这个主题会在分组的中间添加一个 b3-menu__separator

image.png

标记 b3-menu__separator 的位置, 如果触发了 ← → 则将焦点跳转到当前焦点的下一个 b3-menu__separator 位置的下一个 button 位置

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    28448 引用 • 119797 回帖
  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    11156 引用 • 50670 回帖 • 52 关注
1 引用
[js][css] 斜杠菜单，导航栏，状态栏，文档树美化和增强 • wilsons
1 操作
Muu 在 2024-08-13 17:12:43 更新了该帖
广州 位置
100 悬赏
1 关注
2 收藏
1 赞同
1 引用
1 操作
9 回帖
5
4
675 144 3 283 5 1 236

相关帖子

被采纳的回答
  • wilsons • • 2 • 1 赞同
    付费者 捐赠者

    这个主题会在分组的中间添加一个 b3-menu__separator

    仅在未筛选时才加这个 b3-menu__separator, 筛选时是没有分组的，比如你输入 /j 或 /gj 就知道了。

    不过，在无分组情况下，我通过 skipElementNumInSearch = 3 模拟实现了，这个变量的作用是，在没有分组情况下，按方向键跳过几个元素（如下图第二个 GIF 所示）。

    效果如下

    有分组效果

    r24.gif

    无分组效果

    r25.gif

    代码

    注意事项

    由于左右方向键和思源的左右方向键冲突，这里采用了一些技巧，避开了这些问题，但不保证后续有没有别的问题，理论上应该问题不大。如果发现有兼容问题，可以开启 useCompatibilityMode = true，使用兼容模式，但兼容模式需要用 ctrl/cmd+左右方向键 代替，可能体验较差。

    最后提醒下，保存后刷新下页面，确保脚本正确执行。

    祝你好运 🍀

9 回帖
求大佬代码片段支持 / 分组 ←→快速切换分组

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • wilsons • • 1
    付费者 捐赠者

    Do 函数里增加下面这句代码即可。

    else if (event.key === 'Escape')
        menu.classList.add("fn__none");

    image.png

  • 其他回帖
  • Muu •
    付费者 作者

    @wilsons 大佬 可以根据这个思路进行下重构么?

    // 对于没有分组的其实可以动态获取每一列的button数量

const menu = document.querySelector(".hint--menu:not(.fn__none)");
const b3Item = document.querySelector(".hint--menu .b3-list-item");
const b3ItemStyle = window.getComputedStyle(b3Item)

const lineHeight = +b3ItemStyle.lineHeight.slice(0,-2)
const marginBottom = +b3ItemStyle.marginBottom.slice(0,-2)

// 这里有个问题 如果每一列只会有一个选项看注释是禁用的
// 但是这里其实应该还是可以启用下
// 其他思路: 感觉其实可以根据这个进行一个虚拟分组, 而不是直接跳过n个元素
skipElementNumInSearch = Math.floor(menu.offsetHeight / (lineHeight + marginBottom)) - 1  

// 搭配css 片段 
.hint--menu:not(.fn__none) > div > button:nth-child(1) {
    margin-top: 0;
}
    1 回复
  • wilsons • • 1 评论
    付费者 捐赠者

    当每一列的元素只有一个的时候

    按左右方向键会自动变成和上下键一样了，你试试就知道了。这里的 skipElementNumInSearch 为 0 确实也应该支持下，不过这个设置不设置都一样，通常设置大于 0 就行了，当只有一列时也是支持的，但不是通过这个参数支持的。

    另外，我所理解的虚拟分组，其实就是根据 列表总高度 / 菜单项行高，计算出每列应该显示多少行，然后按方向键时，根据这个行数跳到下一列的首行。

    这种算法理论上是可行的，但实际会不会准却也不好说，比如你下面这个截图，第一列就只有 4 行，其他的 5 行。

    image.png

    其实，我觉得，之所以用左右方向键的目的，无非是快速定位菜单项，那么无论是虚拟分组也好，跳过 n 个菜单项也好，其实目的都达到了，只不过虚拟分组看起来更优雅些罢了。

    但会不会足够稳定尚未可知，我空了再看看，不保证能解决问题，有时工具就是工具，能用够用就行。

    1 回复
    这种算法理论上是可行的，但实际会不会准却也不好说，比如你下面这个截图，第一列就只有 4 行，其他的 5 行。 | 这个就是我加那个 CSS 的意义 可以使得第一列有五行
    Muu • • 1 赞同
  • Muu •
    付费者 作者

    哦对了 还有一个问题, 当我打开了界面之后无法使用 ESC or 其他的键位 关闭弹出来的 hint-menu

    只能使用鼠标点击其他位置或者选择中某一个选项才可以关闭

    如果可以的话 麻烦帮 加个设置 指定键位可以关闭 弹出来的 hint-menu

  • 查看全部回帖
Muu
广州
回帖
92
 帖子
29
 积分
9490

近期热议

推荐标签 标签

  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。

    24 引用 • 33 回帖 • 3 关注
  • Sym

    Sym 是一款用 Java 实现的现代化社区（论坛/BBS/社交网络/博客）系统平台。

    下一代的社区系统，为未来而构建

    524 引用 • 4602 回帖 • 731 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库，该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable：一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样，HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 72 关注
  • 以太坊

    以太坊（Ethereum）并不是一个机构，而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity，使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物：投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎，基于 RESTful 接口。Elasticsearch 是用 Java 开发的，并作为 Apache 许可条款下的开放源码发布，是当前流行的企业级搜索引擎。设计用于云计算中，能够达到实时搜索，稳定，可靠，快速，安装使用方便。

    117 引用 • 99 回帖 • 190 关注
  • 微服务

    微服务架构是一种架构模式，它提倡将单一应用划分成一组小的服务。服务之间互相协调，互相配合，为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建，能够被独立的部署。

    97 引用 • 155 回帖 • 1 关注
  • MongoDB

    MongoDB（来自于英文单词“Humongous”，中文含义为“庞大”）是一个基于分布式文件存储的数据库，由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。它支持的数据结构非常松散，是类似 JSON 的 BSON 格式，因此可以存储比较复杂的数据类型。

    91 引用 • 59 回帖 • 1 关注
  • 负能量

    上帝为你关上了一扇门，然后就去睡觉了....努力不一定能成功，但不努力一定很轻松 (° ー °〃)

    89 引用 • 1251 回帖 • 376 关注
  • Office

    Office 现已更名为 Microsoft 365. Microsoft 365 将高级 Office 应用（如 Word、Excel 和 PowerPoint）与 1 TB 的 OneDrive 云存储空间、高级安全性等结合在一起，可帮助你在任何设备上完成操作。

    6 引用 • 35 回帖
  • BookxNote

    BookxNote 是一款全新的电子书学习工具，助力您的学习与思考，让您的大脑更高效的记忆。

    笔记整理交给我，一心只读圣贤书。

    1 引用 • 1 回帖 • 1 关注
  • 书籍

    宋真宗赵恒曾经说过：“书中自有黄金屋，书中自有颜如玉。”

    85 引用 • 414 回帖
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统（DBMS），它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的，并于 1988 年推出了第一个 OS/2 版本。

    21 引用 • 31 回帖 • 1 关注
  • AWS
    11 引用 • 28 回帖 • 1 关注
  • Word
    13 引用 • 41 回帖
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    92 引用 • 752 回帖
  • 分享

    有什么新发现就分享给大家吧！

    251 引用 • 1801 回帖 • 1 关注
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识，提高团队的工作效率，让用户满意。

    3 引用 • 8 回帖
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML 网页上使用，用来给 HTML 网页增加动态功能。

    736 引用 • 1307 回帖 • 2 关注
  • 心情

    心是产生任何想法的源泉，心本体会陷入到对自己本体不能理解的状态中，因为心能产生任何想法，不能分出对错，不能分出自己。

    59 引用 • 369 回帖
  • 微软

    微软是一家美国跨国科技公司，也是世界 PC 软件开发的先导，由比尔·盖茨与保罗·艾伦创办于 1975 年，公司总部设立在华盛顿州的雷德蒙德（Redmond，邻近西雅图）。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖 • 2 关注
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库，并提供多种语言的 API。从 2010 年 3 月 15 日起，Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始，Redis 的开发由 Pivotal 赞助。

    285 引用 • 248 回帖
  • TensorFlow

    TensorFlow 是一个采用数据流图（data flow graphs），用于数值计算的开源软件库。节点（Nodes）在图中表示数学操作，图中的线（edges）则表示在节点间相互联系的多维数据数组，即张量（tensor）。

    20 引用 • 19 回帖 • 1 关注
  • GAE

    Google App Engine（GAE）是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 851 关注
  • OpenCV
    15 引用 • 36 回帖 • 1 关注
  • Python

    Python 是一种面向对象、直译式电脑编程语言，具有近二十年的发展历史，成熟且稳定。它包含了一组完善而且容易理解的标准库，能够轻松完成很多常见的任务。它的语法简捷和清晰，尽量使用无异义的英语单词，与其它大多数程序设计语言使用大括号不一样，它使用缩进来定义语句块。

    561 引用 • 677 回帖
  • Sillot

    Insights（注意当前设置 master 为默认分支）

    汐洛彖夲肜矩阵（Sillot T☳Converbenk Matrix），致力于服务智慧新彖乄，具有彖乄驱动、极致优雅、开发者友好的特点。其中汐洛绞架（Sillot-Gibbet）基于自思源笔记（siyuan-note），前身是思源笔记汐洛版（更早是思源笔记汐洛分支），是智慧新录乄终端（多端融合，移动端优先）。

    主仓库地址：Hi-Windom/Sillot

    文档地址：sillot.db.sc.cn

    注意事项：

    1. ⚠️ 汐洛仍在早期开发阶段，尚不稳定
    2. ⚠️ 汐洛并非面向普通用户设计，使用前请了解风险
    3. ⚠️ 汐洛绞架基于思源笔记，开发者尽最大努力与思源笔记保持兼容，但无法实现 100% 兼容
    29 引用 • 25 回帖 • 152 关注
  • WebComponents

    Web Components 是 W3C 定义的标准，它给了前端开发者扩展浏览器标签的能力，可以方便地定制可复用组件，更好的进行模块化开发，解放了前端开发者的生产力。

    1 引用 • 17 关注

最新标签