/*
* Title: jQuery Super Labels Plugin - Give your forms a helping of awesome!
* Author: Rﾃｩmy Bach
* Version: 1.0
* License: http://remybach.mit-license.org
* Url: http://github.com/remybach/jQuery.superLabels
* Description:
* This plugin allows you to display your form labels on top of your form fields, saving you space on your page.
*/
(function($) {
var defaults = {
baseZindex:0, // The base z-index which we display on top of.
debug:false,
duration:500, // Time of the slide in milliseconds.
easingIn:($.easing.def ? 'easeInOutCubic' : false), // The easing in function to use for the slide.
easingOut:($.easing.def ? 'easeInOutCubic' : false), // The easing out function to use for the slide.
fadeDuration:250, // Duration of animation when it's fade only.
labelLeft:0, // The distance from the left for the label.
labelTop:0, // The distance from the top for the label.
opacity:0.5, // The opacity to fade the label to.
slide:true, // Whether or not to slide the label across the input field.
wrapSelector:false // The selector for the element you have wrapping each field.
};
var acceptedInputTypes = ['text', 'search', 'url', 'tel', 'email', 'password'];
var acceptedElements = ['input', 'textarea', 'select'];
$.fn.superLabels = function(options) {
// If this has been run on an empty set of elements, pop out.
if (this.length === 0) return false;
// If options were passed in, merge them with the defaults.
$.extend(defaults, options || {});
if (!$.easing.def) { _info('Easing plugin not found - using standard jQuery animations.'); }
var _fields = this;
// Check for whether the user has just passed in the form. If so, we need to fetch all the accepted fields, etc..
if (this.length === 1 && this[0].tagName.match(/form/i)) {
_fields = $(acceptedElements.join(','), this);
}
// Do our magic on each form field.
return _fields.each(function() {
var _field = $(this);
// Don't even bother going further if this isn't one of the accepted input field types or elements.
if ((_field[0].tagName.toLowerCase() === 'input' && $.inArray(_field.attr('type'), acceptedInputTypes)) === -1 && $.inArray(_field[0].tagName.toLowerCase(), acceptedElements) !== -1) {
_info('Doh! The following '+this.tagName.toLowerCase()+', is not supported.', this);
return true; // Equivalent to continue in a normal for loop.
}
var _label = _getLabel(this);
var _placeholder = _field.attr('placeholder');
// Check for the placeholder attribute first.
if (_placeholder) {
var _placeholderLabel = $('<label for="'+(_field.attr('id') || _field.attr('name'))+'">'+_placeholder+'</label>');
// If there isn't a label for this field, create one, otherwise replace the existing one with the placeholder one.
if (_label.length === 0) {
_label = _placeholderLabel;
_field.prev(_label);
} else {
_label.replaceWith(_placeholderLabel);
}
_field.removeAttr('placeholder');
}
// Make sure this form field has a label
if (_label.length === 0) {
_info('Doh! The following '+this.tagName.toLowerCase()+' has no related label.', this);
return true;
}
// Position the labels above the form fields. Note:We do this here and not in the CSS for the purposes of progressive enhancement.
_prepLabel(_field, _label);
// Select boxes don't need to have any fancy label stuff done.
if (!this.tagName.match(/select/i)) {
// What happens when we enter the field
_field.focus(_focus);
// What happens when we leave the field.
_field.blur(_blur);
// Check for when the user is typing
_field.keyup(_keyup);
// Make sure the field gets focus when the label is clicked on (for those people who don't use the 'for' attribute and deserve a kick to the face).
_label.click(function() { _field.focus(); });
}
});
};
/*========== Private Functions ==========*/
// Get the label for a given field.
_getLabel = function(_field) {
var _label = $(_field).siblings('label');
if (_label.length === 0) {
// If a selector is present for the wrapping element, use that, otherwise, proceed to use more traditional methods.
if (defaults.wrapSelector) {
_label = $(_field).parents(defaults.wrapSelector).find('label');
} else {
_for = _field.id || _field.name;
_label = $('[for="'+_for+'"]');
}
}
return _label;
};
// Position the label.
_prepLabel = function(_field, _label) {
// Handle drop down list labels differently
if (_field[0].tagName.match(/select/i)) {
// Checking whether the field has a value doesn't work (the browser just seems to select the first <option>
// before the page has loaded), so I'm going to assume that if the form is prefilled or values are remembered
// between page loads, then the [selected attribute will be used.
var _selected = _field.find('[selected]').length === 0 ? ' selected' : '';
_field.prepend('<option value="" disabled'+_selected+' rel="label">'+_label.html()+'</option>');
_label.css('display','none');
} else {
// If the field already has a value, then hide the label.
if (!_noVal(_field)) _label.hide();
_field.css({ zIndex:defaults.baseZindex+1 }).addClass('sl_field');
_label.css({
left:defaults.labelLeft,
position:'absolute',
top:defaults.labelTop,
zIndex:defaults.baseZindex+2
}).addClass('sl_label');
}
};
// The focus and blur functions
_focus = function() {
if (_noVal(this)) {
var _duration = defaults.duration;
var _label = _getLabel(this);
var _to ={ opacity:0 };
if (defaults.slide) {
_to.left = $(this).width()-_label.width();
_to.opacity = defaults.opacity;
} else {
_duration = defaults.fadeDuration;
}
_label.animate(_to, _duration, defaults.easingOut);
}
};
_blur = function() {
if (_noVal(this) ) {
var _duration = defaults.duration;
var _to ={ opacity:1 };
if (defaults.slide) {
_to.left = defaults.labelLeft;
} else {
_duration = defaults.fadeDuration;
}
_getLabel(this).animate(_to, _duration, defaults.easingOut);
}
};
_keyup = function() {
var _label = _getLabel(this);
var _o = 0;
// Let's check whether there's even a need to animate anything first.
if ((_noVal(this) && _label.css('opacity') > 0) || (!_noVal(this) && _label.css('opacity') == 0 )) {
return false;
}
// If the field is empty and the label isn't showing, make it show up again.
if (_noVal(this) && !_label.css('opacity') == 0) {
_o = defaults.opacity;
}
_label.animate({ opacity:_o }, defaults.fadeDuration, defaults.easingOut);
};
/*===== Utility Functions =====*/
// Tell us whether the form field has a value.
_noVal = function(_el) { return $(_el).val() === ''; };
// Console Functions (We need these to make sure this only displays when the console exists.)
_log = function() { if (defaults.debug && console && console.log) console.log.apply(console, arguments); };
_info = function() { if (defaults.debug && console && console.info) console.info.apply(console, arguments); };
_error = function() { if (defaults.debug && console && console.error) console.error.apply(console, arguments); };
})(jQuery);
$('form').superLabels({
opacity:0.2,
easingOut:'easeInBack',
labelLeft:10,
labelTop:7
});
body { font-family:Helvetica,Arial,Sans-serif; font-size:14px; }
#wrapper { margin:50px; }
form ul li { position:relative; width:410px; }
form input, form textarea { width:300px; display:inline-block;margin:0 0 15px 0;padding:5px;}
form select { width:408px; }
/********** Tooltip Styling **********/
.sl_tt {
background:#FFF;
border:1px solid #777;
padding:5px 5px 5px 10px;
position:absolute;
text-shadow:0 -1px 0 rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.8);
width:290px;
/* background-gradient */
background: -moz-linear-gradient(100% 100% 90deg, #EEE, #FFF);
background: -webkit-gradient(linear, left top, right top, from(#EEE), to(#FFF));
/* border-radius */
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
/* box-shadow */
-moz-box-shadow:0 0 3px #777;
-webkit-box-shadow:0 0 3px #777;
box-shadow:0 0 3px #777;
}
.sl_tt dd { font-size:12px; font-style:italic; margin-top:5px; }
/* Tooltip at the bottom */
.sl_tt_bottom { left:0; }
.sl_tt_bottom:before {
border:8px solid;
border-color:transparent transparent #777 transparent;
content:' ';
height:0;
left:2px;
position:absolute;
top:-16px;
width:0;
}
.sl_tt_bottom:after {
border:7px solid;
border-color:transparent transparent #FFF transparent;
content:' ';
height:0;
left:3px;
position:absolute;
top:-14px;
width:0;
}
/* Tooltip on the left */
.sl_tt_left { text-align:right; top:0; }
.sl_tt_left:before {
border:8px solid;
border-color:transparent transparent transparent #777;
content:' ';
height:0;
right:-16px;
position:absolute;
top:2px;
width:0;
}
.sl_tt_left:after {
border:7px solid;
border-color:transparent transparent transparent #FFF;
content:' ';
height:0;
right:-14px;
position:absolute;
top:3px;
width:0;
}
/* Tooltip on the right */
.sl_tt_right { top:0; }
.sl_tt_right:before {
border:8px solid;
border-color:transparent #777 transparent transparent;
content:' ';
height:0;
left:-16px;
position:absolute;
top:2px;
width:0;
}
.sl_tt_right:after {
border:7px solid;
border-color:transparent #FFF transparent transparent;
content:' ';
height:0;
left:-14px;
position:absolute;
top:3px;
width:0;
}
/* Tooltip at the top */
.sl_tt_top { left:0; }
.sl_tt_top:before {
border:8px solid;
border-color:#777 transparent transparent transparent;
bottom:-16px;
content:' ';
height:0;
left:2px;
position:absolute;
width:0;
}
.sl_tt_top:after {
border:7px solid;
border-color:#FFF transparent transparent transparent;
bottom:-14px;
content:' ';
height:0;
left:3px;
position:absolute;
width:0;
}
<div id="wrapper" class="container_16">
<form action="" class="grid_4 push_4">
<ul>
<li>
<label for="text-input">お名前</label>
<input type="text" name="text-input" value="" />
</li>
<li>
<label for="mail-input">[email protected]</label>
<input type="email" name="mail-input" value="" />
</li>
<li>
<label for="ps-input">パスワード</label>
<input type="password" name="ps-input" value="" />
</li>
<li>
<label for="textarea">メッセージ</label>
<textarea rows="2" cols="20" name="textarea"></textarea>
</li>
</ul>
</form>
</div>