SAO UI Plan -- SAO Utils Web 1.0

Akilar

发布于 2021-06-11 11:17:02

2K1

文章被收录于专栏：Akilarの糖果屋Akilarの糖果屋

点击查看更新记录

更新记录

2021-01-24:内测版v0.07

实现SAO风格的右键菜单
添加了点击音效，默认使用本站同款，可以自定义配置
支持添加链接或者自定义脚本动作
添加Ctrl+右键转换原生菜单功能
几个常用脚本分享

2021-01-25:内测版v0.14

新增了3D模式开关配置项

2021-01-26:内测版v0.21

新增了3D模式下浮动效果
适配了pjax。调用了Butterfly主题自带的pjax对象。其他主题需要另外适配。

2021-01-28:内测版v0.37

正式版待发布，因为显隐逻辑完全改变，预备转至新帖；

2021-01-29:正式版v1.0

1.0版本正式版发布。最终确定此帖为SAO UI右半边菜单,适合可用菜单项较少且习惯精简风格的用户。

点击查看参考教程

参考方向	教程原贴
菜单边框风格伪类样式实现方案	codepen-Pure CSS SAO Menu Thing
右键菜单显隐逻辑和原生实现方案
样式风格参考，图标、音效资源采集	SAO Utils
图标采集	fontawesome
pjax适配参考

资源下载

由于本教程涉及的所有修改对缩进格式等有严格要求，担心自己控制不好的可以直接下载静态资源。参照教程进行修改。

下载资源文件

预览效果

写在最前

来自店长的碎碎念

2021.01.24

写一个SAO风格的右键菜单算是我的一个执念了，但是搜遍全网页找不到网页版的内容，于是我想起来多年前就用过的一款软件SAO Utils，可惜它虽然有完整的菜单逻辑，但是却是基于C语言写的。至多只能参考一些音效。

最后兜兜转转，在魔改博客时看到了Volantis的右键菜单。学习了一下右键菜单的魔改原理。决定自己来从零开始做一个SAO风格的右键菜单。

因为这个项目，魔怔了大概半个月，~~好在那半个月单位工作基本划水。（嘛，总之摸鱼也是为了给大家写好看的魔改教程嘛）~~一直被二级菜单的显隐逻辑所困扰，因为用到了相对定位，中间有一段元素是空白的，没法在不破坏菜单项显示效果的情况下直接依靠hover实现持续显示二级菜单的效果，最后是用定时函数控制绝对显隐，用hover控制持续显隐。总算是有了一个相对舒适的显隐体验。

在一开始，因为想到以前一直被一些读者喷右键菜单占用了原生菜单很讨厌~~（说实话这样的读者也很讨厌）~~。所以这次在@卓越科技建议下添加了ctrl+右键打开原生右键菜单的功能。然后考虑到菜单界面对手机不友好，干脆对手机不生效了。

在添加音效时，因为直接链接跳转的话，会来不及启动点击音效，所以只能使用超时函数设置了0.5秒的延迟，给音效播放留点时间。

也正是因为不是依赖于a标签的超链接，而是使用window.location.href来实现页面重定向，所以目前对于pjax的适配还是有些许不好。会在切换页面时打断全局音乐。不过塞翁失马焉知非福，也正是因为如此，我又添加了自定义脚本的配置项接口。可以让读者自己开发各种各样的脚本来丰富菜单功能啦。

~~说到底，既然可以自定义脚本了，那应该也可以适配pjax实现无伤跳转才对。唉，果然还是太菜了~~

总之，这次的项目就先告一段落啦！

米娜桑，Link Start！

教程正文

点击查看教程正文

新建：

新建:

修改,引入右键菜单网页元素，注意取消了缓存配置，转为完全默认，需要将改为:

新建,控制右键菜单的显隐。此处的脚本引入使用了异步加载。因为全部都是触发类函数，在监听到相应的点击或悬停事件之前不会执行，所以甚至不会有加载完成后执行脚本的那段阻塞时间。

修改,添加CDN配置项和菜单选项：

因为这次的配置逻辑较为繁复，所以参数解释会比较多：

参数	备选值	参数释义
enable	true , false	true为开启右键菜单，false为关闭右键菜单
ThreeD	true , false	true为开启3D效果，false为关闭3D效果
music.enable	true , false	true为开启点击音效，false为关闭点击音效
music.Launcher	音乐文件的相对路径或外链	右键点击打开菜单时的音效，留空则使用默认音效
music.Click	音乐文件的相对路径或外链	左键点击菜单选项时的音效，留空则使用默认音效
menu_list	见下文	菜单选项
menu_list.name	text	菜单选项标题
menu_list.icon	eg:fa fa-link	菜单选项图标，使用fontawesome，也可以使用iconfont
menu_list.link	url	链接，站内建议使用相对路径，站外需要使用带协议的绝对路径,与action互斥，只能填写一个
menu_list.action	function	点击动作，详见本帖拓展内容，与link互斥，只能填写一个
menu_list.child_list	类似于menu_list	仅一级菜单支持该配置项，其余下辖配置项与menu_list相同
child_list.name	text	菜单选项标题
child_list.icon	eg:fa fa-link	菜单选项图标，使用fontawesome，也可以使用iconfont
child_list.link	url	链接，站内建议使用相对路径，站外需要使用带协议的绝对路径,与action互斥，只能填写一个
child_list.action	function	点击动作，详见本帖拓展内容，与link互斥，只能填写一个

自定义脚本拓展

点击查看脚本拓展内容

糖果屋出品的右键菜单提供了自定义js配置，读者可以通过封装自己的js脚本，直接通过菜单选项调用。以下会分享几个简单示例。更多内容可以自行探索。希望可以启发读者，在评论区留下更多有趣的脚本。

使用方法:在上文的menu_list或者child_list配置项的action填写函数名即可正常调用。注意action和link互斥。所以写了action就不要写link了

- name: Mirror
  icon: fa fa-indent
  action: Mirror()
- name: Search
  icon: fa fa-search
  action: openSearch()
- name: Tidio
  icon: fa fa-server
  action: openTidio()

镜像站跳转
打开local-search搜索按钮
打开Algolia搜索按钮
打开Tidio
跳转评论区
关闭当前窗口

功能：针对gitee镜像站和当前站点的同篇文章跳转，记得更改链接。

function Mirror() {
  let pathname;
  let hostname;
  let url;
  pathname = window.location.pathname;
  hostname = window.location.hostname;
  if (hostname === 'akilar.top') {
    url = "https://akilar.gitee.io" + pathname;
    window.alert("即将前往糖果屋分店?");
    window.location.href = url;
  }
  else if(hostname === 'akilar.gitee.io') {
    url = "https://akilar.top" + pathname;
    window.alert("正在返回糖果屋本部?！");
    window.location.href = url;
  }
  else {
    window.alert("Master，本地调试不需要跳转哦！?");
  }
}

功能：打开local-search搜索按钮（提取自Butterfly源码，其他主题可能不生效）。

function openSearch() {
  document.body.style.cssText = 'width: 100%;overflow: hidden'
  document.querySelector('#local-search .search-dialog').style.display = 'block'
  document.querySelector('#local-search-input input').focus()
  btf.fadeIn(document.getElementById('search-mask'), 0.5)
  if (!loadFlag) {
    search(GLOBAL_CONFIG.localSearch.path)
    loadFlag = true
  }
  // shortcut: ESC
  document.addEventListener('keydown', function f (event) {
    if (event.code === 'Escape') {
      closeSearch()
      document.removeEventListener('keydown', f)
    }
  })
}

功能：打开algolia搜索按钮（提取自Butterfly源码，其他主题可能不生效）。

function openAlgolia() {
  document.body.style.cssText = 'width: 100%;overflow: hidden'
  document.querySelector('#algolia-search .search-dialog').style.display = 'block'
  document.querySelector('#algolia-search .ais-search-box--input').focus()
  btf.fadeIn(document.getElementById('search-mask'), 0.5)
  // shortcut: ESC
  document.addEventListener('keydown', function f (event) {
    if (event.code === 'Escape') {
      closeSearch()
      document.removeEventListener('keydown', f)
    }
  })
}

功能：打开Tidio在线聊天界面（提取自Butterfly源码，其他主题可能不生效）

function openTidio() {
window.tidioChatApi.show();window.tidioChatApi.open();
}

功能：若当前页面有评论区，则跳转评论区，若没有，则跳转到留言板页面，评论区的挂载ID和留言板路径可能不一致，请自己根据实际情况替换。

function ToComment(){
  var hasComment = document.getElementById('post-comment');
  if (hasComment){
    window.location.href = '#post-comment'; //如果有评论区就跳转到评论区
  }
  else{
    linkStart('/comments/');//如果没有，就跳转到留言板
    //linkStart是本帖的SAO_Menu.js中带的跳转函数，用于pjax适配
  }
}

功能：关闭当前页面。既然是SAO，怎么可以不致敬一下登出键呢？(对无痕窗口不生效，会提示scripts may close only the windows that were opened by them)

//关闭当前页面
function Logout(){
  window.opener=null;
  window.open('','_self');
  window.close();
}

TO DO

SAO风格的右键菜单

二级菜单显隐逻辑适配

Ctrl+右键恢复原生菜单

适配pjax，站内跳转不打断全局音乐

补全左侧圆形列表；详见2.0

补全左侧角色属性栏样式；详见2.0

3D显示效果

添加浮动动态动画

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-01-24，如有侵权请联系 cloudcommunity@tencent.com 删除

网站

图像处理

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

网站

图像处理

登录后参与评论

0 条评论

热度