五、JavaScript插件
5.1 插件初始化机制
Foundation的JavaScript插件系统是其交互能力的核心。所有插件都遵循统一的初始化模式：
// 初始化所有插件
$(document).foundation();
// 只初始化特定元素内的插件
$('#my-element').foundation();
// 重新初始化（用于动态添加内容后）
Foundation.reInit($('#new-content'));
5.2 模态框 Reveal
Reveal是Foundation的模态框插件，用于显示弹出内容：
<!-- 触发按钮 -->
<button type="button" class="button" data-open="exampleModal1">打开模态框</button>
<!-- 模态框结构 -->
<div class="reveal" id="exampleModal1" data-reveal>
<h1>模态框标题</h1>
<p>这是模态框的内容。点击关闭按钮可以关闭此窗口。</p>
<button class="close-button" data-close aria-label="关闭模态框" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
5.3 标签页 Tabs
标签页组件用于在有限空间内组织大量内容：
<ul class="tabs" data-tabs id="example-tabs">
<li class="tabs-title is-active"><a href="#panel1" aria-selected="true">标签1</a></li>
<li class="tabs-title"><a href="#panel2">标签2</a></li>
<li class="tabs-title"><a href="#panel3">标签3</a></li>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
<div class="tabs-panel is-active" id="panel1">
<p>标签页1的内容</p>
</div>
<div class="tabs-panel" id="panel2">
<p>标签页2的内容</p>
</div>
<div class="tabs-panel" id="panel3">
<p>标签页3的内容</p>
</div>
</div>
5.4 手风琴 Accordion
手风琴组件用于创建可折叠的内容面板：
<ul class="accordion" data-accordion>
<li class="accordion-item is-active" data-accordion-item>
<a href="#" class="accordion-title">第一部分</a>
<div class="accordion-content" data-tab-content>
<p>第一部分的内容。这部分内容默认是展开的。</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">第二部分</a>
<div class="accordion-content" data-tab-content>
<p>第二部分的内容。这部分内容默认是折叠的。</p>
</div>
</li>
</ul>
5.5 下拉菜单 Dropdown
下拉菜单是最常用的导航组件之一：
<button class="button" data-toggle="dropdown-menu">下拉菜单</button>
<div class="dropdown-pane" id="dropdown-menu" data-dropdown>
<ul class="vertical menu">
<li><a href="#">选项1</a></li>
<li><a href="#">选项2</a></li>
<li><a href="#">选项3</a></li>
</ul>
</div>
5.6 工具提示 Tooltip
工具提示在用户悬停时显示额外信息：
<span data-tooltip aria-haspopup="true" class="has-tip" title="这是工具提示内容">
悬停在我上面
</span>
5.7 插件的事件系统
Foundation的每个插件都会触发相应的事件，方便开发者进行扩展：
// 监听模态框打开事件
$('#myModal').on('open.zf.reveal', function() {
console.log('模态框已打开');
});
// 监听标签页切换事件
$('#tabs').on('change.zf.tabs', function(event, target, content) {
console.log('切换到标签页:', target);
});
5.8 程序化调用
所有Foundation插件都支持通过JavaScript程序化调用：
// 打开模态框
$('#myModal').foundation('open');
// 关闭模态框
$('#myModal').foundation('close');
// 销毁插件实例
$('#myModal').foundation('_destroy');
六、Sass定制与主题开发
6.1 Sass版本的优势
Foundation提供Sass版本，允许开发者深度定制框架的各个方面：
变量驱动：所有颜色、尺寸、间距都通过Sass变量定义
模块化引入：只引入需要的组件，减少CSS体积
http://lemci.cn/category/xljk.html
混合宏：提供可复用的样式片段
函数支持：内置颜色计算、单位转换等辅助函数
6.2 项目结构
使用Foundation Sass的标准项目结构如下：
project/
├── scss/
│ └── app.scss # 主样式文件
├── js/
│ └── app.js # 主脚本文件
├── index.html
└── package.json
6.3 核心变量定制
在app.scss中，可以通过覆盖变量来定制主题：
// 在导入Foundation之前覆盖变量
$primary-color: #1779ba;
$secondary-color: #767676;
$success-color: #3adb76;
$warning-color: #ffae00;
$alert-color: #cc4b37;
// 全局设置
$global-font-size: 100%;
$global-width: rem-calc(1200);
$global-lineheight: 1.5;
$global-margin: 1rem;
$global-padding: 1rem;
// 导入Foundation
@import 'foundation-sites/scss/foundation';
@include foundation-everything;
6.4 按需引入组件
为了减小CSS体积，可以只引入需要的组件：
@import 'foundation-sites/scss/foundation';
// 只引入特定组件
@include foundation-global-styles;
@include foundation-typography;
@include foundation-grid;
@include foundation-button;
@include foundation-forms;
// 其他组件按需引入...
6.5 自定义混合宏
Foundation提供了丰富的混合宏（Mixins），方便开发者创建符合设计规范的自定义组件：
// 创建自定义按钮
.my-button {
@include button;
@include button-size($padding: 1rem 2rem);
@include button-style($background: $primary-color, $background-hover: scale-color($primary-color, $lightness: -15%));
}
// 创建自定义卡片
.custom-card {
@include card-container;
@include card-divider;
}
