通讯录样式的边栏字母导航

简介

创建一个通讯录边栏样式的字母导航

DEMO

请扫描二维码在移动设备上查看

使用

1.模块化调用

使用 browserify 或 seajs 等模块加载器，引入alphabetnav

var alphabetNav = require('alphabetnav');
alphabetNav.init("attrName");

2.使用script标签全局引用

<script type="text/javascript" src="script/alphabetNav.js"></script>
<script type="text/javascript">
	alphabetNav.init("attrName");
</script>

3.方法调用1(推荐)

alphabetNav.init("attrName",{options})

其中，attrName 为属性名，options 为配置项。元素属性名的对应属性值将作为导航显示内容。该调用方式下 URL Hash 跳转特性不可用。

DEMO:

<section nav="A">
<section nav="B">
……
<section nav="Z">

<script type="text/javascript">
alphabetNav.init("nav");
</script>

3.方法调用2

alphabetNav.init([navItem],{options})

其中，navItem 为对象数组，对象包括 display 和 id 两个属性，display 为导航显示名称，id 为对应页面锚点名称。

DEMO:

<section id="a">
<section id="b">
<section id="c">

<script type="text/javascript">
alphabetNav.init([
		{display:"A", id:"a"},
		{display:"B", id:"b"},
		{display:"C", id:"c"}
		]);
</script>

配置项

options 可选配置包括：

• top：数字或字符串，设置边栏的 top 属性。
• bottom：数字或字符串，设置边栏的 bottom 属性，top 和 bottom 均没有配置时，slideNav 将居中显示。
• showIndicator：布尔型，默认值 true，设置是否显示字母指示器。
• useHash：布尔型，默认值 false，是否使用 URLHash 进行跳转。注意使用 URLHash 进行跳转时，只在 URLHash 改变时跳转才会发生，这将导致某些情况下不能跳转到正确位置。