mootools_MooTools带有Cookie保存的字体大小滚动条

mootools

Providing users as many preferences as possible always puts a smile on the user's face. One of those important preferences is font size. I can see fine but the next guy may have difficulty with the font size I choose. That's why I've built a MooTools-driven font-size slider that saves the user's preference into a cookie. Let me show you how to add this to your websites.

向用户提供尽可能多的首选项总是使用户脸上露出微笑。 这些重要的首选项之一是字体大小。 我可以看到很好的效果，但是下一个家伙可能在选择字体大小方面遇到困难。 这就是为什么我构建了一个MooTools驱动的字体大小滑块，将用户的首选项保存到cookie中的原因。 让我告诉您如何将其添加到您的网站。

View Demo 观看演示

XHTML (The XHTML)

<div id="font-area">
	<div id="font-slider"></div>
	<div id="font-label"></div><span id="font-update">Saved!</span>
</div>

Above is the code to create the slider area as well as the "update message" slider that will pop in when the user updates their font size preference.

上面是创建滑块区域以及在用户更新其字体大小首选项时将弹出的“更新消息”滑块的代码。

CSS (The CSS)

#font-area		{ background:url(horizontal.jpg) 0 8px no-repeat; height:23px; width:500px; margin:0 0 5px 0; }
#font-slider	{ background:url(button-horizontal.jpg) no-repeat; width:25px; height:23px; cursor:pointer; }
#font-label		{ font-weight:bold; float:left; }
#font-update	{ color:#090; padding:0 0 0 15px; }

The CSS is very much like my Facebook Sliders article. Feel free to style the slider however you'd like.

CSS非常类似于我的Facebook Sliders文章。 随意设置滑块的样式。

MooTools 1.2 JavaScript (The MooTools 1.2 JavaScript)

/* do it */
window.addEvent('domready', function() {
	
	//load the font-size cookie if it exists and change body font
	var start = Cookie.read('fontsize') || '12';
	document.body.setStyle('font-size',start + 'px');
	$('font-label').set('text','Font: ' + start);
	
	//create the message slider
	var fx = new Fx.Slide('font-update', {
		mode: 'horizontal'
	}).hide();

	
	//create the slider
	var changed = 0;
	var mySlide = new Slider($('font-area'), $('font-slider'), {  
		steps: 9,
		range: [12,30],
		wheel: 1,
		snap: 1,
		onChange: function(size){
			$('font-label').set('text','Font: ' + size);		//set the label
			Cookie.write('fontsize',size);			//set the cookie
			document.body.setStyle('font-size',size + 'px'); //set the document font size
			if(changed) {
				fx.slideIn();
				(function() { fx.slideOut(); }).delay(2000);
			}
			changed = 1;
		}
	}).set(start);
	
});

There's actually very little JavaScript to this create this functionality thanks to MooTools. Once the DOM is ready, we read in the saved font size (if one exists) and set it accordingly. Next we create our update message slider JavaScript. The last part is the fun part: the font size slider. The options are fairly self explanatory until the change event. On slider change, we:

由于MooTools，实际上只有很少JavaScript可以创建此功能。 DOM准备就绪后，我们读取保存的字体大小(如果存在)并相应地进行设置。 接下来，我们创建更新消息滑块JavaScript。 最后一部分是有趣的部分：字体大小滑块。 在更改事件之前，这些选项很容易解释。 在更改滑块时，我们：

• update the font size label
  更新字体大小标签
• write a cookie to save the font size value
  编写cookie以保存字体大小值
• change the document's font size
  更改文档的字体大小
• slide in the update text and slide it out two seconds later.
  滑入更新文本，两秒钟后滑出。

View Demo 观看演示

Have improvements for my slider? Want to use it on an upcoming project? Share!

我的滑盖有改进吗？ 想要在即将到来的项目中使用它吗？ 分享！

翻译自: https://davidwalsh.name/mootools-font-size-scroller-cookie-save

mootools