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 相关文章推荐
JS代码格式化和语法着色V2
Oct 14 Javascript
ppk谈JavaScript style属性
Oct 10 Javascript
window.onload使用指南
Sep 13 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
Jan 05 Javascript
nuxt+axios解决前后端分离SSR的示例代码
Oct 24 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
react中fetch之cors跨域请求的实现方法
Mar 14 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
Sep 21 Javascript
从源码角度来回答keep-alive组件的缓存原理
Jan 18 Javascript
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
DC四月将推出百页特刊漫画 纪念小丑诞生80周年
2020/04/09 欧美动漫
用php解析html的实现代码
2011/08/08 PHP
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
PHP5中使用mysqli的prepare操作数据库的介绍
2019/03/18 PHP
[原创]保存的js无法执行的解决办法
2007/02/25 Javascript
JavaScript 学习笔记(四)
2009/12/31 Javascript
固定表格行列(expression)在IE下适用
2013/07/25 Javascript
js 控制图片大小核心讲解
2013/10/09 Javascript
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
微信小程序常见页面跳转操作简单示例
2019/05/01 Javascript
解决Vue调用springboot接口403跨域问题
2019/09/02 Javascript
vue实现图书管理系统
2020/12/29 Vue.js
python爬虫_自动获取seebug的poc实例
2017/08/05 Python
Python中偏函数用法示例
2018/06/07 Python
python range()函数取反序遍历sequence的方法
2018/06/25 Python
Python中应该使用%还是format来格式化字符串
2018/09/25 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
python实现代码统计器
2019/09/19 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
如何使用python传入不确定个数参数
2020/02/18 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
Python排序函数的使用方法详解
2020/12/11 Python
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
毕业生自我鉴定
2013/11/05 职场文书
2014年社会实践活动总结范文
2014/04/29 职场文书
体育运动口号
2014/06/09 职场文书
在校实习生求职信
2014/06/18 职场文书
综合测评个人总结
2015/03/03 职场文书