登录 注册

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

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

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

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

image.png

使用主题 Asri

image.png

有一个大概的思路

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

image.png

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

  • 思源笔记

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

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

    25757 引用 • 106604 回帖
  • Q&A

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

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

相关帖子

被采纳的回答
  • 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 •
    付费者 作者

    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
广州
回帖
88
 帖子
28
 积分
7787

近期热议

推荐标签 标签

  • 印象笔记
    3 引用 • 16 回帖 • 1 关注
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架，使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用，例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 35 关注
  • AngularJS

    AngularJS 诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 512 关注
  • Lute

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

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

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

    1 引用 • 2 回帖 • 183 关注
  • BAE

    百度应用引擎（Baidu App Engine）提供了 PHP、Java、Python 的执行环境，以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用，并且提供动态扩容和负载均衡的运行环境，让开发者不用考虑高成本的运维工作，只需专注于业务逻辑，大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 676 关注
  • Scala

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

    13 引用 • 11 回帖 • 158 关注
  • B3log

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

    1063 引用 • 3455 回帖 • 151 关注
  • Visio
    1 引用 • 2 回帖
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug（漏洞）。

    76 引用 • 1742 回帖 • 6 关注
  • 机器学习

    机器学习（Machine Learning）是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。

    77 引用 • 37 回帖
  • iOS

    iOS 是由苹果公司开发的移动操作系统，最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统，最初是设计给 iPhone 使用的，后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样，属于类 Unix 的商业操作系统。

    89 引用 • 150 回帖
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用 • 2 关注
  • Kubernetes

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

    118 引用 • 54 回帖
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架，使用 Node.js 编写。

    22 引用 • 148 回帖 • 9 关注
  • flomo

    flomo 是新一代 「卡片笔记」 ，专注在碎片化时代，促进你的记录，帮你积累更多知识资产。

    6 引用 • 143 回帖
  • 链书

    链书（Chainbook）是 B3log 开源社区提供的区块链纸质书交易平台，通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书，我们共同构建这个全新的交易平台，让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线，也许以后还有计划重制上线。

    14 引用 • 257 回帖 • 3 关注
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统，是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议，并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想，是一个性能稳定的多用户网络操作系统。

    954 引用 • 944 回帖
  • MySQL

    MySQL 是一个关系型数据库管理系统，由瑞典 MySQL AB 公司开发，目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    693 引用 • 537 回帖 • 1 关注
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案，后端采用 Go 编写，采用 MIT 许可证。

    5 引用 • 16 回帖 • 3 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台，用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统（CMS）来使用。WordPress 是一个免费的开源项目，在 GNU 通用公共许可证（GPLv2）下授权发布。

    45 引用 • 114 回帖 • 180 关注
  • 京东

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

    14 引用 • 102 回帖 • 312 关注
  • SOHO

    为成为自由职业者在家办公而努力吧！

    7 引用 • 55 回帖
  • 区块链

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

    92 引用 • 752 回帖
  • 设计模式

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

    200 引用 • 120 回帖 • 1 关注
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器，在 1999 年被捐献给 ASF（Apache Software Foundation），隶属于 Jakarta 项目，现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范，同时也提供 HTTP 服务，是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖 • 1 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具，支持本地 Markdown 文件编辑，支持双向链接和关系图。

    A second brain, for you, forever.

    24 引用 • 242 回帖

最新标签