Kamel:J*/Spielwüste: Unterschied zwischen den Versionen
< Kamel:J*
J* (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
J* (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| (3 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
==JQuery Klappdings | ==JQuery Klappdings== | ||
<div class="jq_k" style="border: 1px yellow solid;"> | <div class="jq_k fade_slow" style="border: 1px yellow solid;"> | ||
<div class="jq_kd" style="border: 1px blue solid;"> | <div class="jq_kd" style="border: 1px blue solid;"> | ||
| Zeile 12: | Zeile 12: | ||
</div> | </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> | <pre> | ||
jQuery(".jq_tr").click( function () { | jQuery(".jq_tr").click( function () { | ||
var $this = jQuery(this); | var $this = jQuery(this); | ||
$this.parents(".jq_k").children(".jq_kd").show( | var speed = "fast"; | ||
$this.parents(".jq_kd").hide('slow | 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 class="jq_a" style="display:none;"> | |||
Body 3 | |||
</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> | </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);
});