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

aus Kamelopedia, der wüsten Enzyklopädie
Zur Navigation springen Zur Suche springen
← Zum vorherigen Versionsunterschied
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
(28 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
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;" >
<div class="jq_k fade_slow" style="border: 1px yellow solid;">
[[Bild:Wiki doof.png|30px|left]]
 
{| cellspacing="0" cellpadding="0" style="background:none;"
<div class="jq_kd" style="border: 1px blue solid;">
|-
Visible. <span class="jq_tr" style="border: 1px red solid;">TRIG</span>
|valign="middle"|Wiki&nbsp;sagt:&nbsp;
</div>
|valign="bottom"|<div style="margin-right:15px;">http://kamelopedia.mormo.org/images/7/74/Anf%C3%BChrungszeichen1.png</div>
 
|valign="top"|asdf asd fasdsdf aasdf asdffasdasdf sdf afasddfasfasdasdfsdf aasdf asffasdasdf asdfasdfasdfdfasasdfdfasfsdadffasddfasdfasfasdasdfasdfasdfas dasdfsf aasdfdfasdf asdf df as
<div class="jq_kd" style="display:none; border: 1px green solid;">
|valign="top"|<div style="margin-left:15px;">http://kamelopedia.mormo.org/images/3/37/Anf%C3%BChrungszeichen2.png</div>
Hidden. <span class="jq_tr" style="border: 1px red solid;">TRIG</span>
|}
</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>
 
===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.
 
<pre>
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);
});
</pre>
 
==Akkordeon==
<div class="jq_z">
 
<div class="jq_h">
'''Head 1'''
</div>
<div class="jq_a">
Body 1
</div>
 
<div class="jq_h">
'''Head 2'''
</div>
<div class="jq_a" style="display:none;">
Body 2
</div>
 
<div class="jq_h">
'''Head 3'''
</div>
</div>
<div class="jq_a" style="display:none;">
Body 3
</div>
</div>
<div id="J_FRAME" style="border: 1px black dotted; margin-top: 5px;" >


</div>
</div>
===Inline Test===
Test <span class="jq_z fade_immediate">
<span class="jq_h">
| '''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
<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>

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

JQuery Klappdings

Visible. TRIG

Inline Test

Lorem Visible. 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

Head 1

Body 1

Head 2

Head 3

Inline Test

Test | Head 1 Body 1 | Head 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);
});
Abgerufen von „http://kamelopedia.net/index.php?title=Kamel:J*/Spielwüste&oldid=452096“