登录 注册

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

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

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

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

image.png

使用主题 Asri

image.png

有一个大概的思路

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

image.png

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

  • 思源笔记

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

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

    25948 引用 • 107563 回帖
  • Q&A

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

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

相关帖子

被采纳的回答
  • 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
广州
回帖
88
 帖子
28
 积分
7984

近期热议

推荐标签 标签

  • 生活

    生活是指人类生存过程中的各项活动的总和，范畴较广，一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1432 回帖
  • Lute

    Lute 是一款结构化的 Markdown 引擎，支持 Go 和 JavaScript。

    29 引用 • 202 回帖 • 27 关注
  • Jenkins

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

    54 引用 • 37 回帖 • 1 关注
  • 分享

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

    248 引用 • 1794 回帖 • 2 关注
  • 正则表达式

    正则表达式（Regular Expression）使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖
  • Outlook
    1 引用 • 5 回帖 • 2 关注
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流，分享无限上传的图片，发布链接和视频，更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 450 关注
  • H2

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

    11 引用 • 54 回帖 • 672 关注
  • abitmean

    有点意思就行了

    • 32 关注
  • OneDrive
    2 引用 • 3 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件，它使得 Java 程序员能在不进行重部署的情况下，即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 675 关注
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 653 关注
  • Markdown

    Markdown 是一种轻量级标记语言，用户可使用纯文本编辑器来排版文档，最终通过 Markdown 引擎将文档转换为所需格式（比如 HTML、PDF 等）。

    171 引用 • 1537 回帖 • 1 关注
  • HBase

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

    17 引用 • 6 回帖 • 66 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息（如用户名与密码），即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权，因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 34 关注
  • 创业

    你比 99% 的人都优秀么？

    82 引用 • 1395 回帖
  • Firefox

    Mozilla Firefox 中文俗称“火狐”（正式缩写为 Fx 或 fx，非正式缩写为 FF），是一个开源的网页浏览器，使用 Gecko 排版引擎，支持多种操作系统，如 Windows、OSX 及 Linux 等。

    7 引用 • 30 回帖 • 385 关注
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎，可以结合 MySQL、PostgreSQL 做全文搜索，它可以提供比数据库本身更专业的搜索功能，使得应用程序更容易实现专业化的全文检索。

    1 引用 • 223 关注
  • App

    App（应用程序，Application 的缩写）一般指手机软件。

    91 引用 • 384 回帖
  • Scala

    Scala 是一门多范式的编程语言，集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 156 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 831 关注
  • 服务器

    服务器，也称伺服器，是提供计算服务的设备。由于服务器需要响应服务请求，并进行处理，因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 585 回帖
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 2 关注
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年，是中国的 IT 社区和服务平台，为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务，满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖
  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具，是一个全面整合的专业游戏引擎。

    25 引用 • 7 回帖 • 118 关注
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 764 关注
  • Quicker

    Quicker 您的指尖工具箱！操作更少，收获更多！

    37 引用 • 157 回帖

最新标签