[[02) CSS und DIV (jQuery)]]
You are here: Willkommen im phpwcms-HowTo:wiki » Benutzerhandbuch (DE) » phpwcms System » ARTIKEL » ContentParts » Formular » Vorlagen » 02) CSS und DIV (jQuery)
Show pageOld revisions
Recent changesIndex

NAVIGATION

Imprint / Impressum

Please Donate!

With your donation you accelerate more enhancements of the wiki.

Differences

This shows you the differences between two versions of the page.

deutsch:phpwcms-system:artikel:contentparts:formular:vorlage:css-div-02 [2010/03/23 11:14]
Knut Heermann (flip-flop) 		deutsch:phpwcms-system:artikel:contentparts:formular:vorlage:css-div-02 [2018/06/03 18:08] (current)
Line 1: Line 1:
{{indexmenu_n>120}} {{indexmenu_n>120}}
-====== 02) CSS und DIV ======+====== 02) CSS und DIV (jQuery) ======
   
-FIXME leer für das nächste Layout+=== CSS Template (Vorlage) mit Einbindung von jQuery sliding lables für den CP Formular === 
 + 
 +Hier eine kleine Anleitung wie ich JQuery 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.\\ 
 +\\ 
 +<note important>Das Formular funktioniert nur wenn Javascript im Browser eingeschaltet ist!!!</note>\\ 
 + 
 +---- 
 +\\ 
 +Forum: [[http://forum.phpwcms.org/viewtopic.php?f=28&p=132584#p132584]]\\ 
 +Beispiel: [[http://playground.uwe367.de/index.php?kontakt]]\\ 
 + 
 +Autor: Uwe367  //(03.10.2011)//\\ 
 +---- 
 +\\ 
 + 
 +=== Step 1 === 
 +Zunächst sollten die erfoderlichen Dateien (JS & CSS) in die entsprechenden Verzeichnisse kopiert werden. In meinem Fall sieht das so aus: 
 + 
 +<code> 
 +jquery.slidinglables.js -----> template/lib/jquery/plugin/slidinglables.js 
 +formular.css -----> template/inc_css/specific/jquery/formular.css 
 +</code>\\ 
 + 
 +<code javascript |h jquery.slidinglables.js |h> 
 +    /* 
 +       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 
 +</code>\\ 
 + 
 + 
 +<code css |h formular.css |h> 
 +    /*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; 
 +    } 
 +</code>\\ 
 + 
 + 
 +=== 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|}}\\ 
 +\\ 
 + 
 +<code |h Code für das Template im Block Vorlage |h> 
 +    <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> 
 +</code>\\ 
 + 
 +=== 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|}}\\ 
 +\\ 
 +<code html |h Code für den CP HTML |h> 
 +    <!-- 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> 
 +</code>\\ 
 + 
 +Tja... das wars dann auch schon und das ganze sollte wie auf der oben gezeigten Beispielseite funktionieren. 
 + 
 + 
deutsch/phpwcms-system/artikel/contentparts/formular/vorlage/css-div-02.1269339267.txt.gz · Last modified: 2018/06/03 18:07 (external edit)
Show pageOld revisions
Back to top
www.planmatrix.de www.chimeric.de Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0