Foundation 麦哲伦(Magellan)导航
Foundation 麦哲伦(Magellan)导航技术文档
导航模块概述
Foundation 麦哲伦(Magellan)导航模块是从Foundation框架中分离出来的一个单独的JavaScript模块。该模块提供了一组API方法,可以实现页面内部的导航识别与响应。
安装
Magellan模块可以通过npm包管理工具或者手动下载使用。如果你是使用npm,可以通过以下命令进行安装:
npm install foundation-sites --save
安装完成后,你需要在你的HTML文档中引入Magellan模块的JavaScript文件:
<script src="/path/to/foundation.magellan.js"></script>
使用
在你的HTML文档中,需要有一个导航列表,它将包含你所需要的所有导航。可以通过css class设置导航列表样式:
<ul data-magellan>
<li><a href="#section-1">Section 1</a></li>
<li><a href="#section-2">Section 2</a></li>
<li><a href="#section-3">Section 3</a></li>
</ul>
在导航列表中的每个链接(< a >),设置链接指向特定区域。例如,在上例中,我们将创建3个分段,每个分段应该拥有独一无二的id值:
<div id="section-1">
<h2>Section 1</h2>
<p>Section 1 content goes here...</p>
</div>
<div id="section-2">
<h2>Section 2</h2>
<p>Section 2 content goes here...</p>
</div>
<div id="section-3">
<h2>Section 3</h2>
<p>Section 3 content goes here...</p>
</div>
现在,Magellan模块已经准备就绪,我们可以在必要时激活它:
$(document).foundation();
API
以下是Magellan提供的一些API方法:
Interchange({options})
设置Magellan的基本选项:
activeClass
: {string} 设置当前活动的导航链接的css类(class)名称,默认为’active’。threshold
: {number} 控制导航链接何时开始激活,单位为像素,默认为0。
$(document).foundation({
magellan: {
activeClass: 'is-active',
threshold: 100
}
});
setThreshold(threshold)
改变Magellan的激活阈值:
var magellan = new Foundation.Magellan($('#magellan'));
magellan.setThreshold(300);
setThresholdByBottom(offset)
设置用于比较Magellan激活阈值的底部偏移值,与激活链接的文档顶部之间的距离。offset参数是像素数。
var magellan = new Foundation.Magellan($('#magellan'));
magellan.setThresholdByBottom(300);
scrollToLoc(location)
滚动到指定位置:
var magellan = new Foundation.Magellan($('#magellan'));
magellan.scrollToLoc('#section-1');
destroy()
从Magellan组件中卸载Magellan对象:
var magellan = new Foundation.Magellan($('#magellan'));
magellan.destroy();