Benutzer:J*/Spielwüste: Unterschied zwischen den Versionen

Aktuelle Version vom 21. Juli 2011, 15:47 Uhr

JQuery Klappdings[bearbeiten]

Visible. TRIG

Inline Test[bearbeiten]

Lorem Visible. TRIG Hidden. TRIG ipsum.

jQuery(".jq_tr").click( function () {
    var $this = jQuery(this);
    var speed = "fast";
    if ($this.parents(".jq_k").hasClass("fade_slow"))
        speed = "slow";
    else if ($this.parents(".jq_k").hasClass("fade_immediate"))
        speed = 0;
    $this.parents(".jq_k").children(".jq_kd").show(speed);
    $this.parents(".jq_kd").hide(speed);
});

Akkordeon[bearbeiten]

Head 1

Body 1

Head 2

Head 3

Inline Test[bearbeiten]

Test | Head 1 Body 1 | Head 2 Body 2 | Bla

jQuery('.jq_z .jq_h').click(function() {
    var $this = jQuery(this);
    var speed = "fast";
    if ($this.parents(".jq_z").hasClass("fade_slow"))
        speed = "slow";
    else if ($this.parents(".jq_z").hasClass("fade_immediate"))
        speed = 0;
    var $this = jQuery(this);
    $this.parents(".jq_z").children(".jq_a").hide(speed);
    $this.next(".jq_a").show(speed);
});

@@ Zeile 1: / Zeile 1: @@
-An dieser Stelle wird eine Hochlade-Seite simuliert! Wie könnte ein Javascript-Klick-Tag-System aussehen?
+==JQuery Klappdings==
-<div style="border: 1px blue dotted; margin-top: 5px; padding: 5px; background-color: #ffffdd;" >
+<div class="jq_k fade_slow" style="border: 1px yellow solid;">
-{| cellspacing="0" cellpadding="0" style="background:none;"
-|-
+<div class="jq_kd" style="border: 1px blue solid;">
-|valign="middle" align="center"|Wiki&nbsp;sagt:&nbsp;<br/>[[Bild:Wiki doof.png|80px]]
+Visible. <span class="jq_tr" style="border: 1px red solid;">TRIG</span>
-|valign="bottom"|<div style="margin-right:15px;">http://kamelopedia.mormo.org/images/7/74/Anf%C3%BChrungszeichen1.png</div>
-|valign="top"|Auch beim Hochladen von Dateien muss alles seine [[Projekt:Bürokratenspiel|Ordnung]] haben. Du solltest daher unbedingt angeben
-* eine oder mehrere Quellen (auch wenn du gar keine benutzt hast)
-* unter welcher Lizenz du das Bild der Kamelopedia zur verfügung stellst
-Damit man dein Bild besser findet, kannst du zudem angeben:
-* was für ein Bildtechnik benutzt wurde
-* mit welcher Malware du das Bild erstellt hast
-* Stichworte, was auf dem Bild zu sehen ist.
-Benutz einfach meine Klickboxen da unten und setze dir die entsprechenden Vorlagen in den Beschreibungstext (auch gern mehrere Quellen, Schlüsselworte oder was auch immer). Wenn du dich vertippt hast oder etwas ändern oder löschen möchtest, kann ich dir leider nicht helfen. Bitte lösche die entsprechenden Zeilen selbst unten im Beschreibungstext.
-<div>'''Die Klickboxen sind momentan in der Erprobungsphase. Bitte sag [[Forum:Bildlizenzen|da]] oder [[Kamel Diskussion:J*|da]] Bescheid, wenn etwas nicht funktioniert. Es könnte aber auch schon helfen, den Browser-Cache zu leeren.'''</div>
-|valign="top"|<div style="margin-left:15px;">http://kamelopedia.mormo.org/images/3/37/Anf%C3%BChrungszeichen2.png</div>
-|}
-<div id="klicktag">
-Leider kann Wiki dir nicht helfen, wenn du dein Javascript ausgeschaltet hast. Also mach's entweder selber oder schalt dein Javascript ein!
 </div>
+<div class="jq_kd" style="display:none; border: 1px green solid;">
+Hidden. <span class="jq_tr" style="border: 1px red solid;">TRIG</span>
 </div>
-<div id="J_FRAME" style="border: 1px black dotted; margin-top: 5px;" >
 </div>
-== FORUM ERWEITERN / UMMODELN? ==
+===Inline Test===
+Lorem <span class="jq_k fade_immediate" style="border: 1px yellow solid;">
+<span class="jq_kd" style="border: 1px blue solid;">
+Visible. <span class="jq_tr" style="border: 1px red solid;">TRIG</span>
+</span>
+<span class="jq_kd" style="display:none; border: 1px green solid;">
+Hidden. <span class="jq_tr" style="border: 1px red solid;">TRIG</span>
+</span>
+</span> ipsum.
-<table width="100%" align="center" style="padding-left:20px;background-color:#FDFCED;border:1px solid #C0C0C0;" >
+<pre>
-<tr>
+jQuery(".jq_tr").click( function () {
-<td>[[Special:Recentchangeslinked/Category:Forum|Letzte Änderungen des Forums]]</td>
+    var $this = jQuery(this);
-<td><createbox>
+    var speed = "fast";
-prefix=Forum:
+    if ($this.parents(".jq_k").hasClass("fade_slow"))
-preload=Vorlage:ForumPreload
+        speed = "slow";
-buttonlabel=Neues Thema
+    else if ($this.parents(".jq_k").hasClass("fade_immediate"))
-width=60
+        speed = 0;
-</createbox></td>
+    $this.parents(".jq_k").children(".jq_kd").show(speed);
-</tr></table>
+    $this.parents(".jq_kd").hide(speed);
+});
+</pre>
+==Akkordeon==
+<div class="jq_z">
-{| width="100%" align="center" style="padding:15px 20px 50px 20px; background-color:#FDFCED;border:1px solid #C0C0C0;"
+<div class="jq_h">
- |-
+'''Head 1'''
- ! class="forum_title" align="left" height="50px" |Thema
+</div>
- ! align="left" width="200px" |erstellt von
+<div class="jq_a">
- ! align="left" width="300px" |aktuellster Kameldung zum Thema
+Body 1
-{{#dpl:
+</div>
-|namespace=Forum
-|ordermethod=lastedit
+<div class="jq_h">
-|order=descending
+'''Head 2'''
-|count=100
+</div>
-|adduser=true
+<div class="jq_a" style="display:none;">
-|addeditdate=true
+Body 2
-|format=,\n¦-\n¦[[%PAGE%|%TITLE%]]\n¦%CONTRIBUTOR%\n¦%DATE% [[Kamel:%USER%|%USER%]],,
+</div>
-}}
- |}
+<div class="jq_h">
-{{sv}} [[Forensik]]
+'''Head 3'''
+</div>
+<div class="jq_a" style="display:none;">
+Body 3
+</div>
+</div>
-----
+===Inline Test===
-[[Bild:Hä.png|16px]] Offen / Beiträge gewünscht<br>
-[[Bild:Schloss.png|16px]] Erledigt / Beiträge nur bei neuen Erkenntnissen
-Eventuell auch:<br>
+Test <span class="jq_z fade_immediate">
-[[Bild:Wiki.png|16px]] Nur zur Kenntnisnahme<br>
+<span class="jq_h">
-[[Bild:Roterknopf_leer.png|16px]] Wichtig
+| '''Head 1'''
+</span>
+<span class="jq_a">
+Body 1
+</span>
+<span class="jq_h">
+| '''Head 2'''
+</span>
+<span class="jq_a" style="display:none;">
+Body 2
+</span>
+</span> | Bla
-Die Symbole sind noch doof, vielleicht andere ... oder Ampel-Prinzip?
+<pre>
+jQuery('.jq_z .jq_h').click(function() {
+    var $this = jQuery(this);
+    var speed = "fast";
+    if ($this.parents(".jq_z").hasClass("fade_slow"))
+        speed = "slow";
+    else if ($this.parents(".jq_z").hasClass("fade_immediate"))
+        speed = 0;
+    var $this = jQuery(this);
+    $this.parents(".jq_z").children(".jq_a").hide(speed);
+    $this.next(".jq_a").show(speed);
+});
+</pre>

Benutzer:J*/Spielwüste: Unterschied zwischen den Versionen

Aktuelle Version vom 21. Juli 2011, 15:47 Uhr

Inhaltsverzeichnis

JQuery Klappdings[<small>bearbeiten</small>]

Inline Test[<small>bearbeiten</small>]

Akkordeon[<small>bearbeiten</small>]

Inline Test[<small>bearbeiten</small>]

Navigationsmenü

Suche