mootools_使用MooTools滑动标签

mootools

A week back I saw a great effect created by CSSKarma: input labels being animated horizontally. The idea is everything positive: elegant, practical, unobtrusive, and requires very little jQuery code. Luckily the effect doesn't require much MooTools code either!

一周前，我看到CSSKarma产生了很大的效果： 输入标签被水平动画化 。 这个想法对所有事情都是积极的：优雅，实用，低调，并且只需要很少的jQuery代码。 幸运的是，效果也不需要太多MooTools代码！

View Demo 观看演示

HTML (The HTML)

<form action="" method="post" id="info">
	<h2>Contact Information</h2>
    <div id="name-wrap" class="slider">
        <label for="name">Name</label>
        <input type="text" id="name" name="name">

    </div><!--/#name-wrap-->

    <div id="email-wrap"  class="slider">
        <label for="email">Email</label>
        <input type="text" id="email" name="email" />
    </div><!--/#email-wrap-->

    <div id="street-wrap"  class="slider">
        <label for="st">Street</label>

        <input type="text" id="st" name="st" />
    </div><!--/#street-wrap-->

    <div id="city-wrap"  class="slider">
        <label for="city">City & State</label>
        <input type="text" id="city" name="city" />
    </div><!--/#city-wrap-->

    <div id="zip-wrap"  class="slider">

        <label for="zip">Zip code</label>
        <input type="text" id="zip" name="zip" />
    </div><!--/#zip-wrap-->

    <input type="submit" id="btn" name="btn" value="submit" />
</form>

A simple form with DIVs wrapping labels and inputs. This probably looks like many of your forms.

DIV包裹标签和输入的简单表格。 这可能看起来像您的许多表格。

CSS (The CSS)

div.slider  { clear:both; position:relative; margin:0 0 10px; }
label  { cursor:pointer; display:block; }

The most important CSS snippet is the ensuring the spacing and position value for the slider DIV.

最重要CSS代码段是确保滑块DIV的间距和位置值。

MooTools JavaScript (The MooTools JavaScript)

//when the dom is ready...
window.addEvent('domready',function() {
	//a few settings
	var labelColor = '#999', restingPosition = 5;
	//for every form field
	$$('form#info .slider label').each(function(label){
		//set the label enhancements into place
		label.setStyles({
			color: labelColor,
			position: 'absolute',
			top: 6,
			left: restingPosition,
			display: 'inline',
			'z-index': 99
		});
		//get input value
		var input = label.getNext('input');
		//grab label width, add resting position value
		var width = label.getSize().x;
		var move = width + restingPosition;
		//onload, check if a field is filled out, if so, move the label out of the way
		if(input.get('value') !== '') {
			label.tween('left',0 - move);
		}
		// if the input is empty on focus move the label to the left
		// if it's empty on blur, move it back
		input.addEvents({
			focus: function() {
				if(input.get('value') == '') {
					label.tween('left',0 - move);
				}
				else {
					label.setStyle('left',0 - move);
				}
			},
			blur: function() {
				if(input.get('value') == ''){
					label.tween('left',restingPosition);
				}
			}
		});
	});
});

We start by grabbing all of the labels, absolute-izing their position, and grabbing each label's respective INPUT element. We calculate the width of the label, put together the moving width, and then add INPUT event listeners into place. That's it!

我们首先抓取所有标签，对其位置进行绝对化，然后抓取每个标签各自的INPUT元素。 我们计算标签的宽度，将移动宽度放在一起，然后将INPUT事件侦听器添加到位。 而已！

View Demo 观看演示

All credit goes to CSSKarma for the awesome idea. I don't recommend this effect for long forms -- the effect will probably become annoying quickly. Short forms are perfect candidates for this effect because the effect limited in use.

绝妙的主意归功于CSSKarma。 我不建议长时间使用这种效果-这种效果可能很快就会变得令人讨厌。 简短形式是此效果的理想选择，因为该效果的使用受到限制。

翻译自: https://davidwalsh.name/sliding-labels-mootools

mootools