1. Schritt - Box mit Kopf und Bauch

<div class="box">
  <div class="boxheader">
     <strong>Dies ist die Box-Überschrift</strong>
  </div>
   <div class="boxcontent">
     <div class="spacer10">
       <p class="bboxtxt">Dies ist Text in der Box.</p>
     </div>
   </div>
</div>
 
 

2. Schritt - Gefärbter Text

Der Text im Box-Content soll nun eine bestimmte Schriftfarbe bekommen.
Erstelle eine Style-Anweisung, die den Text einfärbt.

<div class="box">
  <div class="boxheader">
     <strong>Dies ist die Box-Überschrift</strong>
  </div>
   <div class="boxcontent">
     <div class="spacer10">
       <p class="bboxtxt">Dies ist Text in der Box.</p>
     </div>
   </div>
</div>
<style type=text/css> 
  .bboxtxt {
    color:#ff00ff;
  }
</style>
 

3. Schritt - Texte und Farbe variabel machen

Nun soll unsere Box einstellbar gemacht werden.
Dafür legen wir zunächst drei Variablen an:

eine Variable für den Header-Text - der soll einzeilig sein
eine Variable für den Box-Content - der soll mehrzeilig sein
eine Variable für die Textfarbe

(Auf eine detaillierte Variablenplanung wollten wir in diesem Seminar bewusst verzichten. Das kann jeder gern selbst mithilfe des Textbausteins , zu finden in der Bausteinbox in der Iconbar, tun.)

Weiterhin soll der Text in der Box ausschaltbar sein. Dafür nutzen wir unsere Variable vom Typ boolean.
(Diese Anforderungen erscheinen sicherlich noch ziemlich sinnfrei. Es geht in diesem Seminar jedoch lediglich um das prinzipielle Verständnis und die Festigung des bereits Gelernten.)

Und schließlich soll auch die Schriftfarbe abschaltbar gemacht werden. (Später in einem komplexen Plugin werden wir ganze Variablen-Gruppen ein- und ausschalten.)

<div class="box">
  <div class="boxheader">
     <strong>{{plugin_bil10_config_kopftxt}}</strong>
  </div>
   <div class="boxcontent">
     <div class="spacer10">
{{plugin_bil10_config_txtschalt==true.start}}
       <p class="bboxtxt">{{plugin_bil10_config_bauchtxt}}</p>
{{plugin_bil10_config_txtschalt==true.end}}
     </div>
   </div>
</div>
 
{{plugin_bil10_config_txtfarbschalter==true.start}}
<style type=text/css> 
  .bboxtxt {
    color:{{plugin_bil10_config_txtcolor}};
  }
</style>
{{plugin_bil10_config_txtfarbschalter==true.end}}
 
 

4. Schritt - Versteckt euch!

Nun wird es spannend. Zwei Variablen sollen die Eigenschaft hidden bekommen.
Der Text in der Box (es könnte ja auch eine ganze html-Seite sein) und die Schriftfarbe (auch hier stellen wir uns vor, dass wir später sehr viele solcher gestaltenden Variablen haben).
Das ist schnell gemacht. Wähle in der Pluginentwicklung in der Liste der Variablen die aus, die geändert werden sollen und klicke auf das Stift-Symbol.
Nun kannst du den Haken bei hidden setzen und speichern.

zu04a.PNG - Bild entfernt (keine Rechte) zu04b.PNG - Bild entfernt (keine Rechte)

Bitte zuerst die Schriftfarbe auf hidden setzen. Ergebnis müsste die Standardtextfarbe sein, egal was in der Einstellmaske ausgewählt ist und obwohl der Schalter für Textfarbe auf ja steht.

Bei der Text-Variablen müsste der Text verschwinden, obwahl der Textschalter auf Ja steht.

Wenn das alles so funktioniert, versuchen wir den letzten Schritten, Text und Farbe wieder hervorzulocken.

5. Schritt - Text, zeig dich!

Schalter auf JA gestellt und der Text erscheint in der Box ...
Schön wärs. Aber wir haben die Textvariable ja versteckt ...
Wir wissen, dass wir diese Variable mit einem Java-Srcipt-Befehl wieder hervorzaubern können.

Zunächst lagern wir den Bereich mit der Variablen in unserem Code aus.
Die Template-Textvariable entfernen wir. Dafür setzen wir in den p-Tag eine neue ID ein - einen Platzhalter für den Text.
Wir nennen ihn: ersetze.

Statt: <p class="bboxtxt">{{plugin_bil10_config_bauchtxt}}</p>

Schreiben wir: <p class="bboxtxt" id="ersetze"></p>

Dafür schreiben wir nun unterhalb unseres Codes ein kleines Script mithilfe der js-Variablen für unseren Text:

<script>
  xobor.plugin('bil10').getConf('bauchtxt', function(bboxtxt){fvar1 = bboxtxt; $("#ersetze").html(fvar1);});
</script>
 

[info]Die Textvariable bauchtxt sieht in TPL-Schreibweise (Template.Variable) so aus: {{plugin_bil10_config_bauchtxt}}
Setze ich sie als js-Variable ein, so: xobor.plugin('bil10').getConf('bauchtxt')[/info]

Nun stelle ich mich vor die letzte Klammer und schreibe eine Funktion, die meinen Platzhalter für den Text anspricht:
function(bboxtxt){fvar1 = bboxtxt; $("#ersetze").html(fvar1);})

Wie genau diese Funktionen aufgebaut ist ist und was die einzelnen Bestanteile tun, erklären wir in diesem Beitrag: http://friends-of.xobor.de/t337f11-hidden-Variablen.html.

Als letzte Maßnahme verlagern wir nun auch den Textschalter nach unten. Wir rahmen nun nicht mehr das p-Element ein, sondern das Script, was ja nun die Aufgabe, Text darzustellen, übernommen hat.

Im Code sieht das nun so aus:

<div class="box">
   <div class="boxheader">
     <strong>{{plugin_bil10_config_kopftxt}}</strong>
  </div>
   <div class="boxcontent">
     <div class="spacer10">
<!--{{plugin_bil10_config_txtschalt==true.start}}-->
       <p class="bboxtxt" id="ersetze"></p>
<!--{{plugin_bil10_config_txtschalt==true.end}}-->
     </div>
   </div>
</div>
...
{{plugin_bil10_config_txtschalt==true.start}}
<script>
  xobor.plugin('bil10').getConf('bauchtxt', function(bboxtxt){fvar1 = bboxtxt; $("#ersetze").html(fvar1);});
</script>
{{plugin_bil10_config_txtschalt==true.end}}
 

Ergebnis:

Steht der Schalter in der Einstellmaske auf Ja, wird der Text, der in das entsprechende Feld in der Einstellmaske eingegeben wurde, in der Box.
Steht der Schalter auf Nein, wird der Text nicht angezeigt.

Was ist der Unterschied zur Variante ohne hidden?

Optisch nehmen wir keinen Unterschied wahr. Wir wissen aber, dass im ersten Fall der Inhalt der Variablen auch geladen wird, wenn der Text nicht angezeigt wird.

Entwickle nun eine zweite Textvariable mit der Option hidden, um den Header-Text der Box auszublenden.

6. Farbe erscheine

Analog zu dem Umgang mit dem Inhalt der Textvariablen, wollen wir nun die Farbvariable auslesen, wenn der "Farb-Schalter" auf JA steht.

Wir hatten Hilfe von Ingmar, den wir dazu befragten:

Zitat

---

Konkrete Lösung für folgendes Problem:

Zitat von FoX im Beitrag RE: Frage zu 'hidden'So funktioniert es leider nicht:1 xobor.plugin('bil10').getConf('txtcolor',function(fun3){coloring = fun3; $("#txtplatzhalter").style.color(coloring);)});

Es daher theoretisch 2 Lösungen:

$("#txtplatzhalter").style.color(coloring); ist falsch, da style.color nur auf einem javascript-Element funktioniert.

Richtig wäre: $("#txtplatzhalter")[0].style.color = coloring;
Das ist das fast identisch mit document.getElementById('txtplatzhalter').style.color = coloring; (bis auf die Fehlerbehandlung falls das Element gar nicht existiert - siehe oben)

Einfacher geht es, wenn ihr direkt auf die Jquery Merthode "css" zurückgreift:
$("#txtplatzhalter").css('color':coloring);

---

Die spannende Aufgabe ist also:

Sprich eine hidden Farbvariable mit Hilfe von js bzw. jquery an, so dass sie zur Wirkung kommt, wenn der Schalter dafür auf Ja steht.

So haben wir es mit der ersten genannten Variante gelöst (die zweite konnte noch nicht positiv getestet werden):

Diesmal tauschen wir den Style-Bereich gegen ein js-Srcript aus.
6.1 Also können wir in unserem Code den Style-Bereich auskommentieren oder löschen, denn wir wolle die Farbvariable ja nicht als Template-Var nutzen sonder als js-Varbiable.
6.2 Dann erstellen wir wieder ein kleines Script für die Farbvariable z.B. txtcolor
6.3 die js-Funktion zum Ansprechen dieser Farbvariable lautet:

xobor.plugin('bil10').getConf('txtcolor', function(bboxtxt){fvar3 = bboxtxt; $("#ersetze")[0].style.color=fvar3;});

{{plugin_bil10_config_gr==true.start}}
<div class="box">
   <div class="boxheader">
     <strong class="headertxt" id="tausche"></strong>
  </div>
   <div class="boxcontent">
     <div class="spacer10">
       <p class="bboxtxt" id="ersetze"></p>
     </div>
   </div>
</div>
 
<!--<style type="text/css"> 
  .bbtxt {
    color:{{plugin_bil10_config_txtcolor}};
  }
</style>-->
 
{{plugin_bil10_config_txtschalt==true.start}}
<script>
  xobor.plugin('bil10').getConf('bauchtxt', function(bboxtxt){fvar1 = bboxtxt; $("#ersetze").html(fvar1);});
</script>
{{plugin_bil10_config_txtschalt==true.end}}
 
{{plugin_bil10_config_kopfschalt==true.start}}
<script>
 xobor.plugin('bil10').getConf('kopftxt', function(headertxt){fvar2 = headertxt; $("#tausche").html(fvar2);});
</script>
{{plugin_bil10_config_kopfschalt==true.end}}
 
{{plugin_bil10_config_txtfarbschalter==true.start}}
<script>
 xobor.plugin('bil10').getConf('txtcolor', function(bboxcolor){fvar3 = bboxcolor; $("#ersetze").css('color':fvar3);});
</script>
{{plugin_bil10_config_txtfarbschalter==true.end}}
 

{{plugin_bil10_config_gr==true.start}}
<div class="box">
   <div class="boxheader">
     <strong class="headertxt" id="tausche"></strong>
  </div>
   <div class="boxcontent">
     <div class="spacer10">
       <p class="bboxtxt" id="ersetze"></p>
     </div>
   </div>
</div>
 
<!--<style type="text/css"> 
  .bboxtxt {
    color:{{plugin_bil10_config_txtcolor}};
  }
</style>-->
 
{{plugin_bil10_config_txtschalt==true.start}}
<script>
  xobor.plugin('bil10').getConf('bauchtxt', function(bboxtxt){fvar1 = bboxtxt; $("#ersetze").html(fvar1);});
</script>
{{plugin_bil10_config_txtschalt==true.end}}
 
{{plugin_bil10_config_kopfschalt==true.start}}
<script>
 xobor.plugin('bil10').getConf('kopftxt', function(headertxt){fvar2 = headertxt; $("#tausche").html(fvar2);});
</script>
{{plugin_bil10_config_kopfschalt==true.end}}
 
{{plugin_bil10_config_txtfarbschalter==true.start}}
<script>
  xobor.plugin('bil10').getConf('txtcolor', function(bboxtxt){fvar3 = bboxtxt; $("#ersetze")[0].style.color=fvar3;});
</script>
{{plugin_bil10_config_txtfarbschalter==true.end}}
 

Header-Text-Farbe

{{plugin_bil10_config_hgcolorschalt==true.start}}
<script>
  xobor.plugin('bil10').getConf('hgcolor', function(headertxt){fvar4 = headertxt; $("#tausche")[0].style.color=fvar4;});
</script>
{{plugin_bil10_config_hgcolorschalt==true.end}}
 

Hintergrundfarbe

{{plugin_bil10_config_hgcolorschalt==true.start}}
<script>
  xobor.plugin('bil10').getConf('hgcolor', function(bboxtxt){fvar4 = bboxtxt; $("#ersetze")[0].style.backgroundColor=fvar4;});
</script>
{{plugin_bil10_config_hgcolorschalt==true.end}}
 
 

Var-Scripte mit Einzel-Schalter

{{plugin_bil10_config_txtschalt==true.start}}
<script>
  xobor.plugin('bil10').getConf('bauchtxt', function(bboxtxt){fvar1 = bboxtxt; $("#ersetze").html(fvar1);});
</script>
{{plugin_bil10_config_txtschalt==true.end}}
 

{{plugin_bil10_config_txtfarbschalter==true.start}}
<script>
  xobor.plugin('bil10').getConf('txtcolor', function(bboxtxt){fvar3 = bboxtxt; $("#ersetze")[0].style.color=fvar3;});
</script>
{{plugin_bil10_config_txtfarbschalter==true.end}}
 

{{plugin_bil10_config_kopfschalt==true.start}}
<script>
 xobor.plugin('bil10').getConf('kopftxt', function(headertxt){fvar2 = headertxt; $("#tausche").html(fvar2);});
</script>
{{plugin_bil10_config_kopfschalt==true.end}}
 

{{plugin_bil10_config_hgcolorschalt==true.start}}
<script>
  xobor.plugin('bil10').getConf('hgcolor', function(bboxtxt){fvar4 = bboxtxt; $("#ersetze")[0].style.backgroundColor=fvar4;});
</script>
{{plugin_bil10_config_hgcolorschalt==true.end}}
 

 

Test und Farben getrennt ausschalten

{{plugin_bil10_config_txtschalt==true.start}}
<script>
  xobor.plugin('bil10').getConf('bauchtxt', function(bboxtxt){fvar1 = bboxtxt; $("#ersetze").html(fvar1);});
</script>
<script>
 xobor.plugin('bil10').getConf('kopftxt', function(headertxt){fvar2 = headertxt; $("#tausche").html(fvar2);});
</script>
{{plugin_bil10_config_txtschalt==true.end}}
 
{{plugin_bil10_config_hgcolorschalt==true.start}}
<script>
  xobor.plugin('bil10').getConf('txtcolor', function(bboxtxt){fvar3 = bboxtxt; $("#ersetze")[0].style.color=fvar3;});
</script>
<script>
  xobor.plugin('bil10').getConf('hgcolor', function(bboxtxt){fvar4 = bboxtxt; $("#ersetze")[0].style.backgroundColor=fvar4;});
</script>
{{plugin_bil10_config_hgcolorschalt==true.end}}
 

7. Bilder enthüllen

Erstelle mindestens eine hidden Variable zum Einbinden von Bildern und sorge dafür, dass sie mit js ausgelesen wird.

Einzelschritte:

7.1 Erstelle eine Variable vom Typ chars oder fileurl (text würde auch funktionieren)
7.2 Binde die Variable so in den Code ein, dass das Bild in der Einstellmaske eingesetzt werden kann.
7.3 Prüfe das Ergebnis
7.4 Setze die Bild-Variable auf hidden - Ergebnis: In der Box erscheint kein Bild
7.5 Entwickle ein Script-Stück und lese die Bildvariable mit js aus.
7.6 Erstelle einen Schalter mit dem das Bild auf der Einstellmaske auf sichtbar gestellt werden kann.

So sieht der jqery-Code aus:

xobor.plugin('hiddenseminar').getConf('bild', function(bildinbox){$("#ersetze").css('background-image', 'url(' + bildinbox + ')');});
xobor.plugin('seminarname').getConf('varname', function(ausgedachter functionname){$("#ausgedachterPlatzhalter").css('background-image', 'url(' + functionname + ')');});

8. Straffen des Codes

Zum Abschluss wollen wir noch üben, den Code zu straffen.
In den bisherigen Übungen haben wir für jede hidden-Var einen eigenen Schalter kreiert.

Nun wollen wir die Inhalte ganzer Variablen-Gruppen aus- und einschalten und den Code zusammenfassen.

Aufgabe:

8.1 Ändere den Code so ab, dass die Textanzeige, die Gestaltung und die Bildanzeige mit insgesamt mit nur drei Schaltern bedient werden kann.

8.2 Fasse den Style-Tag für die drei Gruppen zusammen.

Noch zu klären:

Sollte man <script type="text/javascript"> drüber schreiben?

Sammlung von js-Anweisungen:

html

.html(functionvar);

CSS

.style.color = "#FFFFFF"; oder 'red' oder functionvar
.style.border = "solid red 10px";
.style.backgroundColor = "#FF9933"; oder 'red' oder functionvar
.style.fontSize = "12px";
.style.padding = "15px";

zu 6.d

{{plugin_bil10_config_rahmenschalt==true.start}}
<script>
	xobor.plugin('bil10').getConf('boxrahmen', function(bboxtxt){fvar6 = bboxtxt; $("#ersetze")[0].style.border=fvar6;});
</script>
{{plugin_bil10_config_rahmenschalt==true.end}}