登录 注册

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

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

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

image.png

使用主题 Asri

image.png

有一个大概的思路

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

image.png

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

  • 思源笔记

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

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

    22380 引用 • 89585 回帖
  • Q&A

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

    8128 引用 • 37050 回帖 • 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 回帖
求大佬代码片段支持 / 分组 ←→快速切换分组

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • 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 赞同
  • wilsons • • 2 • 1 赞同
    付费者 捐赠者

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

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

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

    效果如下

    有分组效果

    r24.gif

    无分组效果

    r25.gif

    代码

    注意事项

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

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

    祝你好运 🍀

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

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

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

    这句话什么意思？

    搭配css 片段

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

    1 回复
  • 查看全部回帖
Muu
广州
回帖
67
 帖子
21
 积分
3339

近期热议

推荐标签 标签

  • DNSPod

    DNSPod 建立于 2006 年 3 月份，是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析，让电信用户访问电信的服务器，网通的用户访问网通的服务器，教育网的用户访问教育网的服务器，达到互联互通的效果。

    6 引用 • 26 回帖 • 510 关注
  • 职场

    找到自己的位置，萌新烦恼少。

    127 引用 • 1705 回帖
  • 锤子科技

    锤子科技（Smartisan）成立于 2012 年 5 月，是一家制造移动互联网终端设备的公司，公司的使命是用完美主义的工匠精神，打造用户体验一流的数码消费类产品（智能手机为主），改善人们的生活质量。

    4 引用 • 31 回帖 • 2 关注
  • SSL

    SSL（Secure Sockets Layer 安全套接层），及其继任者传输层安全（Transport Layer Security，TLS）是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 431 关注
  • abitmean

    有点意思就行了

    • 30 关注
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。

    86 引用 • 122 回帖 • 625 关注
  • 智能合约

    智能合约（Smart contract）是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易，这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖 • 4 关注
  • PWL

    组织简介

    用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织，“用爱发电”象征开源与贡献精神，加入组织，代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入：用爱发电组织邀请帖。
    用爱发电组织官网：https://programmingwithlove.stackoverflow.wiki/

    用爱发电组织的核心驱动力：

    • 遵守开源守则，体现开源&贡献精神：以分享为目的，拒绝非法牟利。
    • 自我保护：使用适当的 License 保护自己的原创作品。
    • 尊重他人：不以各种理由、各种漏洞进行未经允许的抄袭、散播、洩露；以礼相待，尊重所有对社区做出贡献的开发者；通过他人的分享习得知识，要留下足迹，表示感谢。
    • 热爱编程、热爱学习：加入组织，热爱编程是首当其要的。我们欢迎热爱讨论、分享、提问的朋友，也同样欢迎默默成就的朋友。
    • 倾听：正确并恳切对待、处理问题与建议，及时修复开源项目的 Bug ，及时与反馈者沟通。不抬杠、不无视、不辱骂。
    • 平视：不诋毁、轻视、嘲讽其他开发者，主动提出建议、施以帮助，以和谐为本。只要他人肯努力，你也可能会被昔日小看的人所超越，所以请保持谦虚。
    • 乐观且活跃：你的努力决定了你的高度。不要放弃，多年后回头俯瞰，才会发现自己已经成就往日所仰望的水平。积极地将项目开源，帮助他人学习、改进，自己也会获得相应的提升、成就与成就感。
    1 引用 • 487 回帖
  • 大数据

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

    93 引用 • 113 回帖
  • 机器学习

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

    83 引用 • 37 回帖
  • Tomcat

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

    162 引用 • 529 回帖
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 26 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码，添加在 [设置 - 外观 - 代码片段] 中，这些代码会在思源笔记加载时自动执行，用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] 或 [js] 用于区分代码片段类型。

    70 引用 • 375 回帖 • 1 关注
  • danl
    • 132 关注
  • 周末

    星期六到星期天晚，实行五天工作制后，指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 29 关注
  • H2

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

    11 引用 • 54 回帖 • 653 关注
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具，它能把各种资源，例如 JS、CSS（less/sass）、图片等都作为模块来使用和处理。

    41 引用 • 130 回帖 • 260 关注
  • WebComponents

    Web Components 是 W3C 定义的标准，它给了前端开发者扩展浏览器标签的能力，可以方便地定制可复用组件，更好的进行模块化开发，解放了前端开发者的生产力。

    1 引用
  • 京东

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

    14 引用 • 102 回帖 • 374 关注
  • 知乎

    知乎是网络问答社区，连接各行各业的用户。用户分享着彼此的知识、经验和见解，为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • 996

    “工作 996， 生病 ICU”

    13 引用 • 200 回帖 • 6 关注
  • App

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

    91 引用 • 384 回帖 • 1 关注
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    6 引用 • 38 回帖
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统，它问世于 1985 年，起初仅仅是 Microsoft-DOS 模拟环境，后续的系统版本由于微软不断的更新升级，不但易用，也慢慢的成为家家户户人们最喜爱的操作系统。

    222 引用 • 473 回帖
  • 人工智能

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

    133 引用 • 189 回帖
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架，基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 391 关注

最新标签