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 相关文章推荐
jQuery实现单行文字间歇向上滚动源代码
Jun 02 Javascript
JavaScript获取图片的原始尺寸以宽度为例
May 04 Javascript
jquery 按键盘上的enter事件
May 11 Javascript
javascript解析json实例详解
Nov 05 Javascript
Node.js 实现简单的接口服务器的实例代码
May 23 Javascript
详解利用jsx写vue组件的方法示例
Jul 17 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
Oct 20 Javascript
js实现HTML中Select二级联动的实例
Jan 05 Javascript
使用 vue.js 构建大型单页应用
Feb 10 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 Javascript
通过jQuery学习js类型判断的技巧
May 27 jQuery
layer实现弹出层自动调节位置
Sep 05 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
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
php数组去除空值函数分享
2015/02/02 PHP
Apache无法自动跳转却显示目录的解决方法
2020/11/30 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
jQuery中:checkbox选择器用法实例
2015/01/03 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
nodejs服务搭建教程 nodejs访问本地站点文件
2017/04/07 NodeJs
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
JS实现可针对算术表达式求值的计算器功能示例
2018/09/04 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
[02:49]DOTA2完美大师赛首日观众采访
2017/11/23 DOTA
python实现在每个独立进程中运行一个函数的方法
2015/04/23 Python
python计算方程式根的方法
2015/05/07 Python
在Python的Django框架的视图中使用Session的方法
2015/07/23 Python
Python函数和模块的使用总结
2019/05/20 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
wxPython实现画图板
2020/08/27 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
在django中使用post方法时,需要增加csrftoken的例子
2020/03/13 Python
HTML中fieldset标签概述及使用方法
2013/02/01 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
2014/01/27 HTML / CSS
世界上最大的折扣香水店:FragranceNet.com
2016/10/26 全球购物
介绍一下SQL Server的全文索引
2013/08/15 面试题
医大实习自我鉴定
2013/12/07 职场文书
群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
出差报告怎么写
2014/11/06 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
2016年法制宣传月活动总结
2016/04/01 职场文书
如何正确理解python装饰器
2021/06/15 Python