Bootstrap框架动态生成Web页面文章内目录的方法
转载 &更新时间：日 18:06:48 & 作者：LuckyJing
这篇文章主要介绍了Bootstrap框架动态生成Web页面文章内目录的方法,利用Bootstrap中的Affix和ScrollSpy插件便可以实现,需要的朋友可以参考下
在写博客的时候，为了条理性起见，经常会使用许多小标题，当文章长时，需要来回在不同的标题之间穿梭，如果手动添加目录，添加锚点，实在是麻烦，为此，可以动态生成一块目录区域，并使用Bootstrap提供的Affix插件将目录区域固定在页面上。Bootstrap文档便使用了它
准备工作-引入bootstrap.min.js
将bootstrap.min.js放入body之前的script标签中，uikit.min.js暂时不引入。
引入相关插件之后，我们的思路是首先根据文章自动生成锚点以及菜单内容，随后为其添加Affix产生固定效果，再使用uikit的scrollSpy插件(bootstrap中也有scrollspy,使用方法几乎一致)。
引-学习Affix的使用
Affix插件尅帮助我们固定导航部分的位置，并且根据用户的滚动情况来为固定的元素增加垂直偏移量，使得nav在三个类之间进行切换：
1.affix-top:表示在顶端
2.affix:表示在页面滚动，增加fixed属性，同时使用自定义的offset偏移量
3.affix-bottom:表示到达最底端
启用Affix只需要以下代码：
$('#nav').affix({
top:$('header').offset().top,
bottom: ($('footer').outerHeight(true) +
$('.application').outerHeight(true)) + 40
一、组织HTML代码部分
&ul id="mysidebar" class="nav affix" &
一定要注意为ul添加nav和affix类。
二、生成封装代码
将本代码段引入到你自己的script脚本中
;$.fn.extend({
"createAffix": function(selector) {
$list = $("" + selector),
length = $list.length,
affixValue = "";
for (var i = 0; i & 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&";
affixValue += "&li&&a href=#node" + i + "&" + text + "&/a&&/li&";
this.append(affixValue);
this.affix({
top: this.offset().top//在固定之后距离顶部的偏移量
上述代码的原理是为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&
&h3 id="node1"&标题1&/h3&
&h3 id="node2"&标题2&/h3&
&h3 id="node3"&标题3&/h3&
书写Javascript部分
$(function(){
$(' #mysidebar').createAffix('h3');
//表示在文章中，使用`h3`标签的是 需要被添加锚点的地方。
解决锚点偏移的问题
因为锚点默认将页面偏移到锚点元素的顶部，也就是如果我们对标题1进行了上述操作，当我们点击锚点时，页面会偏移到'标题1'所在的顶端位置，如果顶端有菜单栏，那么将会被遮住，通过设置css样式来解决。
添加padding可以让锚点向下偏移num px，也就是跳过菜单栏的高度，
通过设置margin-top为负值来`弥补`因为padding-top带来的空白部分
padding-top:
margin-top: -
添加滚动监听
目前我们的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&
加工一下，引入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&
引入uikit.min.js
由于我们的菜单项(li)是在文档加载后执行的，那么如果在生成菜单项之前变执行uikit的scrollspy，那么必定不起作用，所以要在菜单项生成后引入uikit.min.js，代码如下：
$(function(){
$(' #mysidebar').createAffix('h3');//生成菜单
$.getScript("uikit.min.js");//异步载入uikit.min.js，滚动监听生效。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具怎么通过Ajax方法在两个Bootstrap Modal页面之间传值
[问题点数：100分，结帖人youyiyang]
本版专家分：32
结帖率 99.52%
CSDN今日推荐
本版专家分：32
结帖率 99.52%
本版专家分：32
结帖率 99.52%
匿名用户不能发表回复！|
CSDN今日推荐如何设置bootstraptable插件在ajax请求成功后的回调函数_百度知道
如何设置bootstraptable插件在ajax请求成功后的回调函数
我有更好的答案
ajax的回调成功在success那边写就好了。
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。之前做分页想过做淘宝的那个，但是因为是后台要求不高，就Bootstrap Paginator插件感觉还蛮容易上手，所以就选了它。
Bootstrap Paginator分页插件下载地址：
1.这是需要分页的页面放的 js函数：
[javascript]
&span&style="font-size:14"&function&paging(page){&&
&&&&&&&&&&&&$.ajax({&&
&&&&&&&&&&&&&&&type:&"GET",&&
&&&&&&&&&&&&&&&url:&"${ctx}/api/v1/user/1/"+(page-1)+"/5",&&
&&&&&&&&&&&&&&&dataType:"json",&&
&&&&&&&&&&&&&&&success:&function(msg){&&
&&&&&&&&&&&&&&&&&....
&&&&&&&&&&&&&&&}&&
&&&&&&&&&&&&});&&
&&&&&&&&&&&&$.ajax({&&
&&&&&&&&&&&&&&&&type:&"GET",&&
&&&&&&&&&&&&&&&&url:"${ctx}/api/v1/user/count/1",&&
&&&&&&&&&&&&&&&&dataType:"json",&&
&&&&&&&&&&&&&&&&success:function(msg){&&
&&&&&&&&&&&&&&&&&&&&var&pages&=&Math.ceil(msg.data/5);
&&&&&&&&&&&&&&&&&&&&var&element&=&$('#pageUl');
&&&&&&&&&&&&&&&&&&&&var&options&=&{&&
&&&&&&&&&&&&&&&&&&&&&&&&bootstrapMajorVersion:3,&&
&&&&&&&&&&&&&&&&&&&&&&&&currentPage:&page,
&&&&&&&&&&&&&&&&&&&&&&&&numberOfPages:&5,
&&&&&&&&&&&&&&&&&&&&&&&&totalPages:pages&
&&&&&&&&&&&&&&&&&&&&}&&
&&&&&&&&&&&&&&&&&&&element.bootstrapPaginator(options);&&
&&&&&&&&&&&&&&&&}&&
&&&&&&&&&&&&});&&
&&&&&&&&}&/span&&&
*li里面自动生成的
2.最重要也是最核心的是要自己改下bootstrap-paginator.js源文件，如下：
[javascript]
&span&style="font-size:14"&onPageClicked:&function&(event,&originalEvent,&type,&page)&{&&
&&&&&&&&&&&&
&&&&&&&&&&&&&&
&&&&&&&&&&&&var&currentTarget&=&$(event.currentTarget);&&
&&&&&&&&&&&&switch&(type)&{&&
&&&&&&&&&&&&case&"first":&&
&&&&&&&&&&&&&&&&currentTarget.bootstrapPaginator("showFirst");&&
&&&&&&&&&&&&&&&&paging(page);&&
&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&case&"prev":&&
&&&&&&&&&&&&&&&&currentTarget.bootstrapPaginator("showPrevious");&&
&&&&&&&&&&&&&&&&paging(page);&&
&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&case&"next":&&
&&&&&&&&&&&&&&&&currentTarget.bootstrapPaginator("showNext");&&
&&&&&&&&&&&&&&&&paging(page);&&
&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&case&"last":&&
&&&&&&&&&&&&&&&&currentTarget.bootstrapPaginator("showLast");&&
&&&&&&&&&&&&&&&&paging(page);&&
&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&case&"page":&&
&&&&&&&&&&&&&&&&currentTarget.bootstrapPaginator("show",&page);&&
&&&&&&&&&&&&&&&&paging(page);&&
&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&}&&
&&&&&&&&},&/span&&&
*在你点击的页面样式出来后调用paging（page）方法，这里的page源文件里的参数已经有了，直接传！
效果：当样式改变后，直接拿控件的page值进行ajax请求的发送！最后实现无刷新分页。
阅读(...) 评论()jshow for bootstrap, 对bootstrap 更简单的封装 - 开源中国社区
当前访客身份：游客 [
当前位置：
发布于 日 0时,
让bootstrap的ajax弹出窗飞一会儿~弹窗更简单，更方便...&窗口在关闭的时候，同时回收dom节点，bootstrap原始的modal插件是不会回收dom节点的。&此外，可通过设置reuse:true&则不回收dom节点，实现dialog的多次使用。增加消息窗口，和表单验证功能。
代码片段(4)
1.&[代码][JavaScript]代码&&&&
//ajax弹窗如此简单，不过你的弹窗内容里面要有body 和 bottom区域
gDialog.fCreate({title:'这是多层弹窗窗口',url:'/uploads/rs/316/df6enwiz/manywindow.html'}).show();
//显示消息如此简单
message_box.show('错误消息','error');
message_box.show('警告消息');
message_box.show('成功消息','success');
message_box.show('普通消息','info');
//alert如此简单
bootbox.alert('提示消息',function(){
alert('回调函数');
//confirm窗口如此简单
bootbox.confirm('确认操作么？',function(rs){
//确认操作
//取消操作
2.&[代码]ajax窗口内容&&&&
这是ajax弹出窗口需要包含的内容，如此easy 哈哈哈哈...........--&
&div class="modal-body"&
&p&这是dialog的内容…&/p&
&div class="modal-footer"&
&a href="#" class="btn"
data-dismiss="modal" aria-hidden="true"&关闭&/a&
&a href="#" class="btn btn-primary"&保存修改&/a&
&a role="button" class="btn closeBtn"&测试关闭弹窗&/a&
&!-- 以下代码可以不要哈，取消【测试关闭弹窗】 按钮就可以了--&
void function(j){
j(".closeBtn").click(function(){
gDialog.fClose();
}(jQuery);
3.&[图片] QQ图片46.jpg&&&&
4.&[代码]ajax弹出的表单验证窗口&&&&
&div class="modal-body auto-height-body"&
&form class="form-horizontal"
id="form1"&
&div class="control-group"&
&label class="control-label" for="enname"&字典选项值&/label&
&div class="controls"&
&input type="text"
name="dictElement.enname" id="enname" placeholder="请输入字典选项值" maxlength="20"/&
&div class="control-group"&
&label class="control-label" for="cnname"&选项显示值&/label&
&div class="controls"&
&input type="text"
name="dictElement.cnname" id="cnname" placeholder="请输入选项显示值" maxlength="100"/&
&div class="control-group"&
&label class="control-label" for="dictName"&字典标示&/label&
&div class="controls"&
&input type="text"
name="dictElement.dictName" id="dictName" placeholder="请输入字典标示" maxlength="20"/&
&div class="control-group"&
&label class="control-label" for="cssClass"&选项样式&/label&
&div class="controls"&
&input type="text"
name="dictElement.cssClass" id="cssClass" placeholder="请输入选项样式" maxlength="100"/&
&div class="control-group"&
&label class="control-label" for="parentId"&父字典项id&/label&
&div class="controls"&
&input type="text"
name="dictElement.parentId" id="parentId" placeholder="请输入父字典项id" maxlength="2"/&
&div class="control-group"&
&label class="control-label" for="orderNum"&排序号&/label&
&div class="controls"&
&input type="text"
name="dictElement.orderNum" id="orderNum" placeholder="请输入排序号" maxlength="10"/&
&div class="modal-footer"&
&a href="javascript:;" class="btn btn-primary" id="btn_submit"&保存&/a&
&a href="javascript:;" class="btn"
data-dismiss="modal" aria-hidden="true"&关闭&/a&
&script language="javascript"&
void function(j) {
var set = {
{must: true, maxlength:20,ftip:'英文名称，最长20'},
{must: true, maxlength:100,ftip:'中文名称，最长20'},
{must: true, maxlength:20,ftip:'字典名称，最长20'},
{must: true, maxlength:100,ftip:'样式class，最长100'},
{must: true, maxlength:2,handler:'int',ftip:'父ID,整数'},
{must: true, maxlength:10,handler:'int',ftip:'排序号，整数'}
j('#btn_submit').click(function(e) {
if(form.validate(set)){
//提示消息框
message_box.show('表单验证通过了，^_^！','success');
message_box.show('表单验证失败，请检查！','error');
form.friend.init(set);
}(jQuery);
开源中国-程序员在线工具：
相关的代码(51)
18回/27672阅
[JavaScript]
5回/22502阅
[JavaScript]
8回/19650阅
7回/18086阅
[JavaScript]
81回/14388阅
27回/10030阅
7回/10128阅
11回/10093阅
54回/9318阅
0回/9565阅
2楼：stu51 发表于
太棒了 用起来简单多了
3楼：supperman 发表于
引用来自“stu51”的评论太棒了 用起来简单多了有新版更新，建议关注
4楼：OSC屠夫 发表于
还没使用，但是很期待
5楼：OSC屠夫 发表于
发现不行，不知道是不是因为版本不匹配
开源从代码分享开始
supperman的其它代码