Foundation Joyride
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-joyrideid="myJoyride"><lidata-target="#element1"><h5>第一步</h5><p>这里解释第一个功能</p></li><lidata-target="#element2"data-position="bottom"><h5>第二步</h5><p>支持指定位置：top/bottom/left/right</p></li><li><!-- 无 target 时为模态提示 --><h5>结束</h5><p>谢谢体验！</p><buttonclass="button"data-joyride-close>完成</button></li></ol><!-- 触发按钮 --><buttondata-joyride-start="#myJoyride">开始引导</button>2. 自动启动 + Cookie 记住
加data-autostart="true"自动开始，支持 localStorage/Cookie 只显示一次。
3. 高级选项
data-position：提示位置data-closable="false"：不可关闭data-next-text/data-prev-text：自定义按钮文字- 暴露高亮（expose）：自动加遮罩高亮目标元素
4. 今天直接给你抄的完整代码（Foundation 6 + Joyride 独立版，复制就能跑）
<!DOCTYPEhtml><html><head><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css"><!-- Joyride CSS（独立版） --><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/foundation-joyride@3.0.0/dist/foundation.joyride.min.css"></head><body><buttonclass="button large"data-joyride-start="#tour">开始新手引导</button><divid="element1"style="margin:50px;padding:20px;background:#eee;"><h4>这是第一个目标元素</h4></div><divid="element2"style="margin:100px;padding:20px;background:#ddd;"><h4>这是第二个目标元素</h4></div><oldata-joyrideid="tour"data-autostart="false"><lidata-target="#element1"><h5>欢迎！第一步</h5><p>这里是你的仪表盘概览</p></li><lidata-target="#element2"data-position="top"><h5>第二步</h5><p>点击这里添加新项目</p></li><li><h5>引导结束 🎉</h5><p>现在你可以自由探索了！</p><buttonclass="button success"data-joyride-close>知道了</button></li></ol><scriptsrc="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/js/foundation.min.js"></script><!-- Joyride JS（独立版） --><scriptsrc="https://cdn.jsdelivr.net/npm/foundation-joyride@3.0.0/dist/foundation.joyride.min.js"></script><script>$(document).foundation();</script></body></html>下面给你看真实效果（Joyride 引导游的经典演示截图）：
官方仓库 & 文档：
- GitHub（最新版）：https://github.com/zurb/joyride
- 老版（Foundation 5）：https://get.foundation/sites/docs-v5/components/joyride.html
你现在想干嘛？
→ 明天终于讲 Foundation 表格（Table）？
→ 帮我做一个 5 步的新手引导（带高亮和 Cookie 只显示一次）？
→ 给我一个结合 Off-Canvas 的后台引导代码？
直接回复下一句：
“明天讲 table”
“帮我做新手引导”
“给我后台 Joyride”
我立刻给你写好！