当前位置: 首页 > news >正文

使用iElevator.js模拟segmentfault的文章标题导航

iElevator.js是小弟业余时间写的一个jQuery小插件,纯属自娱自乐o(^▽^)o!感兴趣的同学可以体验一下,有问题或建议可以直接提出,大家可以共同讨论学习!对于iElevator.js我的上篇文章已做介绍。


iElevator.js是一个jquery小插件,使用简单,兼容IE6,支持UMD和3种配置方式,比锚点更灵活。并支持sticky定位

1. 通过markdown随便编写一篇文章,并将其导出成html文件

#文章标题
##标题1
1
1
1
##标题2
2
2
2
##标题3
.
.
.

2. 创建文章导航

HTML:

<div class="sidebar" id="demo">
    <h3>文章目录</h3>
    <div class="nav">
        <div class="highlight">
            
        </div>
        <ul class="list">
            
        </ul>
    </div>
</div>

Javascript:

// 获取Markdown中的标题
    var $demo = $('#demo'),
        $titles = $('h2'),
        $nav = $demo.find('.list'),
        STR = '';
    // 填充标题
    $titles.each(function(){
        STR += '<li><a>'+ $(this).text() +'</a></li>';
    });
    $nav.html(STR);

对文章标题的获取,可以通过指定特定标识符来获取,如果有副标题可以通过递归来遍历。

3. 调用ielevator

    // 获取Markdown中的标题
    var $demo = $('#demo'),
        $titles = $('h2'),
        $nav = $demo.find('.list'),
        $highlight = $demo.find('.highlight'),
        STR = '';
    // 填充标题
    $titles.each(function(){
        STR += '<li><a>'+ $(this).text() +'</a></li>';
    });
    $nav.html(STR);
    // 调用ielevator
    $demo.ielevator({
        floors: $titles,
        btns: $('#demo li'),
        sticky: 10,
        selected: $highlight
    });

配置项中sticky: 10使用sticky定位,与窗口的top的距离为10。

4. 实现效果:http://zhansingsong.github.io/segmentfault

相关文章:

  • Xfce设置代理Proxy
  • c++打印环境变量
  • 小型考试系统
  • Java IO的RandomAccessFile的使用(转)
  • 执行Asp.net应用程序在Linux上的3种托管方式
  • CSS学习笔记——定位position属性的学习
  • 【转】搭建高可用mongodb集群(一)——配置mongodb
  • 从实体和关系角度看 PowerDesigner 设计数据库模型
  • 基础知识__WebService
  • Lepus经历收获杂谈(二)——QT
  • Python Function Note
  • 腾讯下一个重点:硬件;硬件自身的未来也正进入多元化发展
  • REST架构的思考
  • python的统一编码规范
  • c# 反射
  • 【JavaScript】通过闭包创建具有私有属性的实例对象
  • 【干货分享】SpringCloud微服务架构分布式组件如何共享session对象
  • angular学习第一篇-----环境搭建
  • Apache Spark Streaming 使用实例
  • bearychat的java client
  • CentOS从零开始部署Nodejs项目
  • co.js - 让异步代码同步化
  • HTTP那些事
  • JWT究竟是什么呢?
  • Less 日常用法
  • vue:响应原理
  • vue2.0开发聊天程序(四) 完整体验一次Vue开发(下)
  • 案例分享〡三拾众筹持续交付开发流程支撑创新业务
  • 编写高质量JavaScript代码之并发
  • 初探 Vue 生命周期和钩子函数
  • 从PHP迁移至Golang - 基础篇
  • 每天一个设计模式之命令模式
  • 如何在GitHub上创建个人博客
  • 使用阿里云发布分布式网站,开发时候应该注意什么?
  • 腾讯优测优分享 | 你是否体验过Android手机插入耳机后仍外放的尴尬?
  • ​DB-Engines 11月数据库排名:PostgreSQL坐稳同期涨幅榜冠军宝座
  • ​低代码平台的核心价值与优势
  • ​水经微图Web1.5.0版即将上线
  • # 透过事物看本质的能力怎么培养?
  • $.ajax()参数及用法
  • (0)Nginx 功能特性
  • (C#)Windows Shell 外壳编程系列9 - QueryInfo 扩展提示
  • (第61天)多租户架构(CDB/PDB)
  • (附源码)springboot 个人网页的网站 毕业设计031623
  • (三) diretfbrc详解
  • (转)linux自定义开机启动服务和chkconfig使用方法
  • (转贴)用VML开发工作流设计器 UCML.NET工作流管理系统
  • (自适应手机端)响应式新闻博客知识类pbootcms网站模板 自媒体运营博客网站源码下载
  • (总结)Linux下的暴力密码在线破解工具Hydra详解
  • * 论文笔记 【Wide Deep Learning for Recommender Systems】
  • *(长期更新)软考网络工程师学习笔记——Section 22 无线局域网
  • .aanva
  • .bat批处理(五):遍历指定目录下资源文件并更新
  • .CSS-hover 的解释
  • .equals()到底是什么意思?