文章文档标题自动生成导航jQuery小插件titleNav.js

http://www.zhangxinxu.com/wordpress/2018/04/jquery-plugin-document-article-title-nav-js/
JS使用如下：

$('h3').titleNav();

需要下面的CSS配合：

.title-nav-ul {
    width: 200px;
    border: 1px solid #ccc;
    background-color: #fff;
    box-shadow: 1px 1px 3px rgba(0,0,0,.25);
    position: absolute;
    top: 200px; right: 10px;
}
.title-nav-li {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: inherit;
}
.title-nav-li.active {
    font-weight: bold;
}
.title-nav-li:hover {
    background-color: #f0f0f0;
}

<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <title>文章文档标题自动生成导航jQuery小插件titleNav.js</title> <style type="text/css"> .title-nav-ul { width: 200px; border: 1px solid #ccc; background-color: #fff; box-shadow: 1px 1px 3px rgba(0,0,0,.25); position: absolute; top: 200px; right: 10px; } .title-nav-li { display: block; padding: 10px; text-decoration: none; color: inherit; } .title-nav-li.active { font-weight: bold; } .title-nav-li:hover { background-color: #f0f0f0; } </style> </head> <body> <div class="zxx_main_con"> <article> <h3>一、为何叫LuLu？</h3> <p>气质相符。</p> <p><img src="http://qidian.gtimg.com/lulu/theme/modern/css/common/images/temp/figure.png" width="122" height="137"></p> <h3>二、为什么使用LuLu？</h3> <ol> <li> <h4>已迭代多年</h4> <p>始于2015年，已成功支持多个千万PV大型项目，迭代优化多年，较成熟。</p> </li> <li> <h4>上手简单</h4> <p>会简单HTML和jQuery就可以上手了，不像一些流行框架，需要较多的学习成本。</p> </li> <li> <h4>使用方式灵活</h4> <p>支持类似seajs这种模块化加载，同时也支持一个一个<code><script></code>直接加载调用。</p> </li> <li> <h4>体验和细节很棒</h4> <p>体验和细节很棒，包括：</p> <h5>①. 代码质量高</h5> <p>eslint对格式进行严格控制，同时有比较详细的注释，API命名和变量命名等至始至终风格一致，方便理解、修改与学习。</p> <h5>②. retina支持</h5> <p>所有UI组件都是支持retina显示的。主要应用了CSS生成技术，以及SVG的处理。</p> <p>且每个组件的小图标独立使用，不耦合，使用base64技术，减少无谓的额外http请求，IE7/IE8使用图片向下兼容。</p> <pre>.icon { background: url(test.png); background: url(data:image/svg+xml;base64,…), none; }</pre> <h5>③. 交互细腻</h5> <p>渐进增强使用CSS3 <code>animation</code>和<code>transition</code>，以较低成本增强组件交互体验。同时，兼顾<code>hover</code>延迟，弹框背景锁定，组件可视区域控制等很多细节处理。</p> </li> <li> <h4>无障碍访问支持</h4> <p>peak主题下，增加了Aria屏幕阅读设备无障碍访问以及键盘无障碍访问支持。</p> </li> </ol> <h3>三、设计理念</h3> <ol> <li> <h4>面向设计开发</h4> <p>关于面向设计开发可参见这里：“<a target="_blank" href="http://www.zhangxinxu.com/wordpress/?p=4892">面向设计的半封装web组件开发</a>”。</p> <p>面向设计最大的特点在于能够对设计进行最完美的还原，可以很好地展现设计品质。有别于先有组件，然后再制约设计的设计策略。</p> <p>所以，LuLu UI是没有版本的概念的，只有一条核心线自己往前走。当新项目过来需要使用的时候，完全拷贝LuLu UI到项目开发目录中，然后根据当前项目的设计风格，对HTML和JS进行结构上的调整，是放心大胆的调整。</p> <p>因此，LuLu UI组件不是传统的大而全，而是走极简轻便灵活方向，表现为模块低耦合，层级扁平；API非常少，尤其一些基本组件，直接就没有API。</p> <p>LuLu UI没有版本概念，只有主题。目前有morden和peak两个主题。寓意为“现代”和“巅峰”。morden主题兼容IE7+，目前已停止维护，因为项目已经放弃对IE7的兼容；peak主题兼容IE8+，是目前持续维护和迭代的版本。</p> </li> <li> <h4>基于HTML开发</h4> <p>相对于其他UI框架，LuLu UI技术栈更偏向HTML和CSS，以便更友好地还原设计和增强体验。</p> <p>具体而言，LuLu UI基于HTML开发，实现前端开发分离，具体可参考“<a href="http://www.zhangxinxu.com/wordpress/?p=5180">顺势而为，HTML发展与UI组件设计进化</a>”。</p> <p>换句话说，开发的时候，只需要关心原生的HTML控件就可以，组件什么的不用在意。例如，时间选择，当我们选择或修改日期，就直接当组件不存在，处理原生input就好了：</p> <pre>$("input").change(function() {});</pre> <p>想要修改日期范围，很简单，直接改变原生的属性值就好了：</p> <pre>$("input").attr({ "min": "2015-07-01", "max": "2015-09-01" });</pre> <p>组件自动就会同步，就跟原生的时间选择组件感觉一样！</p> <p>所谓UI组件，本来就应该只负责UI，跟业务没有瓜葛才对。</p> <p>LuLu中的很多UI组件都是采用这样的设计思想。</p> </li> </ol> <h3>四、滚动到底部我高亮</h3> <p>试试看</p> </article> </div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="http://img.gzui.net/plug-in/jquery.titleNav.js"></script> <script type="text/javascript"> $('h3').titleNav(); </script> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 文章文档标题自动生成导航jQuery小插件titleNav.js