是否有一种方法可以使用HTML5大纲算法和CSS(可能还有JS)生成文档导航
Is there a way to generate document navigation using the HTML5 outline algorithm and CSS (and possibly JS)?
是否有一种方法可以使用HTML5大纲算法和CSS(可能还有JS)生成文档导航,比如TeX可以生成目录?
编辑:有没有一种方法来显示一个HTML文档的链接大纲,而不明确地写它?我想的是TeX中的'tableofcontents
。因此,一个空的<nav>
标签将被一个无序的链接列表填充到页面的各个部分,例如
对于将从文档大纲创建自动toc的javascript来说,您必须先开发自己的toc。[我发现实际上没有复制粘贴的解决方案]
研究这个:
- http://code.google.com/p/h5o/
- http://code.google.com/p/h5o/downloads/detail?name=outliner.0.5.0.62.js&能= 2,q =
- https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo
- https://developer.mozilla.org/en-US/docs/HTML/Sections_and_Outlines_of_an_HTML5_document?redirectlocale=en-US& redirectslug = Sections_and_Outlines_of_an_HTML5_document
和
- http://blog.tremily.us/posts/HTML5_outlines/
- http://projects.jga。我/toc/(jQuery插件,你可能想要适应)
(插件]
建议阅读用户@unor: github.com/DylanFM/outliner把我送到这个jsFiddle,那里有另一个javascript启动。
Javascript// See http://html5doctor.com/document-outlines/
// That article begins with info on HTML4 document outlines
// This doesn't do that yet, it just handles the HTML5 stuff beneath in the article
// I'm sure there are problems with handling that HTML5 stuff tho
var headingElements = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6'],
sectioningElements = ['SECTION', 'ARTICLE', 'NAV', 'ASIDE'];
function makeOutline(root) {
var ar = [],
el = root.firstChild,
nested, hg;
while(el) {
// If it's a sectioning element, create a new level in the outline
if(sectioningElements.indexOf(el.tagName) > -1) {
nested = makeOutline(el);
if(nested.every(function(i){ return typeof i !== 'string'; })) {
nested.unshift('Untitled ' + el.tagName.toLowerCase());
}
ar.push(nested);
} else if(headingElements.indexOf(el.tagName) > -1) {
ar.push(el.textContent);
} else if(el.tagName === 'HGROUP') {
hg = undefined;
// Find the highest heading element within
// Use its text, otherwhise it's untitled
try {
headingElements.forEach(function(t) {
els = el.getElementsByTagName(t);
if(els.length) {
hg = els[0].textContent;
throw BreakException;
}
});
} catch(e) {}
if(!hg) {
hg = 'Untitled hgroup';
}
ar.push(hg);
}
el = el.nextSibling;
}
return ar;
};
var outline = makeOutline(document.body);
// This is just used for displaying the outline.
// Inspect the outline variable to see the generated array:
// console.log(outline);
function describeOutline(outline) {
var indentForDepth = function(depth) {
var str = '';
for(i=depth;i>0;i--) {
str += ''t';
}
return str;
},
childrenAreStrings = function(ar, depth) {
var depth = (depth && (depth + 1)) || 1;
return ar.map(function(item) {
if({}.toString.call(item)=='[object Array]') {
return childrenAreStrings(item, depth).join(''n');
} else {
return indentForDepth(depth) + '- ' + String(item);
}
});
};
// Make sure all items in ar are strings
return childrenAreStrings(outline).join(''n');
}
(document.getElementsByTagName('pre')[0]).textContent = describeOutline(outline);
相关文章:
- css/js:通过滚动固定位置
- 什么CSS/JS技巧驱动镜像反转http://com.google愚人节页面
- CSS/js Flip Cards
- 将回车键映射到HTML/CSS/JS中的按钮
- CSS/.JS问题,<ul><李>在Megamenu中
- 最小化CSS/JS文件,并使用命令行创建一个文件
- 使用公共JS文档优化静态网站的CSS/JS导入
- HTML/CSS/JS切换不同的谷歌日历是同一个框架
- 使用 PHP 将 css/js 文件分配给 html 文档
- HTML/CSS/JS 构建工具
- Knockout.js在标头中绑定css/js库
- 如何在HTML/CSS/JS中为表/列表应用行虚拟化
- 当包含在CSS/JS/HTML中时,我如何得出正确的目录路径
- 这段代码有什么问题(responsible html-css-js)
- CSS/JS:如何在悬停时显示文本,并显示点击href的文本框
- 如何使css/js对象在所有浏览器上都相同
- html+css+js组合在Google Chrome或Safari浏览器中无法正常工作
- CSS/JS转换:translate3d和滚动-在Android上流畅,在iPhone上没有动力
- 使用CSS/JS反转和重新反转元素
- 将复杂的html/css/js元素添加到单个Wordpress页面中