Willkommen, Gast!   de
    w2d · Siquando – Forum  
Die Kompetenz-Community
für web to date, shop to date, NG und
Siquando Web / Shop / Pro
Freitag, 23. Juni 2017, 22:35

Facebook

Spende ans Forum

Wer ist online?

Klappen
Benutzer: 3
Gäste: 26

Seite bookmarken

Facebook
Twitter
Google
LinkedIn

Powered by All-Inkl.com

Forum - [Tipp] Akkordeon und Tabreiter mischen

Offline harlekin8 Männlich
Experte
01
307 Punkte
Homepage Persönliche Nachricht senden
[Tipp] Akkordeon und Tabreiter mischen
# 1 Zum Seitenanfang
Akkordeon in Tabreiter einbinden bzw. Registertabs in Akkordeon

Hi Folks,

W2D 7/8 bzw. Siquando Web 8 bietet die Möglichkeit Akkordeons einzubauen. Allerdings ist es nicht möglich Registertabs und Akkordeon zu kombinieren. Sprich man kann kein Tabreiter innerhalb eines Akkordeon-Segment einpflegen.

Um das zu umgehen kann man einen zusätzlichen Akkordeon einbauen, der dann via erweiterte Eigenschaft herangezogen werden kann.

In der page.ccml wird ein Startsegment für Akkordeon-Elemente über erweiterte Eigenschaft (folgend als eE abgekürzt) eingebaut und ein Endsegment, der das schliessende Akkordeon kennzeichnet eingefügt - so kann über die erweiterte Eigenschaften für Absätze die Funktionalität erreicht werden.

Dieser Anleitung hatte ich bereits schon mal in anderen Foren, aufgezeigt, allerdings liegt hier ein etwas umfanreicheres Javascript zugrunde, der auch bei Bedarf mehr Flexibilität bietet. Ich habe jetzt nicht für jede Einstellungsmöglichkeit eine eE eingebaut - das könnt Ihr schön selbst ergänzen smile_winking_16.png

Beispielseite mit Baxley und Siquando Web 8.

Vorbereitung:

  • Siquando schliessen, falls offen.
  • javascript-Code von dieser Seite (da befindet sich auch die Dokumentation).
  • Grafiken für den Akkordeon
  • ddaccor.js und die beiden Balkengrafiken im entsprechenden Designordner kopieren

Statt Grafiken könnt Ihr natürlich auch CSS Hintergrundfarben od. z.B. eine Sprite-Grafik einsetzen.


1.) in der config.ccml:

Erweiterte Eigenschaften für eigenen Akkordeon deklarieren
<cc:*> DD Akkordeon </cc:*>
<cc:property id="design.ddaccor.start" caption="Akkordeon vor diesem Absatz starten" folder="0.1 Akkordeon" targettype="paragraph" type="boolean" default="0">
<cc:property id="design.ddaccor.ende" caption="Akkordeon nach diesem Absatz schliessen" folder="0.2 Akkordeon" targettype="paragraph" type="boolean" default="0">
<cc:property id="design.ddaccor.ueberschrift" caption="Überschrift eingeben" folder="0.3 Akkordeon" targettype="paragraph" type="string" default="Keine Überschrift">
<cc:property id="design.ddaccor.default.open" caption="Offener Start-Element (Nummer)" folder="0. Akkordeon (Allg. Einstellungen)" targettype="topic" type="long" default="1" min="1">
<cc:property id="design.ddaccor.slide.speed" caption="Aus- / Einfahrgeschwindigkeit Akkordeon" folder="0. Akkordeon (Allg. Einstellungen)" targettype="topic" type="combo" comboitems="normal|slow|fast" default="normal">
<cc:property id="design.ddaccor.scrolltop" caption="Inhalt im Sichtbereich anzeigen?" folder="0. Akkordeon (Allg. Einstellungen)" targettype="topic" type="boolean" default="0">

 

 2.) in der global.ccml:

Javascript und Balkengrafiken anmelden
<cc:*> DD Akkordeon </cc:*> 
<cc:asset src="ddaccor.js" dst="ddac.js" obj="ddac" common="0" noparse="1">
<cc:asset src="baroff.png" dst="baroff.png" obj="baroff" noparse="1">
<cc:asset src="baron.png" dst="baron.png" obj="baron" noparse="1">

 3.) in der navigation.ccml vor dem schliessenden </head>-Tag:

Javascript in der navigation.ccml einbauen
<!-- Akkordeon -->
<script type="text/javascript" src="<cc:print value="&ddac.url">">">
 
/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
 
</script>
<cc:if cond="&para.properties.design.ddaccor.first.default.open">
<cc:set value="0" obj="para.properties.design.ddaccor.first.default.open"></cc:if>
<script type="text/javascript">
<cc:if cond="&topic.properties.design.ddaccor.scrolltop"><cc:set value="true" obj="scrollstatus"><cc:else><cc:set value="false" obj="scrollstatus"></cc:if>
<cc:if cond="&topic.properties.design.ddaccor.default.open gt 0"><cc:set value="&topic.properties.design.ddaccor.default.open-1" obj="topic.properties.design.ddaccor.default.open"></cc:if>
//Initialize first Default Open :
ddaccordion.init({
	headerclass: "balken", //Shared CSS class name of headers group
	contentclass: "inhalt", //Shared CSS class name of contents group
	revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
	mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
	defaultexpanded: [<cc:print value="&topic.properties.design.ddaccor.default.open">], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
	onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
	animatedefault: false, //Should contents open by default be animated into view?
	scrolltoheader: <cc:print value="&scrollstatus">, //scroll to header each time after it's been expanded by the user?
	persiststate: false, //persist state of opened contents within browser session?
	toggleclass: ["balken", "balkenopen"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
	togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
	animatespeed: "<cc:print value='&topic.properties.design.ddaccor.slide.speed'>", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
	oninit:function(expandedindices){ //custom code to run when headers have initalized
		//do nothing
	},
	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
		//do nothing
	}
})
</script>
 
<!-- Ende Akkordeon -->

 4.) in der page.ccml - direkt nach der Zeile:

<cc:loop type="paragraph" obj="para">

Akkordeon Start-Segment festlegen
<cc:if cond="&para.properties.design.ddaccor.start">
<!-- Akkordeon Element -->
<h2 class="balken" style="padding: 9px 0 0 55px; color: #222; font-size: 14px; text-transform: none; margin: 1px 0; height: 26px;"><cc:print value="&para.properties.design.ddaccor.ueberschrift"></h2>
<div class="inhalt">
</cc:if>

 und weiter unten direkt vor dem schliessenden </cc:loop>-Tag:

Akkordeon End-Segment festlegen
<cc:if cond="&para.properties.design.ddaccor.ende">
<!-- Ende Accordeon -->
</div>
</cc:if>

5.) in der style_design.css:

Style Anweisung für Akkordeon
/* DD Akkordeon */
 
.balken { 
cursor: hand;
cursor: pointer;
background-image: url("../<cc:print value="&baroff.url">");
background-repeat: no-repeat;
}
 
.balkenopen{ 
    cursor: hand;
    cursor: pointer;
    background-image: url("../<cc:print value="&baron.url">");
    background-repeat: no-repeat;
}
.inhalt {
    padding: 10px;
}

 Anbei die obligatorische DEMO-Seite >>

Die Überschrift des Akkordeon-Balken, sowie Start und Ende-Segment findet ihr unter die Absatz-eE. Drei weitere Eigenschaften befinden sich in den Seiten-eE.
Einfach ausprobieren !

Original-Dateien vorher sichern und Lizenzrechte einhalten smile_winking_16.png

Bis die Tage !

---

≡ JORDAN RALLY RAID ••• ≡  Wordpress Responsiv    ≡ MEDIATION FREIBURG ••• ≡ Wordpress Responsiv

... falls Ihr euch erkenntlich zeigen möchtet ... mein

 

amazon Wunschzettel >>
Ingo Gerhardt
818724189
Packstation 127
D-79114 Freiburg i. Br.

Dieser Beitrag wurde bereits 3 mal bearbeitet, zuletzt von »harlekin8« (08.06.2016, 09:43)

Bild 21.05.2014, 15:36
Online Volker W. Männlich
Administrator
Forum-Betreiber
012345
5737 Punkte
Homepage Persönliche Nachricht senden
RE:[Tipp] Akkordeon und Tabreiter mischen
# 2 Zum Seitenanfang

Hut ab, Ingo. Deine w2d / Siquando Tipps werden immer genialer! :-)

Wie immer vielen herzlichen Dank dafür!!!

---

Viele Grüße,
Volker

Volker W. Musik & Sounds  ·  Facebook  ·  Twitter  ·  Google+  ·  StayFriends  ·  LinkedIn  ·  XING

Hilfe-Anfragen per PN, E-Mail usw. werden ab sofort nicht mehr beantwortet. Genau dafür ist dieses Forum da. Vielen Dank!

Bild 21.05.2014, 15:50
Offline Kissling Männlich
Eroberer
0123
50 Punkte
Homepage Persönliche Nachricht senden
RE:[Tipp] Akkordeon und Tabreiter mischen
# 3 Zum Seitenanfang

Das ist der WAHNSINN!
Sau g...l
Danke an das Forum!

Nur eines hat bei mir so nicht funktioniert:
Ich muste die Grafiken weiter oben in der global.ccml einfügen.
Sonnst wurden Sie nicht angezeigt.

Gruß Ronald

Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »Kissling« (13.06.2016, 12:31)

Bild 13.06.2016, 12:30
Bewertung: