登录 注册

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

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

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

image.png

使用主题 Asri

image.png

有一个大概的思路

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

image.png

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

  • 思源笔记

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

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

    22386 引用 • 89635 回帖
  • Q&A

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

    8132 引用 • 37071 回帖 • 160 关注
1 引用
[分享] 斜杠命令菜单展开和支持左右方向键 • wilsons
1 操作
Muu 在 2024-08-13 17:12:43 更新了该帖
广州 位置
100 悬赏
1 关注
2 收藏
1 赞同
1 引用
1 操作
9 回帖
5
4
195 107 84 1

相关帖子

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

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

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

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

    效果如下

    有分组效果

    r24.gif

    无分组效果

    r25.gif

    代码

    注意事项

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

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

    祝你好运 🍀

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

欢迎来到这里！

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

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

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

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

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

    效果如下

    有分组效果

    r24.gif

    无分组效果

    r25.gif

    代码

    注意事项

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

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

    祝你好运 🍀

    2 回复
    1 引用
  • 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 •
    付费者 捐赠者

    你说的根据高度和行高计算每列行数，这个理解了。

    如果每一列只会有一个选项看注释是禁用的 但是这里其实应该还是可以启用下

    这句话什么意思？

    搭配css 片段

    这个 css 片段和谁搭配？你说了几个问题，还是同一个问题的不同角度描述？

    1 回复
  • Muu •
    付费者 作者

    CSS 片段作用

    image.png

    image.png

    感觉像是主题的问题

    主题的原则 看起来是如果进行了筛选 就是将所有的当成了一个分组 而每一个分组的第一个元素存在 margin-top

    而这就导致了第一列的元素会因为这一点点 margin 将第五个元素挤到下一列 所以使用此 css 去掉这个在当前场景多余的 margin-top

    但是会影响未筛选的时候的第一个元素也会被去掉 margin-top ( 可能会有更好的 seletor? 只去掉筛选后的那个)

    代码问题

    如果每一列只会有一个选项看注释是禁用的 但是这里其实应该还是可以启用下

    image.png

    这里看了下逻辑 如果是 0 就关了, 但是采用 我说的那种虚拟分组 其实开关就不应该是这个了

    image.png

    针对的是这种情况, 当每一列的元素只有一个的时候, 那个 skipElementNumInSearch 就是 0 了

    1 回复
    1 操作
    Muu 在 2024-08-14 14:59:31 更新了该回帖
  • wilsons • • 1 评论
    付费者 捐赠者

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

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

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

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

    image.png

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

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

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

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

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

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

  • Muu •
    付费者 作者

    @wilsons 根据你的代码, 我改了下, 支持了虚拟分组的 ←→ 操作

    但是当我点击了 ESC 无法关闭 hint-menu 必须点击下其他的地方 hint-menu 才会消失

    这个麻烦你帮忙看下 该怎么改下才能支持 ESC 或者其他指定按键关闭它 (不是写前端的对前端的操作不太了解)

    2 回复
  • wilsons • • 1
    付费者 捐赠者

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

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

    image.png

  • wilsons •
    付费者 捐赠者

    我也实现了虚拟分组功能，代码已更新。

    通过这个函数实现的。

    // 计算计算虚拟列表大小
function calcSearchGroupSize(menu)
请输入回帖内容 ...
Muu
广州
回帖
67
 帖子
21
 积分
3339

近期热议

推荐标签 标签

  • Typecho

    Typecho 是一款博客程序，它在 GPLv2 许可证下发行，基于 PHP 构建，可以运行在各种平台上，支持多种数据库（MySQL、PostgreSQL、SQLite）。

    12 引用 • 65 回帖 • 439 关注
  • 倾城之链
    23 引用 • 66 回帖 • 138 关注
  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言，它只是一个框架和一组服务，用于通过插件组件构建开发环境。

    75 引用 • 258 回帖 • 619 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统，主要使用于便携设备。2005 年由 Google 收购注资，并拉拢多家制造商组成开放手机联盟开发改良，逐渐扩展到到平板电脑及其他领域上。

    334 引用 • 323 回帖 • 2 关注
  • BND

    BND（Baidu Netdisk Downloader）是一款图形界面的百度网盘不限速下载器，支持 Windows、Linux 和 Mac，详细介绍请看这里。

    107 引用 • 1281 回帖 • 28 关注
  • 前端

    前端技术一般分为前端设计和前端开发，前端设计可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1348 回帖 • 2 关注
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    568 引用 • 3532 回帖
  • V2Ray
    1 引用 • 15 回帖 • 2 关注
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件，让构建、部署、自动化集成项目变得简单易用。

    53 引用 • 37 回帖 • 2 关注
  • 小说

    小说是以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    28 引用 • 108 回帖
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本，加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较（vimdiff）、语法高亮、全面的帮助系统、本地脚本（Vimscript）和便于选择的可视化模式。

    29 引用 • 66 回帖 • 1 关注
  • 人工智能

    人工智能（Artificial Intelligence）是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    133 引用 • 189 回帖
  • 京东

    京东是中国最大的自营式电商企业，2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月，京东在美国纳斯达克证券交易所正式挂牌上市（股票代码：JD），是中国第一个成功赴美上市的大型综合型电商平台，与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 374 关注
  • Flume

    Flume 是一套分布式的、可靠的，可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 632 关注
  • 大数据

    大数据（big data）是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合，是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖 • 1 关注
  • B3log

    B3log 是一个开源组织，名字来源于“Bulletin Board Blog”缩写，目标是将独立博客与论坛结合，形成一种新的网络社区体验，详细请看 B3log 构思。目前 B3log 已经开源了多款产品：Sym、Solo、Vditor 和 思源笔记。

    1063 引用 • 3453 回帖 • 203 关注
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据（或者事件）流的 API。它组合了观察者模式，迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 156 关注
  • Angular

    Angular 是 AngularJS 的新版本。

    26 引用 • 66 回帖 • 537 关注
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合，以模块的方式组织管理插件以
    及相关配置，为不同的语言开发量身定制了相关的开发模块，该模块提供代码自动补全，
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 101 关注
  • H2

    H2 是一个开源的嵌入式数据库引擎，采用 Java 语言编写，不受平台的限制，同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式，可以兼容一些主流的数据库，因此采用 H2 作为开发期的数据库非常方便。

    11 引用 • 54 回帖 • 653 关注
  • 域名

    域名（Domain Name），简称域名、网域，是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。

    43 引用 • 208 回帖 • 1 关注
  • 房星科技

    房星网，我们不和没有钱的程序员谈理想，我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源，遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 585 关注
  • Q&A

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

    8131 引用 • 37068 回帖 • 160 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎，它支持自动化部署、大规模可伸缩、应用容器化管理。

    110 引用 • 54 回帖
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言，由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码，也可以编译成 JavaScript，方便在没有 JVM 的设备上运行。在 Google I/O 2017 中，Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 64 关注
  • gRpc
    11 引用 • 9 回帖 • 74 关注
  • 设计模式

    设计模式（Design pattern）代表了最佳的实践，通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖 • 1 关注

最新标签