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

mootools

Font Slider

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中的原因。 让我告诉您如何将其添加到您的网站。

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.

    滑入更新文本,两秒钟后滑出。

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

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

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

mootools

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值