更新记录

03/17 00:12：解决滚动页面后右击菜单栏出现在顶部。解决办法将 e.clientY 换成 e.pageY

在线预览：https://nowtime.cc/mdui/contextmenu.html

核心 JavaScript 代码：

    var $$ = mdui.JQ;
    //监听鼠标右击事件 / 移动端长按事件
    $$(document).on('contextmenu', function (e) {
        // console.log(e);

        //0：移动端长按（iOS 测试未通过）
        //2：电脑端右键
        if(e.button === 2 || e.button === 0) {
            e.preventDefault();//阻止冒泡，阻止默认的浏览器菜单

            //（修改了这里）鼠标点击位置，相对于页面
            var _x = e.pageX,
                _y = e.pageY;

            let $div = $$("<div></div>").css({
                position: 'absolute',
                top: _y+'px',
                left: _x+'px',
            });
            $$('body').append($div);//创建临时DOM

            // anchorSelector 表示触发菜单的元素的 CSS 选择器或 DOM 元素
            // menuSelector 表示菜单的 CSS 选择器或 DOM 元素
            // options 表示组件的配置参数，见下面的参数列表
            // 完整文档列表：https://doc.nowtime.cc/mdui/menu.html
            var inst = new mdui.Menu($div, '#menu');
            inst.open();//打开菜单栏
            $div.remove();//销毁创建的临时DOM
        }
    });

完整 HTML代码

- 阅读剩余部分 -

Darkmode.Js

?黑暗模式/夜间模式，只需要几秒钟就可以给你的网站添加这个功能

本站已经添加，你可以看到网站左下方有个小按钮，你点击 Ta 预览以下效果吧！

该库使用 CSS mix-blend-mode 来将暗模式带入您的任何网站。只需复制粘贴该片段，您将获得一个小部件以打开和关闭暗模式。您也可以不使用窗口小部件而以编程方式使用它。该插件是轻量级的，内置于​​ VanillaJS 中。默认情况下，它也使用 localstorage，因此您的上一次设置将被记住！

特点

• 窗口小部件自动显示
• 保存用户选择
• 如果操作系统偏好的主题为深色，则自动显示Darkmode（如果浏览器支持prefers-color-scheme）
• 可以以编程方式使用而无需小部件

WordPress 插件

如果您使用的是 Wordpress，则可能需要看看基于 Darkmode.js 的这些插件：

• https://wordpress.org/plugins/blackout-darkmode-widget/
• https://wordpress.org/plugins/darkmode/

简单方法（使用JSDelivr CDN）

只需将此代码添加到您的 html 页面：

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.5/lib/darkmode-js.min.js"></script>
<script>new Darkmode().showWidget();</script>

高级调用参数：

- 阅读剩余部分 -