Bootstrap框架动态生成Web页面文章内目录的方法


Posted in Javascript onMay 12, 2016

引言
在写博客的时候,为了条理性起见,经常会使用许多小标题,当文章长时,需要来回在不同的标题之间穿梭,如果手动添加目录,添加锚点,实在是麻烦,为此,可以动态生成一块目录区域,并使用Bootstrap提供的Affix插件将目录区域固定在页面上。Bootstrap文档便使用了它

准备工作-引入bootstrap.min.js
将bootstrap.min.js放入body之前的script标签中,uikit.min.js暂时不引入。
引入相关插件之后,我们的思路是首先根据文章自动生成锚点以及菜单内容,随后为其添加Affix产生固定效果,再使用uikit的scrollSpy插件(bootstrap中也有scrollspy,使用方法几乎一致)。
引-学习Affix的使用
Affix插件?“镏?颐枪潭ǖ己讲糠值奈恢茫?⑶腋?萦没У墓龆?榭隼次?潭ǖ脑?卦黾哟怪逼?屏浚?沟?av在三个类之间进行切换:
1.affix-top:表示在顶端
2.affix:表示在页面滚动,增加fixed属性,同时使用自定义的offset偏移量
3.affix-bottom:表示到达最底端

启用Affix只需要以下代码:

$('#nav').affix({
  offset: {
          top:$('header').offset().top,
      bottom: ($('footer').outerHeight(true) + 
        $('.application').outerHeight(true)) + 40
    }
});

一、组织HTML代码部分

<ul id="mysidebar" class="nav affix" >
</ul>

一定要注意为ul添加nav和affix类。

二、生成封装代码
将本代码段引入到你自己的script脚本中

;$.fn.extend({
    "createAffix": function(selector) {
      $list = $("" + selector),
        length = $list.length,
        affixValue = "";
      for (var i = 0; i < length; i++) {
        //给每一个标题增加name属性
        $list.eq(i).attr("id", ("node" + i));
        var text = $list.eq(i).text();
        if (i == 0) {
          affixValue += "<li><a href=#node" + i + " class='active' >" + text + "</a></li>";
        } else {
          affixValue += "<li><a href=#node" + i + ">" + text + "</a></li>";
        }
      }
      this.append(affixValue);
      this.affix({
        offset: {
          top: this.offset().top//在固定之后距离顶部的偏移量
        }
      });
      return this;
    }

 });

上述代码的原理是为createAffix函数传入需要被认为是标题单元的标签或者类,在遍历过程中为其增加锚点链接。

三、使用方法
书写HTML部分

<ul id="mysidebar" class="nav affix" >
 <li><a href="#node1"></a></li>
 <li><a href="#node2"></a></li>
 <li><a href="#node3"></a></li>
 </ul>

 <h3 id="node1">标题1</h3>
 <h3 id="node2">标题2</h3>
 <h3 id="node3">标题3</h3>

书写Javascript部分

$(function(){
 $(' #mysidebar').createAffix('h3');
 //表示在文章中,使用`h3`标签的是 需要被添加锚点的地方。
 });

解决锚点偏移的问题
因为锚点默认将页面偏移到锚点元素的顶部,也就是如果我们对标题1进行了上述操作,当我们点击锚点时,页面会偏移到'标题1'所在的顶端位置,如果顶端有菜单栏,那么将会被遮住,通过设置css样式来解决。

.class{
    /*
    添加padding可以让锚点向下偏移num px,也就是跳过菜单栏的高度,
    通过设置margin-top为负值来`弥补`因为padding-top带来的空白部分
    */
    padding-top: num px;
    margin-top: -num px;
}

添加滚动监听
目前我们的DOM文档是这样的。

<ul id="mysidebar" class="nav affix" >
<li><a href="#node1"></a></li>
<li><a href="#node2"></a></li>
<li><a href="#node3"></a></li>
</ul>

加工一下,引入uikit属性,具体查看文档

<ul id="mysidebar" class="nav affix uk-nav uk-nav-side" data-uk-scrollspy-nav="{closest:'li',smoothscrool:true}" >
<li><a href="#node1"></a></li>
<li><a href="#node2"></a></li>
<li><a href="#node3"></a></li>
</ul>

引入uikit.min.js
由于我们的菜单项(li)是在文档加载后执行的,那么如果在生成菜单项之前变执行uikit的scrollspy,那么必定不起作用,所以要在菜单项生成后引入uikit.min.js,代码如下:

$(function(){
$(' #mysidebar').createAffix('h3');//生成菜单
$.getScript("uikit.min.js");//异步载入uikit.min.js,滚动监听生效。
});
Javascript 相关文章推荐
索趣科技的答案
Feb 07 Javascript
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
利用JS自动打开页面上链接的实现代码
Sep 25 Javascript
jQuery事件 delegate()使用方法介绍
Oct 30 Javascript
js实现图片在未加载完成前显示加载中字样
Sep 03 Javascript
JS定义类的六种方式详解
May 12 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
Jan 19 Javascript
浅谈angularjs $http提交数据探索
Jan 20 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
vue中的使用token的方法示例
Mar 10 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
Node.js的项目构建工具Grunt的安装与配置教程
May 12 #Javascript
js自定义select下拉框美化特效
May 12 #Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
May 12 #Javascript
JS函数的定义与调用方法推荐
May 12 #Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 #Javascript
JS定义类的六种方式详解
May 12 #Javascript
值得分享和收藏的Bootstrap学习教程
May 12 #Javascript
You might like
比file_get_contents稳定的curl_get_contents分享
2012/01/11 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
PHP基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
jquery动态加载js三种方法实例
2013/08/03 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
2014/09/03 Javascript
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
js轮播图的插件化封装详解
2017/07/17 Javascript
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
python让图片按照exif信息里的创建时间进行排序的方法
2015/03/16 Python
python机器学习实战之K均值聚类
2017/12/20 Python
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
python使用列表的最佳方案
2020/08/12 Python
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
AJAX的全称是什么
2012/11/06 面试题
个人自我鉴定写法
2013/11/30 职场文书
商场消防安全责任书
2014/07/29 职场文书
学生喝酒检讨书500字
2014/11/02 职场文书
教师个人年终总结
2015/02/11 职场文书
投标单位介绍信
2015/05/05 职场文书
2015入党自传书范文
2015/06/26 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
给学校的建议书400字
2015/09/14 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
python 进阶学习之python装饰器小结
2021/09/04 Python
mysql数据库如何转移到oracle
2022/12/24 MySQL