Differences

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

--- deutsch:phpwcms-system:artikel:contentparts:formular:vorlage:css-div-02 [2011/10/03 15:33]
Uwe Tholey
+++ deutsch:phpwcms-system:artikel:contentparts:formular:vorlage:css-div-02 [2018/06/03 18:08] (current)
@@ Line 1: / Line 1: @@
 {{indexmenu_n>120}}
-====== 02) CSS und DIV  ======
+====== 02) CSS und DIV (jQuery) ======
-=== CSS Template (Vorlage) mit Einbindung von JQuery sliding lables für den CP Formular ===
+=== CSS Template (Vorlage) mit Einbindung von jQuery sliding lables für den CP Formular ===
-Forum: [[http://forum.phpwcms.org/viewtopic.php?f=28&p=132584#p132584]]\\
-Beispiel: [[http://playground.uwe367.de/index.php?kontakt]]\\
-Autor: Uwe367\\
-\\
-<note important>Das Formular funktioniert nur wenn Javascript im Browser eingeschaltet ist!!!</note>\\
 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.\\
+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:\\
+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>
+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>
     /*
@@ Line 128: / Line 138: @@
     })(jQuery); // End jQuery
 </code>\\
 <code css |h formular.css |h>
     /*form legend {
@@ Line 192: / Line 204: @@
     }
 </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:\\
+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:\\
+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>
@@ Line 214: / Line 235: @@
     {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.\\
+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/formular.css -->
+    <!-- CSS: {TEMPLATE}/inc_css/specific/jquery/formular.css -->
@@ Line 243: / Line 268: @@
     </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.1317648788.txt.gz · Last modified: 2018/06/03 18:07 (external edit)

Show page Old revisions