mootools 选项卡
This post was authored by . To learn more about Eric, .
该帖子由撰写。 要了解有关Eric的更多信息, 。
Last time posting here I taught you how to . The problem with using the solution I presented as Ian Lloyd :
上次在这里发布我教您如何 。 使用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 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: '', 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:)
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 (an extension to ) to verify that it is working exactly as expected. I have a that tells you about all of Firecookie's cool features.
现在,一旦您准备好进行全部测试,我建议使用 ( 的扩展)来验证它是否按预期工作。 我有一篇 ,向您介绍了Firecookie的所有出色功能。
关于埃里克·温德林 (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
Eric Wendelin是Sun Microsystems的软件工程师。 当他不为Sun做超级秘密编程时,他会踢室内足球,和他的朋友一起玩Wii,并为科罗拉多雪崩队加油。 他还在上撰写了有关JavaScript,CSS,Java和Productivity的
翻译自:
mootools 选项卡