jquery.slidinglables.js -----> template/lib/jquery/plugin/slidinglables.js
formular.css -----> template/inc_css/specific/jquery/formular.css
\\
/*
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
\\
/*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:
{{:deutsch:phpwcms-system:artikel:contentparts:formular:vorlage:form1.png|}}\\
\\
=== Step 3 ===
Nun das eigene Template im Block Vorlage einfügen:
{{:deutsch:phpwcms-system:artikel:contentparts:formular:vorlage:form2.png|}}\\
\\
\\
=== 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.
{{:deutsch:phpwcms-system:artikel:contentparts:formular:vorlage:form3.png|}}\\
\\
\\
Tja... das wars dann auch schon und das ganze sollte wie auf der oben gezeigten Beispielseite funktionieren.