autonavi
autonavi是一个自动化的文档导航目录生成插件。依赖于jquery。


说明

autonavi是一个自动化生成文档导航目录的插件,依赖于jquery。可以自动生成单个网页的导航目录,也可以通过传入参数来设置导航目录。
本页面的导航目录就是通过autonavi自动生成的。

结构

autonavi包含一个js文件( autonavi.js)和一个css文件( autonavi.css)。

使用安装

页面引入相关的js和css文件
<link rel="stylesheet" href="/css/autonavi.css">
<script src="/js/autonavi.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        an.init();
    });

</script>
                        

注:因为autonavi只有在页面完全载入后才能正常工作,所以最好在页面的最后面引入css,js相关文件并进行初始化。

将需要转换的文档内容包裹在 _autonavi类的 div中,即:
<div class="_autonavi">
文档内容
</div>
                        

最近更新


2016年11月23日

增加在html中初始化导航数据。
示例:
        <div class="_anvnavi-ele-box">
            <a href="link1" class="_an1 _anvnavi-ele">text1</a>
            <a href="link1" class="_an1 _anvnavi-ele">text2</a>
            <a href="link1" class="_an2 _anvnavi-ele">text1</a>
            <a href="link1" class="_an1 _anvnavi-ele">text1</a>
            <a href="link1" class="_an1 _anvnavi-ele">text1</a>
            <a href="link1" class="_an1 _anvnavi-ele">text1</a>
        </div>                        
._anvnavi-ele包裹在 ._anvnavi-ele-box中。

autonavi会自动寻找html静态页面中的 ._anvnavi-ele元素,并初始化页面导航数据。
._an1表示一级导航;
._an2表示二级导航;
._an3表示三级导航;
默认是一级导航,最多支持三级导航。

在初始完成页面导航数据后,autonavi会将 ._anvnavi-ele-boxdisplay设置为 none

导航数据优先级排序:

  • an.init()中传入的初始化导航数据
  • 根据html中的 ._anvnavi-ele取得的导航数据
  • 根据 ._an自动化生成的导航数据
三种导航数据排他性,不能同时存在。


特定的格式

待处理的文档需要特定的格式:
  • 能够处理的目录导航必须赋予 _an类,如 <h2 class="_an">结构</h2>
  • 支持三级的目录缩进显示,最高级为 h2,第二级缩进为 h3,第三级缩进为 h4
    <h2 class="_an">一级目录</h2>
    <h2 class="_an">二级目录</h3>
    <h2 class="_an">三级目录</h4>
                                

通过init()初始化导航数据


                    $(document).ready(function () {
                        an.init({
                            'navidata':[
                                {
                                    "text":"导航题目",
                                    "level":1,//导航等级,支持1,2,3
                                    "link":"导航链接1",
                                },

                                {
                                    "text":"导航题目",
                                    "level":1,//导航等级,支持1,2,3
                                    "link":"导航链接1",
                                },
                            ],
                        });
                    });
                        

PC和移动

autonavi是自适应屏幕支持的。大屏设备和小屏设备浏览都没有障碍。

获取

autonavi托管在oschina的git平台上,点击查看autonavi源代码
123

友情链接: 网址导航

冀ICP备14000903号-1 友情链接联系:ip201399@163.com