mootools_使用CSS和MooTools修复sIFR打印

mootools

While I'm not a huge sIFR advocate I can understand its allure. A customer recently asked us to implement sIFR on their website but I ran into a problem: the sIFR headings wouldn't print because they were Flash objects. Here's how to fix the sIFR printing issue.

虽然我不是sIFR的拥护者，但我可以理解它的魅力。 一位客户最近要求我们在其网站上实施sIFR，但我遇到了一个问题：sIFR标题无法打印，因为它们是Flash对象。 这是解决sIFR打印问题的方法。

View Demo 观看演示

样本XHTML (Sample XHTML)

<h2>Sample Heading 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut lectus fermentum augue bibendum tincidunt. In hac habitasse platea dictumst. Nullam ornare nunc ac massa. Nam volutpat tempor tortor. Maecenas sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum a odio ut libero facilisis tincidunt.</p>

<h2>Sample Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut lectus fermentum augue bibendum tincidunt. In hac habitasse platea dictumst. Nullam ornare nunc ac massa. Nam volutpat tempor tortor. Maecenas sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum a odio ut libero facilisis tincidunt.</p>

Just some sample XHTML.

只是一些示例XHTML。

CSS (The CSS)

@media screen {
	.print-only	{ display:none; }
}
@media print {
	.print-only { display:block; }
	.no-print	{ display:none; }
}

Setting a couple of standard print-related CSS styles.

设置一些与打印有关的标准CSS样式。

MooTools JavaScript (The MooTools JavaScript)

$$('h2').each(function(el,i) {
		//new print-only h2
		 new Element('h2',{
			  text: el.get('text')
		 }).addClass('print-only').inject(el,'before');
		 
		//inject swiff into current h2
		el.addClass('no-print');
		var swiff = new Swiff('sifr450x23.swf',{
			 id: 'sifr-' + i,
			 width: 450,
			 height: 23,
			 container: el,
			 params: {
				  wMode: 'transparent'
			 },
			 vars: {
				  titleText:el.get('text')
			 }
		});
  });
});

We first inject a new H2 element that will be used for print. Then we inject the Swiff into the original H2. Of course you can see where I've added the print-only/no-print CSS classes.

我们首先注入一个新的H2元素，该元素将用于打印。 然后，将Swiff注入原始H2中。 当然，您可以看到我在哪里添加了仅打印/不打印CSS类。

View Demo 观看演示

The only browser I found that printed the Flash sIFR objects was Internet Explorer. This solution will work across all browsers.

我发现唯一打印Flash sIFR对象的浏览器是Internet Explorer。 该解决方案可在所有浏览器上使用。

翻译自: https://davidwalsh.name/sifr-print-css-mootools

mootools