本文主要是介绍早知 121私人导航升级新版本, 第一次使用原生dialog标签。,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
早知121项目介绍说明
早知121 - 一个快速创建私人导航网站。
用途:
- 创建个人的工作导航,收集常用网址,可贡献给同事。
- 创建个人垂直领域导航
优点:
- 不需懂技术,不用维护服务器,维护私人导航收藏站。
网站体验地址:
https://www.zz121.com
2024年 6 月新版本使用技术说明
- 自动爬取 收藏 url的 LOGO,title, keywords, description 补充数据
- 使用html 原生 dialog 标签
- 引入 sweetalert2
- ajax代替不友好的 refresh location
- 新增 url 批量收藏
爬取url logo 说明
友好的展示出url 应该包含内容如下:
- LOGO 或者 icon
- title 是 SEO 字段
- keywords 是 SEO 字段
- description 是 SEO 字段
- url
LOGO 直观形象快速识别网站
title 定位品牌、公司、形象
keywords 和 description 定位网站是做什么的,有什么用。
url 识别访问地址。 不少网站隐藏不显示此字段。
早知121为使用方便, 会主动帮用户抓取目标url包含的 icon, title, keywords, description 补充搜藏记录,
抓取失败的网站,需要用户编辑填充数据。
原生dialog标签
原生 dialog弹出窗使用很好友, 自已写入任意 html 代码弹窗。
<dialog id="moveDialog"><form method="dialog" style="margin: 10px;"><div><label>移动-选择分组<br/><select name="class_id" id="class_id" style="margin: 10px;"><option value="0">请选择分组</option>{{range .ClassApiSrv.OptionsByUId .UserId}}<option value="{{.Id}}"> {{.Title}}</option>{{end}}</select></label></div><div style="display: flex; flex-direction: row-reverse;"><button onclick="moveSave()" class="btn btn-info">确定</button> <button class="btn btn-gray" >取消</button></div></form>
</dialog>
const favDialog = document.getElementById("moveDialog");
favDialog.showModal()原生dialog element有 show 和 showModal两个方法
show 贴紧元素,如 tips
showModal 是modal 窗口
本地改版后, 编辑收藏的 url, 移动分组也变的更简单友好了。
文档地址 dialog element document
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
这篇关于早知 121私人导航升级新版本, 第一次使用原生dialog标签。的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!