mootools_使用MooTools 1.2动态加载样式表

mootools

Theming has become a big part of the Web 2.0 revolution. Luckily, so too has a higher regard for semantics and CSS standards. If you build your pages using good XHTML code, changing a CSS file can make your website look completely different. Using a short MooTools snippet, you can dynamically load a change primary stylesheets with just one click.

主题化已成为Web 2.0革命的重要组成部分。 幸运的是，对语义和CSS标准也有更高的要求。 如果您使用良好的XHTML代码构建页面，则更改CSS文件可以使您的网站看起来完全不同。 使用简短的MooTools代码段，您只需单击一下即可动态加载更改主样式表。

View Demo 观看演示

步骤1：XHTML (Step 1: The XHTML)

<p>
<a href="?theme=black" class="load-css" rel="load-stylesheet/black.css">Load Black Stylesheet</a><br /><br />
<a href="?theme=red" class="load-css" rel="load-stylesheet/red.css">Load Red Stylesheet</a><br /><br />
<a href="?theme=blue" class="load-css" rel="load-stylesheet/blue.css">Load Blue Stylesheet</a><br /><br />
</p>

Above are three links to three themes. The load-css class is added and the rel attribute holds the path to the CSS file for the sake of MooTools. If the user doesn't have JavaScript, I've added an href attribute to allow for the page to change the theme using server-side methods upon a new page load.

以上是三个主题的三个链接。 为了MooTools，添加了load-css类，并且rel属性保存了CSS文件的路径。 如果用户没有JavaScript，则添加了href属性，以允许页面在加载新页面时使用服务器端方法更改主题。

步骤2：CSS (Step 2: The CSS)

/* black.css */
body { background:#000; color:#fff; }
a		{ color:#ccc; }

/* blue.css */
body { background:#00f; color:#fff; }
a		{ color:#fff; }

/* red.css */
body { background:#f00; color:#fff; }
a		{ color:#fff; }

Above you see the contents of three stylesheet files. These can act as three different themes, so to speak.

在上方，您可以看到三个样式表文件的内容。 可以说，这些可以充当三个不同的主题。

步骤3：MooTools JavaScript (Step 3: The MooTools JavaScript)

window.addEvent('domready', function () {
	//for every anchor with the class "load-css"...
		$$('.load-css').each(function(el) {
			//add a click  event to add the stylesheet
			el.addEvent('click', function() {
			//get the file. file is based on the anchor's rel attribute
			var css = new Asset.css(el.get('rel'), { });
		});
	});
});

The MooTools JavaScript snippet is very simple. For every link with the load-css class, a click event listener is added to load the specified stylesheet. Once a stylesheet has been injected into the page, no more file calls are made -- once it's loaded, it's loaded.

MooTools JavaScript代码段非常简单。 对于与load-css类的每个链接，都会添加一个click事件侦听器以加载指定的样式表。 将样式表注入页面后，将不再进行文件调用-一旦加载，就将其加载。

View Demo 观看演示

翻译自: https://davidwalsh.name/dynamically-load-stylesheets-mootools

mootools