Autor: JDStar o 16. Październik 2008
Dzisiaj gotowy cały plik z przykładem (nie chciało mi się kombinować z WordPressem jak umieścić w poście działający kod) – może ktoś ma jakieś przydatne wtyczki do tego?
Animacja w jQuery + selektory
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>jQuery - bardzo mały i prosty poradnik devel.jdstar.pl</title>
<meta name="description" content="miniporadnik jQuery, Jacek Diurra" />
<meta name="keywords" content="jquery, jacek dziura, jdstar" />
<meta name="author" content="Jacek Dziura htttp://devel.jdstar.pl" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<style type="text/css">
div{
display: block;
border: 1px solid gray;
background-color: rgb(239, 239, 239);
width: 150px;
height: 150px;
margin: 3px;
padding: 5px;
text-align:center;
float: left;
}
div:hover{
border: 1px solid blue;
background-color: rgb(194, 231, 239);
}
a.button{
border: 1px solid gray;
padding: 2px;
line-height:170%;
text-decoration:none;
}
a.button:hover{
border: 1px solid blue;
background-color: rgb(0, 191, 255);
color:blue;
}
.bluesky{
background-color: rgb(0, 191, 255);
}
</style>
</head>
<body>
<div id="parent" style="float:none; width:auto; height: auto">Lorem ipsum..... "rodzic"
<div class="anim ex1">Lorem ipsum..... [ex1]<br/>child 1</div>
<div class="anim ex2">Lorem ipsum..... [ex2]<br/>child 2</div>
<div class="anim ex3">Lorem ipsum..... [ex3]<br/>child 3</div>
<div class="anim ex4">Lorem ipsum..... [ex4]<br/>dziecko 4</div>
<div class="anim ex5">Lorem ipsum..... [ex5]<br/>dziecko 5</div>
<div class="anim ex6">Lorem ipsum..... [ex6]<br/>child 6</div>
<br style="clear:both"/>
</div>
<p>
<a href="#" class="button" id="showall">pokaż wszystkie</a><br/>
<a href="#" class="button" id="togglechild">pokaż/schowaj n-child - czyli kolejny element z tablicy o numerze 'n' (wartość z pola obok)</a><input id="nchild" name="nchild" size="2" value="1"/><br/>
element(y) zawierający wartość z pola obok: <input id="nval" name="nval" size="6" value="child"/> [<a href="#" class="button" id="selval">zaznacz</a> - <a href="#" class="button" id="dselval">odznacz</a>]
</p>
<script type="text/javascript">//<![CDATA[
$(document).ready(function(){
$("div .anim").click(function(){
$(this).toggle('slow');
return false;
});
$("#showall").click(function(){
$("div").show("fast");
return false;
});
$("#togglechild").click(function(){
$("div.anim:nth-child("+$("#nchild").val()+")").toggle("slow");
return false;
});
$("#selval").click(function(){
$("div.anim:contains('"+$("#nval").val()+"')").addClass("bluesky");
return false;
});
$("#dselval").click(function(){
$("div.anim:contains('"+$("#nval").val()+"')").removeClass("bluesky");
return false;
});
});
//]]>
</script>
</body>
</html> |
Napisany w animacja, efekty, jquery, selectors | Brak komentarzy »
Autor: JDStar o 15. Październik 2008
Cel: wybrać elementy przy pomocy atrybutu title (oczywiście może to być dowolny inny).
Niżej działający przykład
title=’ex1′
title=’ex2′
title=’abc2′
title=” lub jego brak
wybierz niepuste title (uwaga – również te w wordpress’ie)
wybierz z title zaczynającym się od ‘ex‘
wybierz z title kończącym się ‘2‘
Wszystkie elementy „wyzeruj”
Kod HTML i JavaScript z przykładu
1
2
3
4
5
6
7
8
9
10
|
<span title='ex1'>title='ex1'</span>
<span title='ex2'>title='ex2'</span>
<span title='abc2'>title='abc2'</span>
<span title=''>title='' lub jego brak</span>
<a class="jq" rel="[@title!='']" rev="red" href="#">wybierz niepuste title</a>
<a class="jq" rel="[@title^='ex']" rev="blue" href="#">wybierz z title zaczynającym się od '<em>ex</em>'</a>
<a class="jq" rel="[@title$='2']" rev="green" href="#">wybierz z title kończącym się '<em>2</em>'</a>
<a class="jq" rel="" rev="black" href="#">Wszystkie elementy "wyzeruj"</a> |
1
2
3
4
5
6
7
8
9
| <script type="text/javascript"><!--
var $j = jQuery;
$j(document).ready(function(){
$j("a.jq").click(function () {
$j(" span"+$j(this).attr("rel")).css('color',$j(this).attr('rev'));
return false;
});
});
// --></script> |
Jeśli ktoś ma pytania o bardziej skomplikowane przykłady – proszę w komentarzu zostawić info
Napisany w jquery, selectors | Brak komentarzy »
Autor: JDStar o 12. Październik 2008
Na początek kilka prostych przykładów jak dostać się do poszczególnych obiektów strony. Posłużę się elementami span, ale równie dobrze mogą to być inne.
Kod HTML, który jest w przykładzie:
1
2
3
4
5
6
7
8
9
10
11
12
13
| <span class="c1">element class="c1"</span>
<span class="c2">element class="c2"</span>
<span class="d2">element class="d2"</span>
<span class="c1 c2">element class="c1 c2"</span>
<span id="idc1" class="c1">element class="c1" id="idc1"</span>
<span id="idc2" class="c2">element class="c2" id="idc2"</span>
<a class="jq" rel="span.c1" rev="red" href="#">Elementy z atrybutem class="c1"</a>
<a class="jq" rel="span.c2" rev="green" href="#">Elementy z atrybutem class="c2"</a>
<a class="jq" rel="span.d2" rev="pink" href="#">Elementy z atrybutem class="d2"</a>
<a class="jq" rel="span.c1, span.c2" rev="blue" href="#">Elementy z atrybutem class="c1" lub c2</a>
<a class="jq" rel="span#idc2" rev="orange" href="#">Elementy z atrybutem id="idc2"</a>
<a class="jq" rel="span.c1, span.c2, span.d2" rev="black" href="#">Wszystkie elementy "wyzeruj"</a> |
Kod JS odpowiedzialny za selekcję:
1
2
3
4
5
6
7
8
9
| <script type="text/javascript"><!--
var $j = jQuery;
$j(document).ready(function(){
$j("a.jq").click(function () {
$j(' '+$j(this).attr("rel")).css('color',$j(this).attr('rev'));
return false;
});
});
// --></script> |
Dla potrzeb silnika WordPress aby kod jQuery działał poprawnie konieczny jest mały trick – var $j = jQuery; – niestety standardowe wywołanie $() nie działa.
Poniżej działający przykład (zmiana koloru tekstu na wartość z atrybutu rev linku
element class=”c1″
element class=”c2″
element class=”d2″
element class=”c1 c2″
element class=”c1″ id=”idc1″
element class=”c2″ id=”idc2″
Elementy z atrybutem class=”c1″
Elementy z atrybutem class=”c2″
Elementy z atrybutem class=”d2″
Elementy z atrybutem class=”c1″ lub c2
Elementy z atrybutem id=”idc2″
Wszystkie elementy „wyzeruj”
Jeśli ktoś ma pytania o bardziej skomplikowane przykłady – proszę w komentarzu zostawić info
Napisany w jquery, selectors | Brak komentarzy »
