Differences

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

--- deutsch:phpwcms-system:artikel:contentparts:formular:vorlage:css-div-02 [2009/04/25 08:06]
127.0.0.1 external edit
+++ deutsch:phpwcms-system:artikel:contentparts:formular:vorlage:css-div-02 [2018/06/03 18:08] (current)
@@ Line 1: / Line 1: @@
-{{indexmenu_n>20}}
+{{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.1240639596.txt.gz · Last modified: 2018/06/03 18:07 (external edit)

Show page Old revisions