display.php-n=15-11&f=15-toc.js.htm
来自「javascript 5 随书源码 javascript」· HTM 代码 · 共 259 行
HTM
259 行
<html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Keywords" name="Keywords"content="JavaScript, examples, JavaScript: The Definitive Guide"><title>Example 15-11 from JavaScript: The Definitive Guide, Fifth Edition</title><style>body { font-family: arial, sans-serif}.lefttitle { font: bold x-small arial, sans-serif; margin: 5px; letter-spacing: .15em; text-transform:uppercase;}.leftcaption { font: italic x-small sans-serif; margin-bottom: 20px;}#banner { font-family:sans-serif; color:#333; font-size:x-large; font-weight:normal; padding:15px; padding-top: 3px; border-bottom:4px double #666;}#banner h1 { font-size: x-large; margin: 0px; padding: 0px;}#banner .description { font-size:large; margin-left: 2px;}pre { border: solid black 1px; background-color: #ddd; padding: 10px; margin: 0px;} </style></script></head><body><div id="banner"><h1>davidflanagan.com/javascript5</h1><span class="description">Example 15-11 from<i>JavaScript: The Definitive Guide, Fifth Edition</i></span></div><div style="float: left; text-align: center; width:200px; margin-right:20px"><div class="lefttitle">Buy The Book</div><iframe src="../../rcm.amazon.com/e/cm-t=davidflanagancom&o=1&p=8&l=as1&asins=0596101996&fc1=000000&IS2=1<1=_blank&lc1=0000ff&bc1=000000&bg1=ffffff&f=ifr" tppabs="http://rcm.amazon.com/e/cm?t=davidflanagancom&o=1&p=8&l=as1&asins=0596101996&fc1=000000&IS2=1<1=_blank&lc1=0000ff&bc1=000000&bg1=ffffff&f=ifr" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe><div class="leftcaption">This example is posted here for the convenienceof my readers.</div><div class="lefttitle">Tip the Author</div><form action="https://www.paypal.com/cgi-bin/webscr" method="post"><input type="hidden" name="cmd" value="_s-xclick"><input type="image" src="../../www.paypal.com/en_US/i/btn/x-click-but21.gif" tppabs="https://www.paypal.com/en_US/i/btn/x-click-but21.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!"><img alt="" border="0" src="../../www.paypal.com/en_US/i/scr/pixel.gif" tppabs="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"><input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----"></form><div class="leftcaption">Found a helpful example, but don't own the book?</div><div class="lefttitle">Advertising</div><script type="text/javascript"><!--google_ad_client = "pub-5162555666633441";google_alternate_color = "ffffff";google_ad_width = 160;google_ad_height = 600;google_ad_format = "160x600_as";google_ad_type = "text_image";google_ad_channel ="";//--></script><script type="text/javascript" src="../../pagead2.googlesyndication.com/pagead/show_ads.js" tppabs="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script></div><div style="margin-left: 220px;"><div class="lefttitle" style="padding:0px; text-align: right"><a href="index.html" tppabs="http://www.davidflanagan.com/javascript5/index.html">Table of Examples</a></div><pre>/** * TOC.js: create a table of contents for a document. * * This module defines a single maketoc() function and registers an onload * event handler so the function is automatically run when the document * finishes loading. When it runs, maketoc() first looks for a document * element with an id of "toc". If there is no such element, maketoc() does * nothing. If there is such an element, maketoc() traverses the document * to find all <h1> through <h6> tags and creates a table of contents, which * it appends to the "toc" element. maketoc() adds section numbers * to each section heading and inserts a link back to the table of contents * before each heading. maketoc() generates links and anchors with names that * begin with "TOC", so you should avoid this prefix in your own HTML. * * The entries in the generated TOC can be styled with CSS. All entries have * a class "TOCEntry". Entries also have a class that corresponds to the level * of the section heading. <h1> tags generate entries of class "TOCLevel1", * <h2> tags generate entries of class "TOCLevel2", and so on. Section numbers * inserted into headings have class "TOCSectNum" and the generated links back * to the TOC have class "TOCBackLink". * * By default, the generated links back to the TOC read "Contents". * Override this default (for internationalization, e.g.) by setting * the maketoc.backlinkText property to the desired text. **/function maketoc() { // Find the container. If there isn't one, return silently. var container = document.getElementById('toc'); if (!container) return; // Traverse the document, adding all <h1>...<h6> tags to an array var sections = []; findSections(document, sections); // Insert an anchor before the container element so we can link back to it var anchor = document.createElement("a"); // Create an <a> node anchor.name = "TOCtop"; // Give it a name anchor.id = "TOCtop"; // And an id (IE needs this) container.parentNode.insertBefore(anchor, container); // add before toc // Initialize an array that keeps track of section numbers var sectionNumbers = [0,0,0,0,0,0]; // Now loop through the section header elements we found for(var s = 0; s < sections.length; s++) { var section = sections[s]; // Figure out what level heading it is var level = parseInt(section.tagName.charAt(1)); if (isNaN(level) || level < 1 || level > 6) continue; // Increment the section number for this heading level // And reset all lower heading level numbers to zero sectionNumbers[level-1]++; for(var i = level; i < 6; i++) sectionNumbers[i] = 0; // Now combine section numbers for all heading levels // to produce a section number like 2.3.1 var sectionNumber = ""; for(i = 0; i < level; i++) { sectionNumber += sectionNumbers[i]; if (i < level-1) sectionNumber += "."; } // Add the section number and a space to the section header title. // We place the number in a <span> to make it styleable. var frag = document.createDocumentFragment(); // to hold span and space var span = document.createElement("span"); // span to hold number span.className = "TOCSectNum"; // make it styleable span.appendChild(document.createTextNode(sectionNumber)); // add sect# frag.appendChild(span); // Add span to fragment frag.appendChild(document.createTextNode(" ")); // Then add a space section.insertBefore(frag, section.firstChild); // Add both to header // Create an anchor to mark the beginning of this section. var anchor = document.createElement("a"); anchor.name = "TOC"+sectionNumber; // Name the anchor so we can link anchor.id = "TOC"+sectionNumber; // In IE generated anchors need ids // Wrap the anchor around a link back to the TOC var link = document.createElement("a"); link.href = "#TOCtop"; link.className = "TOCBackLink"; link.appendChild(document.createTextNode(maketoc.backlinkText)); anchor.appendChild(link); // Insert the anchor and link immediately before the section header section.parentNode.insertBefore(anchor, section); // Now create a link to this section. var link = document.createElement("a"); link.href = "#TOC" + sectionNumber; // Set link destination link.innerHTML = section.innerHTML; // Make link text same as heading // Place the link in a div that is styleable based on the level var entry = document.createElement("div"); entry.className = "TOCEntry TOCLevel" + level; // For CSS styling entry.appendChild(link); // And add the div to the TOC container container.appendChild(entry); } // This method recursively traverses the tree rooted at node n, looking // for <h1> through <h6> tags and appends them to the sections array. function findSections(n, sects) { // Loop through all the children of n for(var m = n.firstChild; m != null; m = m.nextSibling) { // Skip any nodes that are not elements. if (m.nodeType != 1 /* Node.Element_NODE */) continue; // Skip the container element since it may have its own heading if (m == container) continue; // As an optimization, skip <p> tags since headings are not // supposed to appear inside paragraphs. (We could also skip // lists, <pre> tags, etc., but <p> is the most common one.) if (m.tagName == "P") continue; // optimization // If we didn't skip the child node, check whether it is a heading. // If so, add it to the array. Otherwise, recurse on it. // Note that the DOM is interface-based not class-based so we // cannot simply test whether (m instanceof HTMLHeadingElement). if (m.tagName.length==2 && m.tagName.charAt(0)=="H") sects.push(m); else findSections(m, sects); } }}// This is the default text of links back to the TOCmaketoc.backlinkText = "Contents";// Register maketoc() to run automatically when the document finishes loadingif (window.addEventListener) window.addEventListener("load", maketoc, false);else if (window.attachEvent) window.attachEvent("onload", maketoc);</pre><div class="lefttitle" style="padding:0px; text-align: right"><a href="index.html" tppabs="http://www.davidflanagan.com/javascript5/index.html">Table of Examples</a></div><p><script type="text/javascript">amazon_ad_tag="davidflanagancom"; amazon_ad_width="300"; amazon_ad_height="250"; amazon_ad_logo="hide";</script><script type="text/javascript" src="../../www.assoc-amazon.com/s/ads.js" tppabs="http://www.assoc-amazon.com/s/ads.js"></script></div></body></html>⌨️ 快捷键说明
复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?