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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
| <!doctype html>
<html lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta charset="utf-8">
<meta name="Author" content="Daniel Hagnoul">
<title>Forum jQuery</title>
<style>
/* BASE */
body {
background-color:#dcdcdc;
color:#000000;
font-family:sans-serif;
font-size:medium;
font-style:normal;
font-weight:normal;
line-height:normal;
letter-spacing:normal;
}
h1,h2,h3,h4,h5 {
font-family:serif;
}
div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
margin:0px;
padding:0px;
}
p {
padding:6px;
}
ul,ol,dl {
list-style:none;
padding-left:6px;
padding-top:6px;
}
li {
padding-bottom:6px;
}
/* dvjh */
h1 {
text-align:center;
font-style:italic;
text-shadow: 4px 4px 4px #bbbbbb;
}
h2 {
text-align:center;
}
div#conteneur {
width:95%;
height:600px;
margin:12px auto;
padding:6px;
background-color:#FFFFFF;
color:#000000;
border:1px solid #666666;
}
/* TEST */
.jcarousel-skin-tango .jcarousel-container {
-moz-box-shadow: 6px 6px 12px -1px grey;
-webkit-box-shadow: 6px 6px 12px -1px grey;
box-shadow: 6px 6px 12px -1px grey;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #F0F6F9;
border: 1px solid #346F97;
margin:12px;
}
.jcarousel-skin-tango .jcarousel-direction-rtl {
direction: rtl;
}
.jcarousel-skin-tango .jcarousel-container-vertical {
width: 406px;
height: 408px; /* 3 * 136 */
padding: 12px;
}
.jcarousel-skin-tango .jcarousel-clip-vertical {
width: 406px;
height: 408px;
}
.jcarousel-skin-tango .jcarousel-item {
width: 406px;
height: 136px; /* 112 + 2 * 12 */
font-size: 0.8em;
text-overflow:ellipsis;
overflow:hidden;
}
.jcarousel-skin-tango .jcarousel-item-vertical {
margin-bottom: 6px;
}
.jcarousel-skin-tango .jcarousel-item-placeholder {
background: #fff;
color: #000;
}
</style>
<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
<script charset="utf-8" src="jCarousel.js"></script>
<script>
$(function(){
$('#mycarousel').jcarousel({
vertical: true,
scroll: 1,
animation: 2500, // 2,5s animation
auto: 6, // 6s d'attente
wrap: "circular"
});
});
</script>
</head>
<body>
<h1>Forum jQuery</h1>
<div id="conteneur">
<div id="mycarousel" class="jcarousel-skin-tango">
<ul>
<li>
<h3>
<a href="http://danielhagnoul.developpez.com/">Mon Cahier d'exercices</a>
</h3>
<p>
Mon cahier d'exercices sur jQuery & Co
</p>
</li>
<li>
<h3>
<a href="http://danielhagnoul.developpez.com/fondations/bonjour.php">Présentation. Pour qui ?</a>
</h3>
<p>
Mes exercices s’adressent aux personnes qui ont déjà utilisé jQuery et qui cherchent des exemples, des conseils, des composants.
</p>
</li>
<li>
<h3>
<a href="http://danielhagnoul.developpez.com/fondations/cloturer.php">Clôturez jQuery !</a>
</h3>
<p>
Pour un code évolutif. Plus de conflits pour le $. Avec un Javascript omniprésent et des codes de plus en plus complexes, le programmeur se doit de maîtriser les bases du langage, la structuration et la modularisation du code, il se doit d'écrire un code gérable, réutilisable et facilement évolutif.
</p>
</li>
<li>
<h3>
<a href="http://danielhagnoul.developpez.com/fondations/globale.php">Utilisez la fonction globale !</a>
</h3>
<p>
Pollution de l'espace de noms. Un point d'entrée permettant de communiquer avec la clôture. En choisissant de promouvoir la clôture, espace privé, je souhaitai également libérer l'espace de noms "window", or chaque fonction globale ou objet global encombrera un peu plus cet espace de noms. De plus si comme il se doit, votre code est un composant réutilisable, le risque de collisions avec un autre composant du même nom est très élevé.
</p>
</li>
<li>
<h3>
<a href="http://danielhagnoul.developpez.com/fondations/namespace.php">Utilisez un espace de noms !</a>
</h3>
<p>
Génération par la clôture jQuery. Idéalement, votre code ne doit être accessible qu'au travers d'un et d'un seul objet global. Comme notre espace de noms contiendra du code jQuery, nous devons utiliser la clôture jQuery pour générer l’objet global dans l’espace de noms window grâce à l’écriture JSON.
</p>
</li>
<li>
<h3>
<a href="http://danielhagnoul.developpez.com/fondations/evenement.php">Utilisez les événements !</a>
</h3>
<p>
Une queue d’événements. $.proxy(). Les navigateurs internet traitent de manière anarchique les événements JavaScript, mais jQuery s'occupe en interne des particularités de chacun et offre en externe une interface unique. Il possède un système événementiel élaboré, assez facile à appréhender, mais méconnu et sous-exploité.
</p>
</li>
</ul>
</div>
</div>
</body>
</html> |
