Foundation Joyride（页面引导游）详解（超级完整版，一次讲透）
我们继续你的 Foundation 系列，今天把 Joyride 讲得明明白白！Joyride 是 ZURB 为 Foundation 开发的页面引导插件，用于创建新手引导、功能游览（feature tour），通过气泡提示一步步引导用户熟悉界面。支持自动启动、Cookie 记住、暴露高亮、模态模式等。
重要提醒：Joyride 在 Foundation 5 中内置，在 Foundation 6+ 中已分离为独立插件（GitHub: zurb/joyride），需单独引入（兼容 Foundation 6）。它依赖 Tooltip 组件。
1. 基本结构（Foundation 6+ 独立版）
<ol data-joyride id="myJoyride">
<li data-target="#element1">
<h5>第一步</h5>
<p>这里解释第一个功能</p>
</li>
<li data-target="#element2" data-position="bottom">
<h5>第二步</h5>
<p>支持指定位置：top/bottom/left/right</p>
</li>
<li> <!-- 无 target 时为模态提示 -->
<h5>结束</h5>
<p>谢谢体验！</p>
<button class="button" data-joyride-close>完成</button>
</li>
</ol>
<!-- 触发按钮 -->
<button data-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 独立版，复制就能跑）
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css">
<!-- Joyride CSS（独立版） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-joyride@3.0.0/dist/foundation.joyride.min.css">
</head>
<body>
<button class="button large" data-joyride-start="#tour">开始新手引导</button>
<div id="element1" style="margin:50px; padding:20px; background:#eee;">
<h4>这是第一个目标元素</h4>
</div>
<div id="element2" style="margin:100px; padding:20px; background:#ddd;">
<h4>这是第二个目标元素</h4>
</div>
<ol data-joyride id="tour" data-autostart="false">
<li data-target="#element1">
<h5>欢迎！第一步</h5>
<p>这里是你的仪表盘概览</p>
</li>
<li data-target="#element2" data-position="top">
<h5>第二步</h5>
<p>点击这里添加新项目</p>
</li>
<li>
<h5>引导结束 🎉</h5>
<p>现在你可以自由探索了！</p>
<button class="button success" data-joyride-close>知道了</button>
</li>
</ol>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/js/foundation.min.js"></script>
<!-- Joyride JS（独立版） -->
<script src="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”
我立刻给你写好！
