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 相关文章推荐
Javascript 类、命名空间、代码组织代码
Jul 31 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
Apr 02 Javascript
JavaScript实现彩虹文字效果的方法
Apr 16 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
老生常谈jquery中detach()和remove()的区别
Mar 02 Javascript
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
微信小程序自定义模态对话框实例详解
Aug 16 Javascript
Vue filter介绍及其使用详解
Oct 21 Javascript
微信小程序实现城市列表选择
Jun 05 Javascript
vue实现点击关注后及时更新列表功能
Jun 26 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 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 时间转换Unix时间戳代码
2010/01/22 PHP
PHP命令行脚本接收传入参数的三种方式
2014/08/20 PHP
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
PHP面相对象中的重载与重写
2017/02/13 PHP
PHP实现对图片的反色处理功能【测试可用】
2018/02/01 PHP
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
JavaScript Event学习第八章 事件的顺序
2010/02/07 Javascript
Javascript节点关系实例分析
2015/05/15 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
JavaScript获取服务器端时间的方法
2016/11/29 Javascript
vue-loader教程介绍
2017/06/14 Javascript
React路由鉴权的实现方法
2019/09/05 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
Python 实现12306登录功能实例代码
2018/02/09 Python
Python画图高斯分布的示例
2019/07/10 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
python3格式化字符串 f-string的高级用法(推荐)
2020/03/04 Python
Python3如何判断三角形的类型
2020/04/12 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
T3官网:头发造型工具
2019/12/26 全球购物
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
绩效工资实施方案
2014/03/15 职场文书
社区服务活动小结
2014/07/08 职场文书
毕业论文致谢范文
2015/05/14 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
企业财务管理制度范本
2015/08/04 职场文书
婚礼长辈答谢词
2015/09/29 职场文书
Golang实现AES对称加密的过程详解
2021/05/20 Golang
Django使用channels + websocket打造在线聊天室
2021/05/20 Python
python创建字典及相关管理操作
2022/04/13 Python