animierte zusammenklappbare Textfelder in NOF - NOF-Community - NetObjects Fusion

Forum: NOF - Tutorials (185 anschauliche Tutorials zum Lesen und Nacharbeiten) > Design, Layout, gestalterische Elemente

animierte zusammenklappbare Textfelder in NOF

(1/3) > >>

nettesekel:
*Quelle*
Wie man in NetObjects Fusion ein- und ausklappbare Textfelder erstellen und stylen kann, zeige ich in diesem Tutorial.
Das "Besondere" an dieser Variante ist, dass ein ausgeklapptes Div automatisch geschlossen wird, sobald ein anderes Div ausgeklappt wird.

Um zu sehen und testen was damit gemeint ist, ruft einfach die folgende Beispielseite auf. http://demos.nof-community.de/expcolldiv/html/expand.html

nettesekel:
Wichtige Hinweise!

Alle Angaben im Tutorial basieren auf einer Publizierung nach Assettyp. Wer eine andere Publizierungsstruktur bevorzugt, muss angegebene Pfade an seine Struktur anpassen. Publizierungsstrukturen in NetObjects Fusion

Um eine korrekte Darstellung der Boxen in allen Browsern zu erzielen solltet ihr eure Seite unter dem Doctype "LOOSE" publizieren. (HTML5 und XHTML habe ich nicht getestet, mit LOOSE läuft es in den von mir getesteten Browsern gut.) Publizierung von DocType "LOOSE" in NetObjects Fusion

nettesekel:
Zunächst beschafft ihr euch alle benötigten Dateien. Das ist zum Einen das Script "animatedcollapse.js", welches ihr euch auf dieser Seite herunterladen könnt.

Scrollt, wenn ihr die Seite aufgerufen habt ein wenig nach unten, bis ihr den Dateinamen der benötigten Datei sehen könnt (im Screenshot rot gekennzeichnet) und klickt ihn an. (bei euch sollte die Schriftfarbe des Dateilinks blau sein)

Nun öffnet sich das Script in eurem Browser. Mit einem Klick auf Datei >> Seite speichern unter öffnet sich das euch bekannte Fenster zum speichern von Dateien.

Wählt nun einen Speicherort aus uns klickt abschließend auf speichern.

Nun solltet ihr die Datei namens "animatedcollapse.js" am angegebenen Speicherort finden.

nettesekel:
Neben dem Script benötigt ihr außerdem die Button-Grafiken zum ein- und ausklappen der Inhalte. Ihr könnt euch gern meine Grafiken mit einem Rechtsklick speichern und benutzen...

...es steht euch aber auch frei, eigene Grafiken zu erstellen. :)

Nachdem ihr das Script und die zwei Grafiken auf eurem PC gespeichert habt, bindet ihr diese als Assets in euer Projekt ein. Wer nicht weiß, wie man das macht, findet in dieser Anleitung Hilfe. http://www.nof-academy.de/Zusaetzliche%20Assets%20in%20NOF%20einbinden/

nettesekel:
Im nächsten Schritt fügt ihr den folgenden Code zwischen den Headtags der Seite ein, auf welcher ihr die Boxen nutzen möchtet. Da es sehr unwahrscheinlich ist, dass ihr diese Boxen auf jeder eurer Seiten einsetzen werdet würde ich dazu raten, den Code ins Layout-html einzufügen.

Wie man Code zwischen den Headtags einer Seite platziert kann man hier nachlesen.

Im nächsten Post werde ich ein paar Sätze zu diesem Code und zu notwendigen Anpassungen schreiben.

--- Code: HTML5 ---<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript" src="../assets/animatedcollapse.js">/************************************************ Animated Collapsible DIV v2.4- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)* This notice MUST stay intact for legal use* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more***********************************************/</script> <script type="text/javascript">animatedcollapse.addDiv('box1', 'fade=0,speed=400,group=boxes,persist=1,hide=1')animatedcollapse.addDiv('box2', 'fade=0,speed=400,group=boxes,persist=1,hide=1')animatedcollapse.addDiv('box3', 'fade=0,speed=400,group=boxes,persist=1,hide=1')animatedcollapse.addDiv('box4', 'fade=0,speed=400,group=boxes,persist=1,hide=1')animatedcollapse.addDiv('box5', 'fade=0,speed=800,group=boxes,persist=1,hide=1')animatedcollapse.addDiv('box6', 'fade=0,speed=800,group=boxes,persist=1,hide=1')animatedcollapse.addDiv('box7', 'fade=0,speed=800,group=boxes,persist=1,hide=1')animatedcollapse.addDiv('box8', 'fade=0,speed=800,group=boxes,persist=1,hide=1')animatedcollapse.addDiv('box9', 'fade=0,speed=800,group=boxes,persist=1,hide=1')animatedcollapse.addDiv('box10', 'fade=0,speed=800,group=boxes,persist=1,hide=1')animatedcollapse.addDiv('box11', 'fade=0,speed=800,group=boxes,persist=1,hide=1')animatedcollapse.addDiv('box12', 'fade=0,speed=800,group=boxes,persist=1,hide=1') animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted //$: Access to jQuery //divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID //state: "block" or "none", depending on state} animatedcollapse.init()</script> <style>div.box, div.box_a,div.box_b,div.box_c,div.box_d,div.box_e,div.box_f { width:280px; /*Breite Box*/ border-top: 5px solid #e2e2e2; padding: 8px; margin-bottom: -25px; margin-right: 15px; -webkit-box-shadow: 0px 0px 5px #999; -moz-box-shadow: 0px 0px 5px #999; box-shadow: 0px 0px 5px #999} div.box:hover {border-top: 5px solid #0e7ac4}div.box_a:hover {border-top: 5px solid #B42FCF}div.box_b:hover {border-top: 5px solid #4ABA4A}div.box_c:hover {border-top: 5px solid #AC2A6F}div.box_d:hover {border-top: 5px solid #E48E0D}div.box_e:hover {border-top: 5px solid #C30027}div.box_f:hover {border-top: 5px solid #79C032} .box_inner {width:264px;} /*Breite der Box (280px) - 2x 8px padding = Breite aufgeklappte Box*/ .button{padding:6px 0px 4px 0px;}</style>

Navigation

[0] Themen-Index

[#] Nächste Seite

Zur normalen Ansicht wechseln