mootools 选项卡_使用MooTools 1.2保存文本大小首选项

mootools 选项卡

This post was authored by Eric Wendelin. To learn more about Eric, click here.

该帖子由Eric Wendelin撰写。 要了解有关Eric的更多信息， 请单击此处 。

Last time posting here I taught you how to change text-size with JavaScript. The problem with using the solution I presented as Ian Lloyd pointed out:

上次在这里发布我教您如何使用JavaScript更改文本大小 。 使用Ian Lloyd提出的解决方案时遇到的问题是 ：

Increase the font size, follow a link to another web page on same site and … back to small text

增加字体大小，单击链接到同一网站上的另一个网页，然后…返回小文本

Obviously, the problem here is that we don't remember the user's preferences. It turns out to be very easy using simple JavaScript and PHP. You can view the demo now if you like. For this example I'm going to use the new MooTools 1.2 beta to handle the "cookie jar" so I don't get my hand stuck in it :) OK, let's revise the JavaScript that does the text-sizing:

显然，这里的问题是我们不记得用户的偏好。 事实证明，使用简单JavaScript和PHP非常容易。 如果愿意，您可以立即查看演示 。 在此示例中，我将使用新的MooTools 1.2 beta处理“ cookie罐”，因此不会被困在里面：)好吧，让我们修改用于调整文本大小JavaScript：

新增和改进的resizeText()： (New and Improved resizeText():)

function resizeText(multiplier) 
{   
	var fontsz = "1.0em"; //Default to 1em   
	if (Cookie.get('site_font_size')) 
	{     
		// Use MooTools to get the cookie (if it exists)     
		fontsz = Cookie.get('site_font_size');   
	}   
	fontsz = parseFloat(fontsz) + (multiplier * 0.2) + "em";   // Change body text size   
	document.body.style.fontSize = fontsz;      //Set a new cookie with MooTools   
	
	var myCookie = Cookie.set('site_font_size', fontsz, {     
		domain: 'mydomain.com',
		duration: 365 //Save for 365 days   
	}); 
} 

As you can see this function has grown up into a very useful utility that uses cookies to store and retrieve the value of the current font-size so that the user doesn't have to resize the text after every page load. We could just call resizeText(0) onload but that would cause a flicker on the user's screen and we do not tolerate that when we can do something about it. Using PHP prevents this from happening.

如您所见，此功能已发展成为一个非常有用的实用程序，该实用程序使用cookie来存储和检索当前字体大小的值， 从而使用户不必在每次加载页面后重新调整文本大小 。 我们可以只调用resizeText(0) onload，但这会在用户的屏幕上引起闪烁，因此我们不能容忍这样做。 使用PHP可以防止这种情况的发生。

PHP代码段： (The PHP snippet:)

<? echo 'body { font-size:',$_COOKIE['site_font_size'],'; }'; } ?>

Put this snippet immediately after your <link> and <style> tags to prevent any errors.

将此代码段放在<link>和<style>标记之后，以防止出现任何错误。

Now once you have it all ready to test out, I recommend using Firecookie (an extension to Firebug) to verify that it is working exactly as expected. I have a blog post that tells you about all of Firecookie's cool features.

现在，一旦您准备好进行全部测试，我建议使用Firecookie ( Firebug的扩展)来验证它是否按预期工作。 我有一篇博客文章 ，向您介绍了Firecookie的所有出色功能。

View Demo 观看演示

关于埃里克·温德林 (About Eric Wendelin)

Eric Wendelin is a software engineer for Sun Microsystems. When he’s not doing super-secret programming for Sun, he plays indoor soccer, playing Wii with his friends, and cheering on the Colorado Avalanche. He also writes a blog on JavaScript, CSS, Java, and Productivity at eriwen.com

Eric Wendelin是Sun Microsystems的软件工程师。 当他不为Sun做超级秘密编程时，他会踢室内足球，和他的朋友一起玩Wii，并为科罗拉多雪崩队加油。 他还在eriwen.com上撰写了有关JavaScript，CSS，Java和Productivity的博客。

翻译自: https://davidwalsh.name/save-text-size-mootools

mootools 选项卡