jQuery: Inhalte anzeigen/verbergen per Mausklick

If you have created additional (non official) documentation or tutorials or something like that please post this here
Post Reply
pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

jQuery: Inhalte anzeigen/verbergen per Mausklick

Post by pepe » Mon 5. Mar 2012, 15:03

Ich habe gerade mal einen ersten Versuch mit jQuery unternommen...
vielleicht kann mein Ergebnis auch für andere phpwcms Freunde interessant und nutzbar sein?

Ziel und Arbeitsweise:
===============

Mit Hilfe dieses Templates kann die Anzeige-Position des CustomBlocks {VERSTECKTER_INHALT} in jeden Block/CustonBlock des aktuellen Layouts vorgenommen werden, der im Seitenlayout VOR diesem CustomBlock angelegt worden ist!
Es wird ein Aktivierungs-Button erzeugt, der per Klick den "versteckten" Inhalt anzeigt/versteckt, der im CustomBlock {VERSTECKTER_INHALT} des Artikels vorhanden ist.

HTML-Template: VERSTECKTER_INHALT-hier-einbinden.tmpl
Ablegen im Ordner: .../template/inc_cntpart/html


Voraussetzungen zur Verwendung:
=======================


jQuery muss bereits aktiviert sein. (Ansonsten wird alles angezeigt.)
Als CustomBlock muss im Layout angelegt sein: {VERSTECKTER_INHALT}

Die gewuenschten ContentParts sind im jeweiligen Artikel im CustoBlock {VERSTECKTER_INHALT} abzulegen.

Der Text des Aktivierungs-Buttons ist im Feld "Untertitel" einzutragen.

Eintragungen im Eingabefeld "reines HTML" des ContentParts werden an die übernommenen Inhalte aus dem CB {VERSTECKTER_INHALT} "angehängt".

Natürlich kann der Inhalt im CustomBlock {VERSTECKTER_INHALT } auch leer oder nicht veröffentlicht sein, dann wird lediglich der Inhalt des Eingabefeldes "reines HTML" angezeigt.
Das kann auch ein Verweis auf einen bereits bestehenden Inhalt per Anweisung {SHOW_CONTENT:.....} sein.
Hier sind aber auch - der eigentlicher Zweck des HTML-Contentparts - reine HTML-Codierungen moeglich!


Wie immer gilt:
==========


Mit phpwcms kannst du auch "fliegen"... wenn du nur geschickt genug bist!


Und hier endlich das HTML-Template:
(Die Beschreibung von oben ist mit enthalten. Wenn alle klappt, einfach aus dem Template löschen.)

Code: Select all

[PHP]
/* =========================================================================
   
   Mit Hilfe dieses Templates kann die Anzeige-Position des  CustomBlocks 
   { VERSTECKTER_INHALT } in jeden Block/CustonBlock des  aktuellen Layouts 
   vorgenommen werden, der im Seitenlayout VOR diesem CustomBlock angelegt
   worden ist!
   Es wird ein Aktivierungs-Button erzeugt, der per Klick den "versteckten"
   Inhalt anzeigt/versteckt, der im CustomBlock { VERSTECKTER_INHALT } des 
   Artikels vorhanden ist.
      
   HTML-Template:     VERSTECKTER_INHALT-hier-einbinden.tmpl
   Ablegen im Ordner: .../template/inc_cntpart/html

   Voraussetzungen zur Verwendung:
      jQuery muss bereits aktiviert sein. (Ansonsten wird alles angezeigt.)
      Als CustomBlock muss im Layout angelegt sein: { VERSTECKTER_INHALT }
   
      Die gewuenschten ContentParts sind im jeweiligen Artikel im CustoBlock 
      { VERSTECKTER_INHALT } abzulegen.
   
   Der Text des Aktivierungs-Buttons ist im Feld "Untertitel" einzutragen.
   
   Eintragungen im Eingabefeld "reines HTML" des ContentParts werden an die 
   übernommenen Inhalte aus dem CB { VERSTECKTER_INHALT } "angehaengt".
   
   Natürlich kann der Inhalt im CB { VERSTECKTER_INHALT } auch leer oder
   nicht veröffentlicht sein, dann wird lediglich der Inhalt des 
   Eingabefeldes "reines HTML" angezeigt. 
   Das kann auch ein Verweis auf einen bereits bestehenden Inhalt 
   per Anweisung { SHOW_CONTENT:..... } sein. 
   Hier sind aber auch - der eigentlicher Zweck des HTML-Contentparts - 
   reine HTML-Codierungen moeglich!
   
   
   Wie immer gilt: 
   
   Mit phpwcms kannst du auch "fliegen"... wenn du nur geschickt genug bist!
   
   =========================================================================
*/
[/PHP] 

[TITLE]<h3 style="margin-bottom:10px;">{TITLE}</h3>[/TITLE]
[SUBTITLE]<button style="float:right; padding:5px">{SUBTITLE}</button><br style="clear:both;" />[/SUBTITLE]

<div class="versteckter_inhalt" style="background:#fff; margin:10px -6px 0px; padding:15px 5px 10px; border:1px solid #ddd;">
   {VERSTECKTER_INHALT}
   [HTML]{HTML}[/HTML]
</div>
<!-- JS: $(document).ready(function(){	
         // Set default open/close settings
            $('.versteckter_inhalt').hide();          
         });
-->   
<script>
   $("button").click(function () {
      $(".versteckter_inhalt").slideToggle("fast");
   });
</script>
Natürlich ist das nur ein Experiment - als Anstoß für eigene Versuche gedacht - und sollte von euch gründlich angepasst und optimiert werden.

z.B. sollte ein "versteckt" verwendeter HTML-ContentPart mit diesem Template auch leicht für eine "permanente Funktion" im Haupttemplate eingebunden werden können ( per {SHOW_CONTENT:CP,xxxxx} ), dann wäre der Aktivierungs-Button in jedem Artikel vorhanden, es würde aber immer der "passende" Inhalt aus dem Artikelbezogenen CustomBlock {VERSTECKTER_INHALT} angezeigt...
... hab's aber selbst noch nicht versucht :lol:

pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: jQuery: Inhalte anzeigen/verbergen per Mausklick

Post by pepe » Mon 5. Mar 2012, 20:04

Beim Einbinden in eine Probeinstallation, kam mir der Gedanke, es könne ggf. gut sein, wenn man den
Ativierungsbutton getrennt von dem Ausgabebereich des "versteckten" Inhalts positionieren könnte.

Sagen wir, der Ausgabebereich soll als letzter Inhalt im Artikel positioniert werden, während der Aktivierungs-Button in der Seitenspalte erscheinen soll.


MeineLösungsansatz: Nimm einfach 2 HTML-Contentparts, jeder für seine spezielle Aufgabe.

1. Mit dem einen positionierst du den Ablagebereich fest.
2. Mit dem anderen baust du den Aktivierungs-Button ein.


Meine beiden HTML-Templates sehen dann so aus:

HTML-Template 1
Dateiname: VERSTECKTER_INHALT-CustomBlock.tmpl

Code: Select all

[PHP]/* 
   =========================================================================
   
   CustomBlock fuer den Anzeigebereich positionieren
   -------------------------------------------------
   
   Mit Hilfe dieses Templates kann die Anzeige-Position des CustomBlocks 
   { VERSTECKTER_INHALT } in jeden Block/CustonBlock des aktuelle Layouts 
   vorgenommen werden, der im Seitenlayout VOR diesem CustomBlock angelegt
   worden ist!
  
   phpwcms-Template:  VERSTECKTER_INHALT-CustomBlock.tmpl
   Ablegen im Ordner: .../template/inc_cntpart/html

   Voraussetzungen zur Verwendung:
      jQuery muss bereits aktiviert sein. (Ansonsten wird alles angezeigt.)
      Als CustomBlock muss im Layout angelegt sein: { VERSTECKTER_INHALT }
   
      Die gewuenschten Inhalte sind in Form von ContentParts im jeweiligen 
      Artikel im CustomBlock { VERSTECKTER_INHALT } abzulegen.
      
   Eintragungen im Eingabefeld "reines HTML" des HTML-ContentParts werden an
   die übernommenen Inhalte aus dem CB { VERSTECKTER_INHALT } "angehaengt".
   
   Natuerlich kann der Inhalt im CB { VERSTECKTER_INHALT } auch leer oder
   nicht veröffentlicht sein, dann wird lediglich der Inhalt des 
   Eingabefeldes "reines HTML" angezeigt. 
   Das kann natürlich auch ein Verweis auf einen bereits bestehenden Inhalt 
   per phpwcms Anweisung { SHOW_CONTENT:..... } sein. 
   Hier sind aber auch - der eigentlicher Zweck des HTML-Contentparts - 
   reine HTML-Codierungen moeglich!

   =========================================================================
*/[/PHP] 

[TITLE]<!-- <h3>{TITLE}</h3> -->[/TITLE]
[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]

<div class="versteckter_inhalt" style="background:#eee; margin:10px -6px 0px; padding:15px 5px 10px; border:1px solid #ddd;">
   {VERSTECKTER_INHALT}
   [HTML]{HTML}[/HTML]
</div>

HTML-Template 2
Dateiname: VERSTECKTER_INHALT-Button.tmpl

Code: Select all

[PHP]/* 
   =========================================================================
   
   Aktivierungs-Button positionieren
   ---------------------------------
   
   Es wird ein Aktivierungs-Button erzeugt, der per Klick den "versteckten"
   Inhalt anzeigt/versteckt, der im CustomBlock { VERSTECKTER_INHALT } des 
   Artikels vorhanden ist.
      
   phpwcms-Template:  VERSTECKTER_INHALT-Button.tmpl
   Ablegen im Ordner: .../template/inc_cntpart/html

   Voraussetzungen zur Verwendung:
      jQuery muss bereits aktiviert sein. (Ansonsten wird alles angezeigt.)
      Als CustomBlock muss im Layout angelegt sein: { VERSTECKTER_INHALT }
   
      Die gewuenschten Inhalte sind in Form von ContentParts im jeweiligen 
      Artikel im CustomBlock { VERSTECKTER_INHALT } abzulegen.
   
   Der Text des Aktivierungs-Buttons ist im Feld "Untertitel" einzutragen.

   =========================================================================
*/[/PHP] 

[TITLE]<h3 style="margin-bottom:10px;">{TITLE}</h3>[/TITLE]
[SUBTITLE]<button style="float:right; padding:5px">{SUBTITLE}</button><br style="clear:both;" />[/SUBTITLE]

<!-- JS: $(document).ready(function(){	
         // Set default open/close settings
            $('.versteckter_inhalt').hide();          
         });
-->   
<script>
   $("button").click(function () {
      $(".versteckter_inhalt").slideToggle("fast");
   });
</script>
Ich war selbst überrascht, wie schnell das umsetzbar war :D

Auch das ist sicher ohne Probleme in das Haupttemplate integrierbar, sodass in jedem Artikel der Aktivierungs-Button an der selbe Stelle des Layouts erscheint und bei Mausklick der artikelspezifische "versteckte Inhalt" an's Tageslicht kommt.

User avatar
update
Moderator
Posts: 6394
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: jQuery: Inhalte anzeigen/verbergen per Mausklick

Post by update » Mon 5. Mar 2012, 20:17

Das habe ich btw schon mal umgesetzt bei der einen Seite, die Du auch kennst ;), und zwar als Harmonium mit mootools. Sollte aber auch wie von Dir beschrieben mit der Kuh gehen...
...und wenn es mehrere einzeln auszulösende Aktivierungsbuttons gibt, braucht's dann diverse Templatepaare, nicht wahr?
It's mostly all about webdesign, logo design, new and old pages refresh, print BUT slowly switching to be supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.

pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: jQuery: Inhalte anzeigen/verbergen per Mausklick

Post by pepe » Mon 5. Mar 2012, 20:50

Die Idee zu der Lösung entstand ja auch, als ich an deine Site dachte :D

Das müsste aber auch mit nur einem Templatepaar gehen...
wenn man das Templatepaar so ändert, dass man die anzusprechenden Klassen- /Customblock-Name als Variable mit übergibt.

User avatar
update
Moderator
Posts: 6394
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: jQuery: Inhalte anzeigen/verbergen per Mausklick

Post by update » Mon 5. Mar 2012, 21:02

:D
pepe wrote:Das müsste aber auch mit nur einem Templatepaar gehen
Wenn man an das Template zB die CP-ID schickte? Dann müsste die aber auch beim Auslösebutton ankommen...
It's mostly all about webdesign, logo design, new and old pages refresh, print BUT slowly switching to be supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.

pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: jQuery: Inhalte anzeigen/verbergen per Mausklick

Post by pepe » Mon 5. Mar 2012, 21:38

Mit meinen Primitiv-Kenntnissen... würd ich folgendes probieren (hab's jetzt probiert und klappt!):

Mehrere CustomBlocks anlegen für die speziellen Inhalte:
{VERSTECKTER_INHALT} {VERSTECKTER_INHALT_1} {VERSTECKTER_INHALT_2} {VERSTECKTER_INHALT_3} ....

Im Haupttemplate (CustomBlock-Felder) ohne zu formatieren nach dem Schnittmuster (oder auch ganz weg lassen):

Code: Select all

   {VERSTECKTER_INHALT_1}
Die erforderlichen HTML-Templates sehen jetzt wie folgt aus:

HTML-Template 1
Dateiname: VERSTECKTER_INHALT_X-CustomBlock.tmpl

Code: Select all

 
[TITLE]<h3>{TITLE}</h3>[/TITLE]

<div class="versteckter_inhalt[SUBTITLE]_{SUBTITLE}[/SUBTITLE]" style="background:#eee; margin:10px -6px 0px; padding:15px 5px 10px; border:1px solid #ddd;">
   {VERSTECKTER_INHALT[SUBTITLE]_{SUBTITLE}[/SUBTITLE]}
   [HTML]{HTML}[/HTML]
</div>
 
HTML-Template 2
Dateiname: VERSTECKTER_INHALT_X-Button.tmpl

Code: Select all


[TITLE]<button [SUBTITLE]class="selectedButton-{SUBTITLE}[/SUBTITLE]" style="width:100%; padding:5px">{TITLE}</button>[/TITLE]

<!-- JS: $(document).ready(function(){	
         // Set default open/close settings
            $('.versteckter_inhalt[SUBTITLE]_{SUBTITLE}[/SUBTITLE]').hide();          
         });
-->   
<script>
   $("button[SUBTITLE].selectedButton-{SUBTITLE}[/SUBTITLE]").click(function () {
      $(".versteckter_inhalt[SUBTITLE]_{SUBTITLE}[/SUBTITLE]").slideToggle("fast");
   });
</script>
 
Tante EDIT sagt:

Habe soeben getestet, mit den überarbeiteten Templates... KLAPPT :D

Damit die Paare (AktivierungsButton und zugehörender versteckter Inhalt) zusammenfinden, wird nun jeweils im Feld "SUBTITEL" der Integerwert des CustomBlocks eingetragen. Bei {VERSTECKTER_INHALT_3} wäre das demnach die 3.

Der ButtonText ist in den Bereich "Titel" einzutragen.


So, da es bei mir jetzt "läuft" ...
werd ich mal eben einen leckeren Darjeeling trinken und anschließend im Garten etwas leichtere Arbeiten durchführen und zwei 40jährige Fichten auf Brennholzlänge zerkleinern.
Und da meine bessere Hälfte der Meinung ist, Bewegung tut gut, hat sie mir die Kettensäge "verboten" und eine feine Bügelsäge und eine wunderschön handliche Small Forest Axe von Gränsfors Bruks geschenkt! Ich freu mich schon richtig drauf! :roll:
Wenn Ihr mich im Krankenhaus besuchen kommt... bringt bitte Kuchen mit :D
Last edited by pepe on Tue 6. Mar 2012, 11:33, edited 1 time in total.

pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: jQuery: Inhalte anzeigen/verbergen per Mausklick

Post by pepe » Tue 6. Mar 2012, 11:32

Verdammt, der Tee ist noch zu heisssss :roll:

Kann ich ja eben noch sagen, dass die Sache natürlich nicht nur mit HTML ContentParts funktioniert, sondern mit jedem anderen bordeigenen Werkzeug!
Ich verwende die HTMLs gerne, damit ich sie schneller wieder finde im Backend und die eigentlich nur für "Steuerungszwecke" Verwendung finden.
Niemand hindert uns, den CustomBlock-Ablagebereich mit einem "Text mit Bild" zu organisieren... und dort gleich einige nett formatierte Informationen reinzuschreiben!

User avatar
update
Moderator
Posts: 6394
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: jQuery: Inhalte anzeigen/verbergen per Mausklick

Post by update » Tue 6. Mar 2012, 11:42

pepe wrote:wird nun jeweils im Feld "SUBTITEL" der Integerwert des CustomBlocks eingetragen
Ganz schön abgefeimt, mein Lieber :lol:
It's mostly all about webdesign, logo design, new and old pages refresh, print BUT slowly switching to be supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.

User avatar
Oliver Georgi
Site Admin
Posts: 9576
Joined: Fri 3. Oct 2003, 22:22
Location: Moscow, Russia
Contact:

Re: jQuery: Inhalte anzeigen/verbergen per Mausklick

Post by Oliver Georgi » Sat 17. Mar 2012, 10:07

sorry Freunde, durchdenkt das doch mal in Ruhe. Ich hoffe jetzt niemanden hier zu Unrecht wegzubügeln, aber keep it simple. Der Inline PHP sollte UNBEDINGT!!! nicht mehr benutzt werden und schon gar nicht für diese Codemonster!

Wenn ich jQuery habe, dann nutze ich das möglichst ausschließlich, um etwas aus- oder einzublenden und brauche (vermutlich) kein PHP mehr.

Klassen dürfen z.B. nicht alle Zeichen enthalten!

Wenn es den so called "versteckten Inhalt" in einem Custom Block gibt, dann kann ich den per Default (Template) umwrappen lassen. Darauf triggere ich mit jQuery und zeige den Button genau nur dann an.
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон

pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: jQuery: Inhalte anzeigen/verbergen per Mausklick

Post by pepe » Sat 17. Mar 2012, 13:22

Oliver Georgi wrote:sorry Freunde, durchdenkt das doch mal in Ruhe. Ich hoffe jetzt niemanden hier zu Unrecht wegzubügeln, aber keep it simple.
Da bin ich absolut deiner Meinung, aber dazu muss man (ich) wissen, wie es SIMPLE geht und da beginnt mein Problem.
Ich bin der Erste, der es simple macht... wenn ich weiß, wie :wink:
Der Inline PHP sollte UNBEDINGT!!! nicht mehr benutzt werden und schon gar nicht für diese Codemonster!
Wenn ich jQuery habe, dann nutze ich das möglichst ausschließlich, um etwas aus- oder einzublenden und brauche (vermutlich) kein PHP mehr.
[PHP]/* xxx */[/PHP] Das ist doch nur für die Zeit der "Kopieraktion" zur Erklärung vorhanden und soll anschließend - wenn alles klappt - gelöscht werden. Hab ich doch hier ausdrücklich gesagt:
(Die Beschreibung von oben ist mit enthalten. Wenn alle klappt, einfach aus dem Template löschen.)
Du hast ja schon mehrfach ausdrücklich darauf hingewiesen, inline-PHP nicht mehr zu verwenden???
Ist das ggf. ein Sicherheitsrisiko oder lediglich "unelegant" ?
Klassen dürfen z.B. nicht alle Zeichen enthalten!
Was hab ich falsch gemacht... wo kann ich was nachlesen?
Wenn es den so called "versteckten Inhalt" in einem Custom Block gibt, dann kann ich den per Default (Template) umwrappen lassen. Darauf triggere ich mit jQuery und zeige den Button genau nur dann an.
Da hab ich leider nicht verstanden, wie du das meinst :(

Post Reply