Phiên bản đầy đủ: jsB@nk » Liên kết » Tạo bookmark tự động
URL: https://www.javascriptbank.com/build-toc.html
Đoạn mã này sẽ tự động xây dựng bảng nội dung với các bookmark dựa vào các header Hx(H1, H2, H3,...) có trên trang web. Hiệu ứng hoạt động tốt trên cả các trình duyệt có nhân không phải là IE.
Phiên bản đầy đủ: jsB@nk » Liên kết » Tạo bookmark tự động
URL: https://www.javascriptbank.com/build-toc.html
<style type="text/css"><!--#TOC { margin: 0px; display: inline; border-style: none;}#TOC a.:link { color:blue;text-decoration:none}#TOC a:visited { color:orange;text-decoration:none}#TOC a:hover { color:red;text-decoration:underline}#TOC a:active { color:green;text-decoration:underline}#TOC li.H1 { font: normal normal normal 14pt Comic Sans MS,verdana,georgia,arial; list-style-type: none; margin-left: 0px;}#TOC li.H2 { font: normal normal normal 12pt Comic Sans MS,verdana,georgia,arial; list-style-type: none; line-height:16px; margin-left: 10px;}#TOC li.H3 { font: normal normal normal 10pt verdana,Comic Sans MS,georgia,arial; list-style-type: none; line-height:16px; margin-left: 20px;}#TOC li.H4 { font: italic normal normal 10pt verdana,Comic Sans MS,georgia,arial; list-style-type: none; line-height:16px; margin-left: 30px;}#TOC li.H5 { font: italic normal normal 10pt verdana,Comic Sans MS,georgia,arial; list-style-type: none; line-height:16px; margin-left: 40px;}#TOC li.H6 { font: italic normal normal 10pt verdana,Comic Sans MS,georgia,arial; list-style-type: none; line-height:16px; margin-left: 50px;}--></style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script type="text/javascript"><!-- Begin// Created by: Stephen Morley :: http://sbm.customer.netspace.net.auvar stateTOC = 'ON';function toggleTOC() { if (stateTOC == 'ON') { stateTOC = 'OFF' document.getElementById('TOC').style.display = "none"; } else { stateTOC = 'ON' document.getElementById('TOC').style.display = "inline"; }}function buildTOC() { /***************************************/ /* Get desired tags and store in array */ /***************************************/ /* Define list of tags to include in toc Each valid tag must be bounded by spaces to satisfy the test below. The beginning & end '.'s merely stop leading & trailing whitespaces being removed.*/ validTagList = '. H1 H2 H3 H4 H5 H6 .'; // Get list of all tags & store in array. // DOM Level 1 Standard */ if (document.body.childNodes) { // alert('DOM Standard'); allTags = getObjects(); } // Microsoft proprietry intermediate DOM else if (document.all) { // alert('document.all'); allTags = document.all; } // Netscape proprietry intermediate DOM else if (document.layers) { // alert('document.layers'); alert('Netscape layers? What to do, what to do ....'); } var tagDetail = new Array(1); j = 0; aNum = 0; for(i = 0; i < allTags.length; i++) { if (validTagList.indexOf(' '+allTags[i].tagName+' ') > 0) { // Add an anchor as a child to the tag so that toc link to it aNum = aNum + 1; var aNode = document.createElement("A"); aNode.id = 'Z'+aNum; allTags[i].appendChild(aNode); // Keep relevant data fron the tag to use in toc separated by "|". // ....the name of the tag (eg. H3) tagDetail[j] = allTags[i].tagName + "|"; // ....the anchor number we have assigned tagDetail[j] = tagDetail[j]+aNum + "|"; // ....the text of the tag if (allTags[i].childNodes.length > 0) { tagDetail[j] = tagDetail[j]+allTags[i].childNodes[0].nodeValue } ; j = j + 1; } } /***************************************/ /*Build toc */ /***************************************/ var ulNode = document.createElement("UL"); tocId = document.getElementById('TOC'); tocId.appendChild(ulNode); for(i = 0; i < tagDetail.length; i++) { thisDetail = tagDetail[i].split("|"); var liNode = document.createElement("LI"); liNode.className = thisDetail[0]; ulNode.appendChild(liNode); var aNode = document.createElement("A"); aNode.className = thisDetail[0]; aNode.href = '#Z'+thisDetail[1]; liNode.appendChild(aNode); aNode.innerHTML = thisDetail[2]; // alert('i='+i + ' tagName='+aNode.tagName + ' href='+aNode.href + ' className='+aNode.className + ' text='+aNode.innerText); }}function getObjects() { var obj = new Array(1); j = 0; obj[j] = document.documentElement; traverse( document.documentElement ); function traverse(node) { obj[j] = node; j = j + 1; if (node.childNodes != null) { for (var i=0; i < node.childNodes.length; i++) { traverse(node.childNodes.item(i)); } } } return obj;}//--></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><!-- Optional anchor for return to TOC --><a id=tocPos></a><!-- Optional access key (ALT-t) to return to TOC --><a href="#tocPos" title="AccessKey: t" accesskey="t"></a><!-- Optional button to toggle TOC on/off --><input type = "button" value = "Table of Contents" onclick = "toggleTOC()"><!-- Required div to position TOC --><div id=TOC></div><h1>header 1</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</p><h2>header 1.1</h2><h3>header 1.1.1</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</p><h1>header 2</h1><h2>header 2.1</h2><h3>header 2.1.1</h3><h4>header 2.1.1.1</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</p><h4>header 2.1.1.2</h4><p>paragraph 4</p><h3>header 2.1.2</h3><h4>header 2.1.2.1</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</p><h1>header 3</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</p><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->