专注苏州网站建设莱芜58同城招聘网最新招聘
张小明 2026/3/2 21:28:45
专注苏州网站建设,莱芜58同城招聘网最新招聘,一元购网站建设流程,百度竞价点击软件奔奔Foundation Joyride#xff08;页面引导游#xff09;详解#xff08;超级完整版#xff0c;一次讲透#xff09; 我们继续你的 Foundation 系列#xff0c;今天把 Joyride 讲得明明白白#xff01;Joyride 是 ZURB 为 Foundation 开发的页面引导插件#xff0c;用于创…Foundation Joyride页面引导游详解超级完整版一次讲透我们继续你的 Foundation 系列今天把Joyride讲得明明白白Joyride 是 ZURB 为 Foundation 开发的页面引导插件用于创建新手引导、功能游览feature tour通过气泡提示一步步引导用户熟悉界面。支持自动启动、Cookie 记住、暴露高亮、模态模式等。重要提醒Joyride 在 Foundation 5 中内置在 Foundation 6 中已分离为独立插件GitHub: zurb/joyride需单独引入兼容 Foundation 6。它依赖 Tooltip 组件。1. 基本结构Foundation 6 独立版oldata-joyrideidmyJoyridelidata-target#element1h5第一步/h5p这里解释第一个功能/p/lilidata-target#element2data-positionbottomh5第二步/h5p支持指定位置top/bottom/left/right/p/lili!-- 无 target 时为模态提示 --h5结束/h5p谢谢体验/pbuttonclassbuttondata-joyride-close完成/button/li/ol!-- 触发按钮 --buttondata-joyride-start#myJoyride开始引导/button2. 自动启动 Cookie 记住加data-autostarttrue自动开始支持 localStorage/Cookie 只显示一次。3. 高级选项data-position提示位置data-closablefalse不可关闭data-next-text/data-prev-text自定义按钮文字暴露高亮expose自动加遮罩高亮目标元素4. 今天直接给你抄的完整代码Foundation 6 Joyride 独立版复制就能跑!DOCTYPEhtmlhtmlheadlinkrelstylesheethrefhttps://cdn.jsdelivr.net/npm/foundation-sites6.8.1/dist/css/foundation.min.css!-- Joyride CSS独立版 --linkrelstylesheethrefhttps://cdn.jsdelivr.net/npm/foundation-joyride3.0.0/dist/foundation.joyride.min.css/headbodybuttonclassbutton largedata-joyride-start#tour开始新手引导/buttondividelement1stylemargin:50px;padding:20px;background:#eee;h4这是第一个目标元素/h4/divdividelement2stylemargin:100px;padding:20px;background:#ddd;h4这是第二个目标元素/h4/divoldata-joyrideidtourdata-autostartfalselidata-target#element1h5欢迎第一步/h5p这里是你的仪表盘概览/p/lilidata-target#element2data-positiontoph5第二步/h5p点击这里添加新项目/p/lilih5引导结束 /h5p现在你可以自由探索了/pbuttonclassbutton successdata-joyride-close知道了/button/li/olscriptsrchttps://cdn.jsdelivr.net/npm/jquery3.7.1/dist/jquery.min.js/scriptscriptsrchttps://cdn.jsdelivr.net/npm/foundation-sites6.8.1/dist/js/foundation.min.js/script!-- Joyride JS独立版 --scriptsrchttps://cdn.jsdelivr.net/npm/foundation-joyride3.0.0/dist/foundation.joyride.min.js/scriptscript$(document).foundation();/script/body/html下面给你看真实效果Joyride 引导游的经典演示截图官方仓库 文档GitHub最新版https://github.com/zurb/joyride老版Foundation 5https://get.foundation/sites/docs-v5/components/joyride.html你现在想干嘛→ 明天终于讲 Foundation 表格Table→ 帮我做一个 5 步的新手引导带高亮和 Cookie 只显示一次→ 给我一个结合 Off-Canvas 的后台引导代码直接回复下一句“明天讲 table”“帮我做新手引导”“给我后台 Joyride”我立刻给你写好