希望可以通过 方向键 ←→ 快速切换不同分组 而不是现在的仅可以支持 ↑↓
每一个框住的可以做一个分组
使用主题 Asri
有一个大概的思路
这个主题会在分组的中间添加一个 b3-menu__separator
标记 b3-menu__separator 的位置, 如果触发了 ← → 则将焦点跳转到当前焦点的下一个 b3-menu__separator 位置的下一个 button 位置
本贴最后更新于 306 天前，其中的信息可能已经沧海桑田
-
思源笔记
25954 引用 • 107585 回帖
思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。
融合块、大纲和双向链接，重构你的思维。
-
Q&A
9962 引用 • 45255 回帖 • 76 关注
提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。
1 操作
Muu
在 2024-08-13 17:12:43 更新了该帖
相关帖子
被采纳的回答
-
wilsons • • 2 • 1 赞同付费者 捐赠者
这个主题会在分组的中间添加一个
b3-menu__separator仅在未筛选时才加这个
b3-menu__separator, 筛选时是没有分组的，比如你输入/j或/gj就知道了。不过，在无分组情况下，我通过
skipElementNumInSearch = 3模拟实现了，这个变量的作用是，在没有分组情况下，按方向键跳过几个元素（如下图第二个 GIF 所示）。效果如下
有分组效果
无分组效果
代码
注意事项
由于左右方向键和思源的左右方向键冲突，这里采用了一些技巧，避开了这些问题，但不保证后续有没有别的问题，理论上应该问题不大。如果发现有兼容问题，可以开启
useCompatibilityMode = true，使用兼容模式，但兼容模式需要用ctrl/cmd+左右方向键代替，可能体验较差。最后提醒下，保存后刷新下页面，确保脚本正确执行。
祝你好运 🍀
请输入回帖内容
...
-
这个主题会在分组的中间添加一个
b3-menu__separator仅在未筛选时才加这个
b3-menu__separator, 筛选时是没有分组的，比如你输入/j或/gj就知道了。不过，在无分组情况下，我通过
skipElementNumInSearch = 3模拟实现了，这个变量的作用是，在没有分组情况下，按方向键跳过几个元素（如下图第二个 GIF 所示）。效果如下
有分组效果
无分组效果
代码
注意事项
由于左右方向键和思源的左右方向键冲突，这里采用了一些技巧，避开了这些问题，但不保证后续有没有别的问题，理论上应该问题不大。如果发现有兼容问题，可以开启
useCompatibilityMode = true，使用兼容模式，但兼容模式需要用ctrl/cmd+左右方向键代替，可能体验较差。最后提醒下，保存后刷新下页面，确保脚本正确执行。
祝你好运 🍀
2 回复 - 其他回帖
-
当每一列的元素只有一个的时候
按左右方向键会自动变成和上下键一样了，你试试就知道了。这里的
skipElementNumInSearch为 0 确实也应该支持下，不过这个设置不设置都一样，通常设置大于 0 就行了，当只有一列时也是支持的，但不是通过这个参数支持的。
另外，我所理解的虚拟分组，其实就是根据 列表总高度 / 菜单项行高，计算出每列应该显示多少行，然后按方向键时，根据这个行数跳到下一列的首行。
这种算法理论上是可行的，但实际会不会准却也不好说，比如你下面这个截图，第一列就只有 4 行，其他的 5 行。
其实，我觉得，之所以用左右方向键的目的，无非是快速定位菜单项，那么无论是虚拟分组也好，跳过 n 个菜单项也好，其实目的都达到了，只不过虚拟分组看起来更优雅些罢了。
但会不会足够稳定尚未可知，我空了再看看，不保证能解决问题，有时工具就是工具，能用够用就行。
1 回复这种算法理论上是可行的，但实际会不会准却也不好说，比如你下面这个截图，第一列就只有 4 行，其他的 5 行。 | 这个就是我加那个 CSS 的意义 可以使得第一列有五行 -
@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 回复 - 查看全部回帖
