mootools_使用MooTools更好地提取报价

mootools

Chris Coyier authored a post titled Better Pull Quotes: Don't Repeat Markup a while back. In his post he created great-looking pull quotes without repeating any content -- instead he uses jQuery to dynamically create the pull quotes. The following is the MooTools method for doing so.

克里斯·科耶尔(Chris Coyier)撰写了一篇题为《 更好的引号》：不久前不要重复标记 。 在他的文章中，他创建了美观的拉引号，而没有重复任何内容-而是使用jQuery动态创建拉引号。 以下是MooTools方法。

View Demo 观看演示

HTML (The HTML)

<p><span class="pull-me">As a MooTools "insider", however, I'm excited for what the MooTools team will bring to the table during 2010.</span> We'll be launching the Forge (our public plugin repository), releasing MooTools 2, continuing to grow MooTools More, featuring more community work, and much more. MooTools FTW!</p>

The HTML above features a paragraph of content with a SPAN tag wrapping what I'd like to be the pull quote.

上面HTML带有一段带有SPAN标记的内容段落，该标记包装了我想作为下拉引号的内容。

CSS (The CSS)

.quote { padding:20px; margin:0 0 20px 20px; font-size:20px; font-style:italic; background:#eee; color:#999; display:block; width:200px; float:right; }

You may style the quote any way you'd like. These elements are traditionally large in text with italicized text and a different background color.

您可以根据需要设置引号的样式。 传统上，这些元素在带有斜体文本和不同背景颜色的文本中较大。

MooTools JavaScript (The MooTools JavaScript)

window.addEvent('domready',function() {
	//grab all quotes
	$$('span.pull-me').each(function(span) {
		//inject styled quote into page
		new Element('span',{
			'class': 'quote',
			text: span.get('text')
		}).inject(span.getParent(),'top');
	});
});

We find each element with a "pull-me" CSS class and generate a new element with our "quote" class. We then inject the new element into the original element's parent. That's all!

我们使用“ pull-me” CSS类找到每个元素，并使用“ quote”类生成一个新元素。 然后，我们将新元素注入到原始元素的父元素中。 就这样！

View Demo 观看演示

Chris did a great job with the execution of his idea. This is a technique that will likely be used well into the future.

克里斯在执行他的想法方面做得很好。 这是一种很可能会在将来广泛使用的技术。

翻译自: https://davidwalsh.name/mootools-pull-quotes

mootools