希望可以通过 方向键 ←→ 快速切换不同分组 而不是现在的仅可以支持 ↑↓
每一个框住的可以做一个分组
使用主题 Asri
有一个大概的思路
这个主题会在分组的中间添加一个 b3-menu__separator
标记 b3-menu__separator 的位置, 如果触发了 ← → 则将焦点跳转到当前焦点的下一个 b3-menu__separator 位置的下一个 button 位置
-
思源笔记
22382 引用 • 89603 回帖
思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。
融合块、大纲和双向链接，重构你的思维。
-
Q&A
8130 引用 • 37059 回帖 • 160 关注
提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。
1 引用
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+左右方向键代替，可能体验较差。最后提醒下，保存后刷新下页面，确保脚本正确执行。
祝你好运 🍀
请输入回帖内容
...
-
@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 回复 - 其他回帖
-
CSS 片段作用
感觉像是主题的问题
主题的原则 看起来是如果进行了筛选 就是将所有的当成了一个分组 而每一个分组的第一个元素存在 margin-top
而这就导致了第一列的元素会因为这一点点 margin 将第五个元素挤到下一列 所以使用此 css 去掉这个在当前场景多余的 margin-top
但是会影响未筛选的时候的第一个元素也会被去掉 margin-top ( 可能会有更好的 seletor? 只去掉筛选后的那个)
代码问题
如果每一列只会有一个选项看注释是禁用的 但是这里其实应该还是可以启用下
这里看了下逻辑 如果是 0 就关了, 但是采用 我说的那种虚拟分组 其实开关就不应该是这个了
针对的是这种情况, 当每一列的元素只有一个的时候, 那个
skipElementNumInSearch就是 0 了1 回复1 操作Muu 在 2024-08-14 14:59:31 更新了该回帖 - 查看全部回帖
