mootools_带有Mootools和CSS的Facebook滑块

mootools

One of the great parts of being a developer that uses Facebook is that I can get some great ideas for progressive website enhancement. Facebook incorporates many advanced JavaScript and AJAX features: photo loads by left and right arrow, dropdown menus, modal windows, and the slider. A slider allows the user to drag a slider across a given plain to set a value instead of the boring, tedious text box. I've created a very simple 3-slider system that allows a user to modify the height, width, and opacity of an image using just sliders! Here's how it will look:

成为使用Facebook的开发人员的重要方面之一是，我可以为渐进式网站增强获得一些不错的想法。 Facebook集成了许多高级JavaScript和AJAX功能：通过左右箭头，下拉菜单，模式窗口和滑块加载照片。 滑块允许用户在给定的平原上拖动滑块来设置值，而不是无聊的乏味文本框。 我创建了一个非常简单的3滑块系统，该系统允许用户仅使用滑块即可修改图像的高度，宽度和不透明度！ 外观如下：

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

#opacity-area, #width-area, #height-area		{ background:url(horizontal.jpg) 0 8px no-repeat; height:23px; width:500px; margin:0 0 5px 0; }
#opacity-slider, #width-slider, #height-slider	{ background:url(button-horizontal.jpg) no-repeat; width:33px; height:23px; cursor:pointer; }

There's very little CSS involved. I've used the following two JPG's as background images for the sliders:

涉及CSS很少。 我将以下两个JPG用作滑块的背景图像：

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

<img src="muse.jpg" id="muse" />

<div id="opacity-area">
	<div id="opacity-slider"></div>
</div>
<div>
	<strong>Opacity:</strong> <span id="opacity-label"></span>%
</div>
<br /><br />

<div id="width-area">
	<div id="width-slider"></div>
</div>
<div>
	<strong>Width:</strong> <span id="width-label"></span> pixels
</div>
<br /><br />

<div id="height-area">
	<div id="height-slider"></div>
</div>
<div>
	<strong>Height:</strong> <span id="height-label"></span> pixels
</div>
<br /><br />
<p><i>The muse, as always, is Christina Ricci.</i></p>

Again, very little XHTML code is involved. Basically just containers for the pieces of the sliders.

同样，很少涉及XHTML代码。 基本上只是滑块的容器。

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

window.addEvent('domready', function () {
	/* opacity slider */
	var mySlide = new Slider($('opacity-area'), $('opacity-slider'), {
		steps: 100,
		wheel: 1,
		onChange: function(step){
			$('opacity-label').set('html',step);
			$('muse').set('opacity',step / 100);
		}
	}).set(100);
	
	/* height slider */
	var mySlide = new Slider($('height-area'), $('height-slider'), {
		steps: 300,
		wheel: 1,
		onChange: function(step){
			$('height-label').set('html',step);
			$('muse').set('height',step);
		}
	}).set(300);
	
	/* width slider */
	var mySlide = new Slider($('width-area'), $('width-slider'), {
		steps: 300,
		wheel: 1,
		onChange: function(step){
			$('width-label').set('html',step);
			$('muse').set('width',step);
		}
	}).set(300);
});

This code is very repetitive, which in turn makes it very easy. We create a new Slider instance for each slider we want on the page, providing the class the respective "area" and "slider" elements. We'll also pass the class steps (height value -- low value defaults to 0), a "wheel" value that allows value modification using the mouse wheel, and a change event function that changes the visible value label and adjusts the image's width or height or opacity level. Lastly, we use the "set()" function to set the default value of the slider.

该代码非常重复，这反过来又使它变得非常容易。 我们为页面上需要的每个滑块创建一个新的Slider实例，为该类提供相应的“ area”和“ slider”元素。 我们还将传递类步骤(高度值-低值默认为0)，允许使用鼠标滚轮修改值的“滚轮”值以及更改可见值标签并调整图像宽度的更改事件功能。或高度或不透明度级别。 最后，我们使用“ set()”函数设置滑块的默认值。

那就是所有的人！ (That's All Folks!)

There are many uses for sliders and I could take this example further to make it truly usable. I could, for example, take in the settings of each slider and generate a new image for the user to download. How you use it, however, is up to you.

滑块有许多用途，我可以进一步讲解这个例子，使其真正可用。 例如，我可以接受每个滑块的设置并生成一个新图像供用户下载。 但是，如何使用它取决于您。

View Demo 观看演示

翻译自: https://davidwalsh.name/facebook-sliders-mootools

mootools