JQuery sliding lables für CP Formular

[Uwe367]

Habe vor einiger Zeit mal ein bischen mit jquery sliding lables für den CP Formular gespielt und finde den Effekt ganz nett.
Interesse?

Beispiel ist hier zu finden: http://playground.uwe367.de/index.php?kontakt

Gruß Uwe

[G-Punkt]

Schaut wirklich sehr interessant aus... und ja, ich haben will

[Uwe367]

Moin moin zusammen....

Nun denn... hier eine kleine Anleitung wie ich sliding lables in phpwcms eingebaut habe.
Das Original ist unter http://www.csskarma.com/blog/sliding-labels-plugin/ zu finden. Gut zu wissen denn hin und wieder erscheint dort eine überarbeitete Version des Plugins.
Ich beschreibe hier die Vorgehensweise wie ich das Formular auf der Beispielseite erstellt habe. Die Vorlage (Template) müßt ihr später euren eigenen Bedürfnissen bzw. den vorher definierten Formularfeldern anpassen. Ich habe das Formular in einer eigenen Seitenstrukturebene (Kontakt) untergebracht.


Step 1
Zunächst sollten die erfoderlichen Dateien (JS & CSS) in die entsprechenden Verzeichnisse kopiert werden. In meinem Fall sieht das so aus:

Code: Select all

jquery.slidinglables.js -----> template/lib/jquery/plugin/slidinglables.js
formular.css -----> template/inc_css/specific/jquery/formular.css

jquery.slidinglables.js:

Code: Select all

/*
	Sliding Labels 3.2.1
	
	This is the official plugin version of Sliding Labels.
	It is open source code by Tim Wright of CSSKarma.com
	Use as you see fit, I'd like it if you kept this in 
	the code, but basically share it and don't be a jerk.
	
	Support:
	http://www.csskarma.com/blog/sliding-labels-plugin
	
	Version: 2 - added textarea functionality
	Version: 3 - added axis parameter
	           - added speed parameter
	           - removed color parameter, as it should be define in the CSS
	           - added position:relative to wrapping element
	           - coverted to jQuery plugin
	Version: 3.1 - changed "children" to "find" so it works a little better with UL & fieldsets
	Version: 3.2 - Added a "className" option so you don't have to use ".slider" as the wrapper
	Version: 3.2.1 - general clean up
*/

(function($){  
$.fn.slidinglabels = function(options, callback) { 
	var defaults = {
		className    : 'form-slider',
		topPosition  : '5px',
		leftPosition : '5px',
		axis         : 'x',
		speed        : 'fast'
	},
	options = $.extend(defaults, options),
		itemwrapper = this.find('.' + defaults.className + ''),
		labels = itemwrapper.find('label');
	
	return labels.each(function() {
		obj = $(this);
		
		var parent = obj.parents('.' + defaults.className + '');
		parent.css({'position':'relative'})
		
		// style the label with JS for progressive enhancement
		obj.css({
			'position' : 'absolute',
			'top'      : defaults.topPosition,
			'left'     : defaults.leftPosition,
			'display'  : 'inline',
			'z-index'  : 99
		});
		
		var inputval = $(this).next().val(),
			labelwidth = $(this).width(),
			labelmove = labelwidth + 5 +'px',
			labelheight = $(this).height();
		
		//onload, check if a field is filled out, if so, move the label out of the way
		if(inputval !== ''){
			if(defaults.axis == 'x'){
				obj.stop().animate({ 'left':'-'+labelmove }, 1);
			} else if(defaults.axis == 'y') {
				obj.stop().animate({ 'top':'-'+labelheight }, 1);
			}			
		} // 	
		
		// if the input is empty on focus move the label to the left
		// if it's empty on blur, move it back
		$('input, textarea').focus(function(){
			var label = $(this).prev('label'),
				width = label.width(),
				height = label.height(),
				adjust = width + 5 + 'px',
				adjustUp = height + 'px',
				value = $(this).val();
			
			if(value == ''){
				if(defaults.axis == 'x'){
					label.stop().animate({ 'left':'-'+adjust }, defaults.speed);
					
				} else if(defaults.axis == 'y') {
					label.stop().animate({ 'top':'-'+adjustUp }, defaults.speed);
				}
			} else {
				if(defaults.axis == 'x'){
					label.css({ 'left':'-'+adjust });
				} else if(defaults.axis == 'y') {
					label.css({ 'top':'-'+adjustUp });
				}
			}
			
			}).blur(function(){
				var label = $(this).prev('label'),
					value = $(this).val();
				
				if(value == ''){					
					if(defaults.axis == 'x'){
						label.stop().animate({ 'left': defaults.leftPosition }, defaults.speed);
					} else if(defaults.axis == 'y') {
						label.stop().animate({ 'top': defaults.topPosition }, defaults.speed);
					}					
				}
			});

		});
 
	}; // End function
})(jQuery); // End jQuery

formular.css:

Code: Select all

/*form legend {
	color: #333;
	padding: 0 0 20px 0;

}

form {
	padding: 0 20px 20px 20px;
}*/

form, form fieldset input, form fieldset textarea, form label {
	font-family: Helvetica, Arial;
	font-size: 12pt;
	
}
form p { position: relative; margin: 5px 0;}
form p label { position: absolute; top: 0; left: 0;}
form p br {display: none;}


form fieldset p input,
form fieldset p textarea {
	background-color: #fff;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius: 5px;
    border :1px solid #333;
	display: block;
	padding: 4px;
	width: 441px;
	margin: 0;
}



form fieldset p label {
	color: #333;
}

fieldset {
	border: none;
}

.fehler {
	color: #F00;
	margin-top: 5px;
}

input[type="submit"]       { cursor:pointer;border:1px solid #999;padding:5px;-moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background:#eee; }
input[type="submit"]:hover,
input[type="submit"]:focus { border-color:#333;background:#ddd; }
input[type="submit"]:active{ margin-top:0px; }

input[type="reset"]       { cursor:pointer;border:1px solid #999;padding:5px;-moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background:#eee; }
input[type="reset"]:hover,
input[type="reset"]:focus { border-color:#333;background:#ddd; }
input[type="reset"]:active{ margin-top:0px; }
	
	
input[type="text"] {
	border:1px solid #333;padding:5px;-moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background-color: #fff;
}

Step 2
Nun einen CP Formular anlegen und die Formularfelder definieren. Außerdem muß hier der Schalter Custom {FIELD} aktiviert werden damit das System auf die eigene Vorlage zugreift.
In meinem Fall sieht das so aus:


Step 3
Nun das eigene Template im Block Vorlage einfügen:


Der Code für das Template:

Code: Select all

<br /><div id="contact-form" style="margin: 0 0 0 40px; width: 461px;"><fieldset>
<p class="slider"><label for="Name">{LABEL:Name}</label>{Name}[IF_ERROR:Name]<span class="fehler">{ERROR:Name}</span>[/IF_ERROR]</p>
<p class="slider"><label for="Vorname">{LABEL:Vorname}</label>{Vorname}[IF_ERROR:Vorname]<span class="fehler">{ERROR:Vorname}</span>[/IF_ERROR]</p>
<p class="slider"><label for="Strasse">{LABEL:Strasse}</label>{Strasse}[IF_ERROR:Strasse]<span class="fehler">{ERROR:Strasse}</span>[/IF_ERROR]</p>
<p class="slider"><label for="Plz">{LABEL:Plz}</label>{Plz}[IF_ERROR:Plz]<span class="fehler">{ERROR:Plz}</span>[/IF_ERROR]</p>
<p class="slider"><label for="Telefon">{LABEL:Telefon}</label>{Telefon}[IF_ERROR:Telefon]<span class="fehler">{ERROR:Telefon}</span>[/IF_ERROR]</p>
<p class="slider"><label for="E-Mail">{LABEL:E-Mail}</label>{E-Mail}[IF_ERROR:E-Mail]<span class="fehler">{ERROR:E-Mail}</span>[/IF_ERROR]</p>
<p class="slider"><label for="nachricht">{LABEL:nachricht}</label>{nachricht}[IF_ERROR:nachricht]<span class="fehler">{ERROR:nachricht}</span>[/IF_ERROR]</p>
<p>{LABEL:recaptcha_response_field}{recaptcha_response_field}[IF_ERROR:recaptcha_response_field]<span class="fehler">{ERROR:recaptcha_response_field}</span>[/IF_ERROR]</p><br />
<div>{checkbox}&nbsp;&nbsp;{LABEL:checkbox}
[IF_ERROR:checkbox]<span class="fehler"><br />{ERROR:checkbox}</span>[/IF_ERROR]</div><br />
{submitIt}&nbsp;&nbsp;{resetIt}</fieldset></div>

Step 4
Damit wäre das Fromular selbst fertig, jedoch benötigt man nun noch einen JS Code um das Template anzusprechen. Diesen habe ich in einem separaten CP HTML innerhalb des Artikles untergebracht. In diesem JS Code gibts verschiedene Einstellungsmöglichkeiten, z.B. Geschwindigkeit und Richtung.



Code für den CP HTML:

Code: Select all

<!-- JS: {TEMPLATE}lib/jquery/plugin/jquery.slidinglabels.js -->

<!-- CSS: {TEMPLATE}/inc_css/specific/jquery/formular.css -->



<script type="text/javascript">
$(function(){

	$('#contact-form').slidinglabels({

		/* these are all optional */
        className    : 'slider', // the class you're wrapping the label & input with -> default = slider
		topPosition  : '5px',  // how far down you want each label to start
		leftPosition : '10px',  // how far left you want each label to start
		axis         : 'x',    // can take 'x' or 'y' for slide direction
		speed        : '600'  // can take 'fast', 'slow', or a numeric value

	});

});
</script>

Tja... das wars dann auch schon und das ganze sollte wie auf der gezeigten Beispielseite funktionieren.

Viele Grüße
Uwe

[G-Punkt]

Herzlichen Dank für Deine Arbeit.
Funktioniert perfekt!

[Uwe367]

Nix zu danken.

Das ganze funktioniert auch mit Infieldlables wie z.B. hier:
http://fuelyourcoding.com/scripts/infield/