mootools_使用MooTools 1.2创建动态目录

mootools

You've probably noticed that I shy away from writing really long articles. Here are a few reasons why:

您可能已经注意到，我回避写很长的文章。 原因如下：

• Most site visitors are coming from Google and just want a straight to the point, bail-me-out ASAP answer to a question.
  大多数网站访问者都是Google来的，他们只想直截了当地，尽快解决问题。
• I've noticed that I have a hard time reading long articles. Short attention span, I guess.
  我注意到我很难阅读长篇文章。 我想注意力不集中。
• When the article is long, I tend to see less comments -- both on my blog and others.
  当文章长时，我倾向于在博客和其他博客上看到较少的评论。
• Quite frankly, if the article bombs, I feel like I wasted a bunch of time.
  坦率地说，如果文章炸了，我觉得我浪费了很多时间。

Say I did put together a lengthy article -- I'd want to automate a table of contents, right? Well, here's how I would do it.

假设我确实写了一篇冗长的文章-我想自动化目录，对吗？ 好吧，这就是我要怎么做。

View Demo 观看演示

XHTML (The XHTML)

<h1>Article Title</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.....</p>
<h2>Article Title 2 (1)</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.....</p>
<h3>Article Title 3 (1)</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.....</p>
<h3>Article Title 3 (2)</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.....</p>
<h3>Article Title 3 (3)</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.....</p>
<h2>Article Title 2 (2)</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.....</p>
<h2>Article Title 2 (3)</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.....</p>
<h3>Article Title 3 (4)</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.....</p>

As you can see, the above content is really just rubbish for our example. Note the order of the "h" tags.

如您所见，在我们的示例中，以上内容实际上只是垃圾。 注意“ h”标签的顺序。

CSS (The CSS)

#toc		{ float:right; border:1px solid #fc0; background:#fffea1; padding:10px; font-family:tahoma, arial; margin:0 0 20px 20px; }
#toc a 		{ display:block; margin:3px; }
#toc .h1	{ color:#090; }
#toc .h2	{ padding:0 0 0 10px; font-size:11px; }
#toc .h3	{ color:#f00; font-size:10px; padding:0 0 0 30px; }

The above CSS applies only to the table of contents DIV we'll be building. The JavaScript will add the "h{x}" class to the generated link to that section. Note that the TOC will start hidden.

上面CSS仅适用于我们将要构建的目录DIV。 JavaScript会将“ h {x}”类添加到该部分的生成链接中。 请注意，TOC将开始隐藏。

MooTools JavaScript (The MooTools JavaScript)

//once the dom is set...
window.addEvent('domready', function() {

	//initial vars
	var finders = ['h1','h2','h3','h4','h5','h6'];
	var matches = [];

	//find the h1, which is the article title
	$('article-area').getElements('*').each(function(el,i) {

		//do we want this?
		if(finders.contains(el.get('tag')))
		{
			//create anchor
			var anchor = new Element('a', {
				'class': el.get('tag'),
				'text': el.get('text'),
				'href': 'javascript:;'
			});

			//click event
			anchor.addEvent('click', function() {
				var go = new Fx.Scroll(window).toElement(el);
			});

			//add into our matches array
			matches.include(anchor);
		}

	});

	//should we show the toc?
	if(matches.length)
	{
		//create toc div, inject
		var toc = new Element('div', {
			'id': 'toc',
			'html': '<strong>Table of Contents</strong><br />'
		}).inject('article-area','before');

		//inject the matches
		matches.each(function(el) {
			el.inject(toc);
		});
	}

});

There's a lot going on here so let me break it down. First, I initialize a few vars. The most important is "finders," which allows us to set the tags to be included in the table of contents. Next, we grab all elements inside my designated "article-area" element. If the element is in our "finders" list, we create an anchor for it, attach smooth scrolling to the anchor's "click" event, and store the anchor in our "matches" array. In the end, if we find any matches, we create the DIV and float it to the right. If not, the TOC never displays. Sweet!

这里发生了很多事情，所以让我分解一下。 首先，我初始化一些变量。 最重要的是“查找器”，它使我们可以设置要包含在目录中的标签。 接下来，我们在我指定的“文章区域”元素中获取所有元素。 如果该元素在我们的“ finders”列表中，则为其创建一个锚点，将平滑滚动附加到该锚点的“ click”事件，并将该锚点存储在我们的“ matches”数组中。 最后，如果找到任何匹配项，我们将创建DIV并将其浮动到右侧。 如果不是，则永远不会显示目录。 甜！

View Demo 观看演示

笔记 (Notes)

• You'll likely want to customize this system a bit to suit the structure of your articles.
  您可能需要对这个系统进行一些自定义，以适合您文章的结构。
• I'm not a huge fan of using lists (<ul>) for the sake of using them, which is why I used anchors and "display:block" CSS
  我不是为了使用列表而使用列表(<ul>)的忠实粉丝，这就是为什么我使用锚和“ display：block” CSS的原因
• My articles only use one H1 and multiple H2's. In this case, I'd customize this TOC to place the H1 value at the top of the TOC (instead of "Table of Contents"). After that heading, the rest of the H2's would follow. I didn't employ this in my example because I wanted it to be as "general" or "basic" as possible.
  我的文章仅使用一个H1和多个H2。 在这种情况下，我将自定义此目录以将H1值放置在目录的顶部(而不是“目录”)。 在该标题之后，其余的H2将接follow而至。 在我的示例中，我没有使用它，因为我希望它尽可能“通用”或“基本”。
• It may suit your blog to make your TOC toggle.
  它可能适合您的博客，以使您的目录切换。

翻译自: https://davidwalsh.name/dynamic-table-of-contents-mootools

mootools