création d'une station météo [Résolu]

thor76160 · 22/02/2011, 15h41

Bonjour à tous !

dans un post que j'ai ouvert hier, je demandais de l'aide pour du css.
http://www.developpez.net/forums/d10...sous-elements/

à vrai dire j'essai de créer un widget, une station météo. Jusque là j'ai appris à utiliser des widget jquery, mais je n'en ai jamais fait moi-même. il est temps de changer ça !

voici ma maquette en html & css3

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<style>
	#meteo
	{
		position: absolute;
		width: 300px;
		height: 200px;
 
		border-radius: 5px;
 
		font-family: "lucida grande", sans-serif;
		line-height: 1;
	}
 
	.blue_bg
	{
		border: 1px solid #03009C;
 
		background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #6AFBFA), color-stop(0.5, #0088F0), color-stop(0.5, #0078FF), color-stop(1, #03009C));
		-webkit-border-radius: 5px;
		-webkit-box-shadow: inset 0px 0px 0px 1px rgba(0, 34, 84, 0.4), 1px 1px 3px #333;
 
		background: -moz-linear-gradient(0% 100% 90deg, #03009C 0%, #0078FF 50%, #0088F0 50%, #6AFBFA 100%);
		-moz-border-radius: 5px;
		-moz-box-shadow: inset 0px 0px 0px 1px rgba(0, 34, 84, 0.4), 1px 1px 3px #333;
	}
 
	.grey_bg
	{
		border: 1px solid #333736;
 
		background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #BABDBD), color-stop(0.5, #808484), color-stop(0.5, #777979), color-stop(1, #333736));
		-webkit-border-radius: 5px;
		-webkit-box-shadow: inset 0px 0px 0px 1px rgba(100, 100, 100, 0.4), 1px 1px 3px #333;
 
		background: -moz-linear-gradient(0% 100% 90deg, #333736 0%, #777979 50%, #808484 50%, #BABDBD 100%);
		-moz-border-radius: 5px;
		-moz-box-shadow: inset 0px 0px 0px 1px rgba(100, 100, 100, 0.4), 1px 1px 3px #333;
	}
 
	.top
	{
		width: 280px;
		height: 30px;
		padding: 5px 15px 5px 5px;
 
		text-align: right;
	}
 
	.top .date { font-size: 10px; }
	.top .time { font-size: 18px; }
 
	.middle
	{
		width: 290px;
		height: 70px;
		padding: 5px 5px 5px 5px;
	}
 
	.middle .temperature
	{
		float: left;
		width: auto;
		height: 60px;
		padding: 40px 0px 0px 10px;
		font-size: 40px;
	}
 
	.middle .detail
	{
		float: right;
		height: auto;
		padding: 15px 0px 15px 0px;
	}
 
	.middle .detail ul
	{
		list-style-type: none;
		margin: 0px;
		padding: 0px;
 
		font-size: 10px;
	}
 
	.middle .detail .title
	{
		float: left;
		height: 100%;
		padding: 0px 5px 0px 0px;
	}
 
	.middle .detail .data
	{
		float: left;
		height: 100%;
		padding: 0px 10px 0px 0px;
	}
 
	.under
	{
		width: 290px;
		height: 40px;
		padding: 5px 5px 5px 5px;
	}
 
	.under .pager
	{
		float:left;
		height: 25px;
		padding: 15px 0px 0px 0px;
	}
 
	.under .pager button
	{
		width: 70px;
		padding: 2px 0 2px 0;
		background: #c63929;
 
		border-radius: 5px;
 
		opacity: 0.7;
 
		color: #fff;
		font-family: "helvetica neue", helvetica, arial, sans-serif;
		font-size: 10px;
		font-weight: bold;
		letter-spacing: 1px;
		line-height: 1;
		text-align: center;
	}
 
	.under .pager button.blue_button
	{
		border: 1px solid #03009C;;
		text-shadow: 0px -1px 1px rgba(0, 0, 0, .8);
 
		background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #6AFBFA), color-stop(0.5, #0088F0), color-stop(0.5, #0078FF), color-stop(1, #03009C));
		-webkit-border-radius: 5px;
		-webkit-box-shadow: inset 0px 0px 0px 1px rgba(0, 34, 84, 0.4), 1px 1px 3px #333;
 
		background: -moz-linear-gradient(0% 100% 90deg, #03009C 0%, #0078FF 50%, #0088F0 50%, #6AFBFA 100%);
		-moz-border-radius: 5px;
		-moz-box-shadow: inset 0px 0px 0px 1px rgba(0, 34, 84, 0.4), 1px 1px 3px #333;
	}
 
	.under .pager button.grey_button
	{
		text-shadow: 0px -1px 1px rgba(0, 0, 0, .8);
		border: 1px solid #333736;
 
		background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #BABDBD), color-stop(0.5, #808484), color-stop(0.5, #777979), color-stop(1, #333736));
		-webkit-border-radius: 5px;
		-webkit-box-shadow: inset 0px 0px 0px 1px rgba(100, 100, 100, 0.4), 1px 1px 3px #333;
 
		background: -moz-linear-gradient(0% 100% 90deg, #333736 0%, #777979 50%, #808484 50%, #BABDBD 100%);
		-moz-border-radius: 5px;
		-moz-box-shadow: inset 0px 0px 0px 1px rgba(100, 100, 100, 0.4), 1px 1px 3px #333;
	}
 
	.under .pager button:hover
	{
		opacity: 1;
	}
 
	.under .part_day
	{
		float: left;
		width: 90px;
		height: 30px;
		padding: 10px 0px 0px 10px;
	}
 
	.under .part_day a
	{
		float: left;
		cursor: default;
		display: block;
		width: 32px;
		height: 32px;
		text-indent: -9999px;
 
		opacity: 0.7;
	}
 
	.under .part_day a:hover
	{
		float: left;
		cursor: default;
		display: block;
		width: 32px;
		height: 32px;
		text-indent: -9999px;
 
		opacity: 1;
	}
 
	.under .part_day .day
	{
		background-image: url(images/sun-icon.png);
	}
 
	.under .part_day .night
	{
		background-image: url(images/moon-icon.png);
	}
	</style>
</head>
<body>
    <div id="meteo" class="blue_bg">
        <div class="top">
            <div class="date">Lundi 21 Fevrier 2011</div>
            <div class="time">18:56</div>
        </div>
 
        <div class="middle">
            <div class="temperature">8c</div>
 
            <div class="detail">
 
                <div class="title">
                    <ul>
                        <li>Lever du soleil :</li>
                        <li>Coucher du soleil :</li>
                        <li>Vent :</li>
                        <li>&nbsp;- direction :</li>
                        <li>&nbsp;- vitesse :</li>
                        <li>Humidite :</li>
                        <li>Precipitation :</li>
                    </ul>
                </div>
 
                <div class="data">
                    <ul>
                        <li><span class="sunr">7h55</span></li>
                        <li><span class="suns">18h24</span></li>
                        <li>&nbsp;</li>
                        <li><span class="direction">Sud-Est</span></li>
                        <li><span class="vitesse">14 km/h</span></li>
                        <li><span class="hmid">40%</span></li>
                        <li><span class="ppcp">20%</span></li>
                    </ul>
                </div>
            </div>
        </div>
 
        <div class="under">
            <div class="pager">
                <button class="previous_day blue_button">precedent</button>
                <button class="next_day blue_button">suivant</button>
            </div>
 
            <div class="part_day">
                <a href="#" class="day"></a>
                <a href="#" class="night"></a>
            </div>
        </div>
    </div>
</body>
</html>

j'aimerais désormais créer tout ceci par l'intermédiaire de jquery. je dispose de la dernière version de jquery-ui.

voici donc la forme de mon nouveau projet :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
    <link rel="stylesheet" type="text/css" href="css/jquery.ui.meteo.css">
 
    <script type="text/javascript" src="js/jquery-ui-1.8.9.custom/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.9.custom/development-bundle/ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.9.custom/development-bundle/ui/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="js/jquery.ui.meteo.js"></script>
 
	<script type="text/javascript">
	$('#meteo').meteo({
 
	});
	</script>
</head>
<body>
    <div id="meteo"></div>
</body>
</html>

j'ai commencé à écrire le fichier js, mais je ne sais pas quoi faire maintenant.

voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
(function( $, undefined )
{
	$.widget( "ui.meteo",
	{
		options:
		{
			userKey: "",
			delay: 600000,
			displayDetail: true
		},
 
	});
}( jQuery ));

j'aimerai savoir où je pourrais trouver d'excellent tutoriel jquery. jusque là je n'ai trouvé que des tuto sur l'intégration de fonctionnalités...

pourriez-vous m'aider svp ?

danielhagnoul · 22/02/2011, 21h33

Bonsoir

J'ai regardé votre maquette CSS et vos projets de code.

Avant de commencer l'écriture du widget je vous recommande de lire l'introduction de mon article sur la réalisation du widget dvjhPassword http://danielhagnoul.developpez.com/...d/password.php

Concernant la structure de votre page, le chargement de jQuery UI me semble étrange (les interdépendances entre les différents éléments composant UI sont telles qu'il est souvent préférable d'en charger la totalité) et je ne vois pas le chargement des styles CSS pour UI.

Vous devrez certainement faire appel aux widgets de base de UI (Widget bien entendu, mais Core, Mouse, Position, et sans doute Resizable), à moins de vouloir tout réinventer.

Depuis quelques jours je ne charge plus jQuery UI en local, je fais confiance aux serveurs de code, et je vous recommande de tester le code ci-dessous.

J'utilise les CSS UI de la version "humanity", pour en changer il suffit de modifier le lien.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/humanity/jquery-ui.css">

Les valeurs disponibles sont : base, black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast, pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, et vader.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/humanity/jquery-ui.css">	
	<style>
		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; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
		color:#000000; border:1px solid #666666; }
 
		/* METEO */
        #meteo {
            position: relative; /* absolute */
            width: 300px;
            height: 200px;
            border-radius: 5px;
            font-family: "lucida grande", sans-serif;
            line-height: 1;
            margin:6px;
        }
        .blue_bg {
            border: 1px solid #03009C;
            background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #6AFBFA), color-stop(0.5, #0088F0), color-stop(0.5, #0078FF), color-stop(1, #03009C));
            -webkit-border-radius: 5px;
            -webkit-box-shadow: inset 0px 0px 0px 1px rgba(0, 34, 84, 0.4), 1px 1px 3px #333;
            background: -moz-linear-gradient(0% 100% 90deg, #03009C 0%, #0078FF 50%, #0088F0 50%, #6AFBFA 100%);
            -moz-border-radius: 5px;
            -moz-box-shadow: inset 0px 0px 0px 1px rgba(0, 34, 84, 0.4), 1px 1px 3px #333;
        }
    	.grey_bg {
            border: 1px solid #333736;
            background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #BABDBD), color-stop(0.5, #808484), color-stop(0.5, #777979), color-stop(1, #333736));
            -webkit-border-radius: 5px;
            -webkit-box-shadow: inset 0px 0px 0px 1px rgba(100, 100, 100, 0.4), 1px 1px 3px #333;
            background: -moz-linear-gradient(0% 100% 90deg, #333736 0%, #777979 50%, #808484 50%, #BABDBD 100%);
            -moz-border-radius: 5px;
            -moz-box-shadow: inset 0px 0px 0px 1px rgba(100, 100, 100, 0.4), 1px 1px 3px #333;
        }
        .top {
            width: 280px;
            height: 30px;
            padding: 5px 15px 5px 5px;
            text-align: right;
        }
        .top .date {
            font-size: 10px;
        }
        .top .time {
            font-size: 18px;
        }
        .middle {
            width: 290px;
            height: 70px;
            padding: 5px 5px 5px 5px;
        }
        .middle .temperature {
            float: left;
            width: auto;
            height: 60px;
            padding: 40px 0px 0px 10px;
            font-size: 40px;
        }
        .middle .detail {
            float: right;
            height: auto;
            padding: 15px 0px 15px 0px;
        }
        .middle .detail ul {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
            font-size: 10px;
        }
        .middle .detail .title {
            float: left;
            height: 100%;
            padding: 0px 5px 0px 0px;
        }
        .middle .detail .data {
            float: left;
            height: 100%;
            padding: 0px 10px 0px 0px;
        }
        .under {
            width: 290px;
            height: 40px;
            padding: 5px 5px 5px 5px;
        }
        .under .pager {
            float:left;
            height: 25px;
            padding: 15px 0px 0px 0px;
        }
        .under .pager button {
            width: 70px;
            padding: 2px 0 2px 0;
            background: #c63929;
            border-radius: 5px;
            opacity: 0.7;
            color: #fff;
            font-family: "helvetica neue", helvetica, arial, sans-serif;
            font-size: 10px;
            font-weight: bold;
            letter-spacing: 1px;
            line-height: 1;
            text-align: center;
        }
        .under .pager button.blue_button {
            border: 1px solid #03009C;;
            text-shadow: 0px -1px 1px rgba(0, 0, 0, .8);
            background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #6AFBFA), color-stop(0.5, #0088F0), color-stop(0.5, #0078FF), color-stop(1, #03009C));
            -webkit-border-radius: 5px;
            -webkit-box-shadow: inset 0px 0px 0px 1px rgba(0, 34, 84, 0.4), 1px 1px 3px #333;
            background: -moz-linear-gradient(0% 100% 90deg, #03009C 0%, #0078FF 50%, #0088F0 50%, #6AFBFA 100%);
            -moz-border-radius: 5px;
            -moz-box-shadow: inset 0px 0px 0px 1px rgba(0, 34, 84, 0.4), 1px 1px 3px #333;
        }
        .under .pager button.grey_button {
            text-shadow: 0px -1px 1px rgba(0, 0, 0, .8);
            border: 1px solid #333736;
            background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #BABDBD), color-stop(0.5, #808484), color-stop(0.5, #777979), color-stop(1, #333736));
            -webkit-border-radius: 5px;
            -webkit-box-shadow: inset 0px 0px 0px 1px rgba(100, 100, 100, 0.4), 1px 1px 3px #333;
            background: -moz-linear-gradient(0% 100% 90deg, #333736 0%, #777979 50%, #808484 50%, #BABDBD 100%);
            -moz-border-radius: 5px;
            -moz-box-shadow: inset 0px 0px 0px 1px rgba(100, 100, 100, 0.4), 1px 1px 3px #333;
        }
        .under .pager button:hover {
            opacity: 1;
        }
        .under .part_day {
            float: left;
            width: 90px;
            height: 30px;
            padding: 10px 0px 0px 10px;
        }
        .under .part_day a {
            float: left;
            cursor: default;
            display: block;
            width: 32px;
            height: 32px;
            text-indent: -9999px;
            opacity: 0.7;
        }
        .under .part_day a:hover {
            float: left;
            cursor: default;
            display: block;
            width: 32px;
            height: 32px;
            text-indent: -9999px;
            opacity: 1;
        }
        .under .part_day .day {
            background-image: url(images/sun-icon.png);
        }
        .under .part_day .night {
            background-image: url(images/moon-icon.png);
        }
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
        <!--
        <div id="meteo" class="blue_bg">
            <div class="top">
                <div class="date">Lundi 21 Fevrier 2011</div>
                <div class="time">18:56</div>
            </div>
            <div class="middle">
                <div class="temperature">8c</div>
                <div class="detail">
                    <div class="title">
                        <ul>
                            <li>Lever du soleil :</li>
                            <li>Coucher du soleil :</li>
                            <li>Vent :</li>
                            <li>&nbsp;- direction :</li>
                            <li>&nbsp;- vitesse :</li>
                            <li>Humidite :</li>
                            <li>Precipitation :</li>
                        </ul>
                    </div>
                    <div class="data">
                        <ul>
                            <li><span class="sunr">7h55</span></li>
                            <li><span class="suns">18h24</span></li>
                            <li>&nbsp;</li>
                            <li><span class="direction">Sud-Est</span></li>
                            <li><span class="vitesse">14 km/h</span></li>
                            <li><span class="hmid">40%</span></li>
                            <li><span class="ppcp">20%</span></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="under">
                <div class="pager">
                    <button class="previous_day blue_button">precedent</button>
                    <button class="next_day blue_button">suivant</button>
                </div>
                <div class="part_day">
                    <a href="#" class="day"></a>
                    <a href="#" class="night"></a>
                </div>
            </div>
        </div>
        -->
        <div id="meteo" class="blue_bg"></div>
    </div>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
	<script>
		$(function(){
            //$('#meteo').meteo({});
		});
	</script>
</body>
</html>

thor76160 · 22/02/2011, 21h47

merci je vais jetter un oeil à votre page

je n'ai pas utilisé le css de jquery car je ne sais pas ce qu'il peut m'apporter.

en attendant, voici une nouvelle version de mon code html et css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<style>
	.meteo-ui
	{
        position: absolute;
		width: 300px;
		height: 200px;
 
		font-family: "lucida grande", sans-serif;
		line-height: 1;
 
		border-radius: 5px;
	}
 
    .meteo-ui-blue_bg
    {
        border: 1px solid #03009C;
 
		background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #6AFBFA), color-stop(0.5, #0088F0), color-stop(0.5, #0078FF), color-stop(1, #03009C));
		-webkit-border-radius: 5px;
		-webkit-box-shadow: inset 0px 0px 0px 1px rgba(0, 34, 84, 0.4), 1px 1px 3px #333;
 
		background: -moz-linear-gradient(0% 100% 90deg, #03009C 0%, #0078FF 50%, #0088F0 50%, #6AFBFA 100%);
		-moz-border-radius: 5px;
		-moz-box-shadow: inset 0px 0px 0px 1px rgba(0, 34, 84, 0.4), 1px 1px 3px #333;
    }
 
	.meteo-ui-grey_bg
	{
		border: 1px solid #333736;
 
		background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #BABDBD), color-stop(0.5, #808484), color-stop(0.5, #777979), color-stop(1, #333736));
		-webkit-border-radius: 5px;
		-webkit-box-shadow: inset 0px 0px 0px 1px rgba(100, 100, 100, 0.4), 1px 1px 3px #333;
 
		background: -moz-linear-gradient(0% 100% 90deg, #333736 0%, #777979 50%, #808484 50%, #BABDBD 100%);
		-moz-border-radius: 5px;
		-moz-box-shadow: inset 0px 0px 0px 1px rgba(100, 100, 100, 0.4), 1px 1px 3px #333;
	}
 
    .meteo-ui-infos
    {
        float: left;
    }
 
	.meteo-ui-top
	{
		width: 255px;
		height: 30px;
        padding: 5px 15px 5px 5px;
 
        text-align: right;
	}
 
    .meteo-ui-top .meteo-ui-date { font-size: 10px; }
    .meteo-ui-top .meteo-ui-time { font-size: 18px; }
 
	.meteo-ui-middle
	{
		width: 275px;
		height: 110px;
	}
 
	.meteo-ui-middle .meteo-ui-temperature
	{
		float: left;
        width: 50px;
		height: 70px;
		padding: 40px 0px 0px 10px;
		font-size: 40px;
	}
 
	.meteo-ui-middle .meteo-ui-detail
	{
		float: right;
		width: auto;
		height: 80px;
		padding: 15px 0px 15px 0px;
	}
 
	.meteo-ui-middle .meteo-ui-detail ul
	{
        list-style-type: none;
		margin: 0px;
		padding: 0px;
 
		font-size: 10px;
	}
 
	.meteo-ui-middle .meteo-ui-detail .meteo-ui-title
	{
        float: left;
		height: 100%;
		padding: 0px 5px 0px 0px;
	}
 
	.meteo-ui-middle .meteo-ui-detail .meteo-ui-data
	{
        float: left;
		height: 100%;
		padding: 0px 10px 0px 0px;
	}
 
	.meteo-ui-under
	{
		width: 275px;
		height: 50px;
	}
 
	.meteo-ui-under .meteo-ui-pager
	{
		float:left;
        width: 145px;
		height: 40px;
		padding: 10px 0px 0px 10px;
	}
 
	.meteo-ui-under .meteo-ui-pager button
	{
		width: 70px;
		padding: 2px 0 2px 0;
 
		background: #c63929;
		border-radius: 5px;
		opacity: 0.7;
 
		color: #fff;
		font-family: "helvetica neue", helvetica, arial, sans-serif;
		font-size: 10px;
		font-weight: bold;
		letter-spacing: 1px;
		line-height: 1;
		text-align: center;
	}
 
	.meteo-ui-under .meteo-ui-pager button.meteo-ui-blue_button
	{
		border: 1px solid #03009C;;
		text-shadow: 0px -1px 1px rgba(0, 0, 0, .8);
 
		background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #6AFBFA), color-stop(0.5, #0088F0), color-stop(0.5, #0078FF), color-stop(1, #03009C));
		-webkit-border-radius: 5px;
		-webkit-box-shadow: inset 0px 0px 0px 1px rgba(0, 34, 84, 0.4), 1px 1px 3px #333;
 
		background: -moz-linear-gradient(0% 100% 90deg, #03009C 0%, #0078FF 50%, #0088F0 50%, #6AFBFA 100%);
		-moz-border-radius: 5px;
		-moz-box-shadow: inset 0px 0px 0px 1px rgba(0, 34, 84, 0.4), 1px 1px 3px #333;
	}
 
	.meteo-ui-under .meteo-ui-pager button.meteo-ui-grey_button
	{
		border: 1px solid #333736;
		text-shadow: 0px -1px 1px rgba(0, 0, 0, .8);
 
		background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #BABDBD), color-stop(0.5, #808484), color-stop(0.5, #777979), color-stop(1, #333736));
		-webkit-border-radius: 5px;
		-webkit-box-shadow: inset 0px 0px 0px 1px rgba(100, 100, 100, 0.4), 1px 1px 3px #333;
 
		background: -moz-linear-gradient(0% 100% 90deg, #333736 0%, #777979 50%, #808484 50%, #BABDBD 100%);
		-moz-border-radius: 5px;
		-moz-box-shadow: inset 0px 0px 0px 1px rgba(100, 100, 100, 0.4), 1px 1px 3px #333;
	}
 
	.meteo-ui-under .meteo-ui-pager button:hover
	{
		opacity: 1;
	}
 
	.meteo-ui-under .meteo-ui-part_day
	{
		float: left;
		width: 120px;
		height: 50px;
	}
 
	.meteo-ui-under .meteo-ui-part_day a
	{
		float: left;
		cursor: default;
		display: block;
		width: 32px;
		height: 32px;
		text-indent: -9999px;
 
		opacity: 0.7;
	}
 
	.meteo-ui-under .meteo-ui-part_day a:hover
	{
		opacity: 1;
	}
 
	.meteo-ui-under .meteo-ui-part_day .meteo-ui-day
	{
		background-image: url(images/sun-icon.png);
	}
 
	.meteo-ui-under .meteo-ui-part_day .meteo-ui-night
	{
		background-image: url(images/moon-icon.png);
	}
 
    .meteo-ui-settings
    {
        float: right;
        width: 25px;
		height: 50px;
 
        padding: 50px 0px 50px 0px;
    }
 
    .meteo-ui-settings button
    {
        float: right;
		width: 20px;
		height: 100px;
 
        background: #c63929;
		border-radius: 5px;
		opacity: 0.7;
    }
 
	.meteo-ui-settings button.meteo-ui-blue_button
	{
		border: 1px solid #03009C;
		text-shadow: 0px -1px 1px rgba(0, 0, 0, .8);
 
		background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #6AFBFA), color-stop(0.5, #0088F0), color-stop(0.5, #0078FF), color-stop(1, #03009C));
		-webkit-border-radius: 5px;
		-webkit-box-shadow: inset 0px 0px 0px 1px rgba(0, 34, 84, 0.4), 1px 1px 3px #333;
 
		background: -moz-linear-gradient(0% 100% 90deg, #03009C 0%, #0078FF 50%, #0088F0 50%, #6AFBFA 100%);
		-moz-border-radius: 5px;
		-moz-box-shadow: inset 0px 0px 0px 1px rgba(0, 34, 84, 0.4), 1px 1px 3px #333;
	}
 
	.meteo-ui-settings button.meteo-ui-grey_button
	{
		border: 1px solid #333736;
		text-shadow: 0px -1px 1px rgba(0, 0, 0, .8);
 
		background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #BABDBD), color-stop(0.5, #808484), color-stop(0.5, #777979), color-stop(1, #333736));
		-webkit-border-radius: 5px;
		-webkit-box-shadow: inset 0px 0px 0px 1px rgba(100, 100, 100, 0.4), 1px 1px 3px #333;
 
		background: -moz-linear-gradient(0% 100% 90deg, #333736 0%, #777979 50%, #808484 50%, #BABDBD 100%);
		-moz-border-radius: 5px;
		-moz-box-shadow: inset 0px 0px 0px 1px rgba(100, 100, 100, 0.4), 1px 1px 3px #333;
	}
 
    .meteo-ui-settings button:hover
    {
		opacity: 1;
    }
	</style>
</head>
<body>
    <div class="meteo-ui meteo-ui-blue_bg">
        <div class="meteo-ui-infos">
            <div class="meteo-ui-top">
                <div class="meteo-ui-date">Lundi 21 Fevrier 2011</div>
                <div class="meteo-ui-time">18:56</div>
            </div>
 
            <div class="meteo-ui-middle">
                <div class="meteo-ui-temperature">8°c</div>
 
                <div class="meteo-ui-detail">
                    <div class="meteo-ui-title">
                        <ul>
                            <li>Lever du soleil :</li>
                            <li>Coucher du soleil :</li>
                            <li>Vent :</li>
                            <li>&nbsp;- direction :</li>
                            <li>&nbsp;- vitesse :</li>
                            <li>Humidite :</li>
                            <li>Precipitation :</li>
                        </ul>
                    </div>
 
                    <div class="meteo-ui-data">
                        <ul>
                            <li><span class="sunr">7h55</span></li>
                            <li><span class="suns">18h24</span></li>
                            <li>&nbsp;</li>
                            <li><span class="direction">Sud-Est</span></li>
                            <li><span class="vitesse">14 km/h</span></li>
                            <li><span class="hmid">40%</span></li>
                            <li><span class="ppcp">20%</span></li>
                        </ul>
                    </div>
                </div>
            </div>
 
            <div class="meteo-ui-under">
                <div class="meteo-ui-pager">
                    <button class="meteo-ui-previous_da meteo-ui-blue_button">precedent</button>
                    <button class="meteo-ui-next_day meteo-ui-blue_button">suivant</button>
                </div>
 
                <div class="meteo-ui-part_day">
                    <a href="#" class="meteo-ui-day"></a>
                    <a href="#" class="meteo-ui-night"></a>
                </div>
            </div>
        </div>
 
        <div class="meteo-ui-settings">
            <button class="meteo-ui-settings_button meteo-ui-blue_button">&rang;&rang;</button>
        </div>
    </div>
</body>
</html>

thor76160 · 22/02/2011, 22h05

à propos de la première ligne de ton code js.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$.widget("ui.dvjhPassword", $.ui.dialog,

pourquoi avoir mis $.ui.dialog ?
dialog est un widget existant en jqueryui, on peut donc appeler d'autre widget de cette manière ? et dans quel but ?
j'ai vraiment beaucoup à apprendre en matière de création de plugin en jquery. à commencer par la structure ! et le css jquery, que je ne connais pas.

partons du principe que je ne sais rien de rien ^^

EDIT :
pour les fichiers js à appeler. je compte utiliser l'effet SLIDE mis en démonstration dans cette page : http://jqueryui.com/demos/show/.
afin de faire apparaitre une fenetre d'options, sur l'évènement clic du bouton à droite de ma fenêtre (voir la nouvelle version de mon code).

et peut-etre l'effet highlight, lors d'une mise à jour de mes données météo.

je ne compte plus rendre mon plugin resizable, ni amovible...

danielhagnoul · 22/02/2011, 22h12

J'ai parlé de l'introduction et des liens qu'elle contient.

Là, on rentre dans le code de mon widget qui est bâti sur $.ui.dialog. Ce n'est donc pas intéressant pour vous, sauf si voulez également baser votre widget sur $.ui.dialog.

thor76160 · 23/02/2011, 13h03

j'ai donc commencé la lecture du tutoriel.
je me heurte malheureusement à 2 difficultés.

1 - je n'arrive pas à créer un div à l'intérieur de mon div 'mon_div'. j'ai utilisé la méthode append() je jquery, sans résultat.
2 - la fonction _checkNetworkConnection ne renvoi que false, hors si je copie son contenu dans le _create, elle fonctionne correctement O_o.

mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
(function( $, undefined )
{
    $.widget("ui.meteo", {
 
        options: {
            delay: 10, // minute
            userId: '',
            userKey: ''
        },
 
        _create: function() {
            var obj = this,
                opt = obj.options;
 
            // convert to thousand of seconds
            opt.delay = (opt.delay * (60 * 1000));
 
            // création du bloc global
            // class :  - meteo-ui
            //          - meteo-ui-blue_bg
            /*
            $(obj).
            */
 
            // check the network connexion
            // if connected, build the template
            // else, display a error report
            if(obj._checkNetworkConnection(opt.delay))
            {
                alert('success');
            }
            else
            {
                alert('failure');
            }
        },
 
        _checkNetworkConnection: function(time) {
            $.ajax({
                type: 'GET',
                url: 'http://www.google.fr',
                success: function(data)
                {
                    return true;
                },
                error: function(XMLHttpRequest, textStatus, errorThrown)
                {
                    //setTimeout('obj._checkNetworkConnection()', time);
                    return false;
                }
            });
        },
 
        destroy: function() {
            $.Widget.prototype.destroy.apply(this, arguments);
        }
    });
}( jQuery ));

danielhagnoul · 23/02/2011, 22h42

Bonsoir

Comme exemple, regardez mon widget, je construis un formulaire et je l'ajoute avec append. Et, comme le dit la doc du Widget, this est l'objet widget et this.element est l'élément du DOM. Donc, this.element.append(...);

Point deux, c'est logique, l'objet this n'existe pas encore à ce stade. Je vous conseille de mettre dans _create tout ce qui est nécessaire à la construction du widget.

thor76160 · 24/02/2011, 12h39

bonjour,
j'ai beaucoup avancé dans mon projet. j'ai réussi à créer une partie de ma structure.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
(function( $, undefined )
{
    $.widget("ui.meteo", {
 
        options: {
            delay: 10, // minute
            userId: '',
            userKey: '',
            language: ''
        },
 
        regional: {
            'fr': {
                previousDay: 'PrÃ©cÃ©dent',
                nextDay: 'Suivant',
                dateFormat: '%A, %B %e, %Y',
                details: {
                    'sunr':'Lever du soleil',
                    'suns':'Coucher du soleil',
                    'wind':'Vent',
                    'direction':'direction',
                    'speed':'vitesse',
                    'hmid':'HumiditÃ©',
                    'ppcp':'PrÃ©cipitation'
                },
                unit: {
                    '':'metric',
                    '':'km'
                },
                cardinalDirection: {
                    'N':'Nord',
                    'NE':'Nord-Est',
                    'E':'Est',
                    'SE':'Sud-Est',
                    'S':'Sud',
                    'SW':'Sud-ouest',
                    'W':'Ouest',
                    'NW':'Nord-ouest'
                }
            }
        },
 
        isInitialized: false,
 
        time: {
            date: '',
            hour: ''
        },
 
        _create: function() {
            var obj = this,
                el = obj.element,
                opt = obj.options;
 
            // convert to thousand of seconds
            opt.delay = (opt.delay * (60 * 1000));
 
            // create the global block
            var container = $(el).add('<div></div>')
                                    .addClass('meteo-ui')
                                    .addClass('meteo-ui-blue_bg');
 
            // check the network connexion
            // if connected, build the template
            // else, display a error report
            obj._createStructure(container);
        },
 
        /*_checkNetworkConnection: function() {
            var obj = this,
                el = obj.element,
                opt = obj.options;
 
            $.ajax({
                type: 'GET',
                url: 'http://www.google.fr',
                success: function(data)
                {
                    if(!opt.isInitialized)
                    {
                        obj._initMeteo();
                    }
                    else
                    {
                        obj._updateDatas();
                    }
 
                },
                error: function(XMLHttpRequest, textStatus, errorThrown)
                {
                    obj._displayErrorReport();
                }
            });
 
            //setTimeout( function() {obj._checkNetworkConnection()}, opt.delay);
        },*/
 
        _createStructure: function(container)
        {
            var obj = this,
                el = obj.element,
                opt = obj.options;
 
            // create the full block
            var infos = $(el).find('meteo-ui').add('<div></div>').appendTo(container).addClass('meteo-ui-infos');
 
            // the top
            var top = $(el).find('meteo-ui-infos').add('<div></div>').appendTo(infos).addClass('meteo-ui-top');
            var date = $(el).find('meteo-ui-top').add('<div></div>').appendTo(top).addClass('meteo-ui-date');
            var time = $(el).find('meteo-ui-top').add('<div></div>').appendTo(top).addClass('meteo-ui-time');
 
            // the middle
            var middle = $(el).find('meteo-ui-infos').add('<div></div>').appendTo(infos).addClass('meteo-ui-middle');
            var temperature = $(el).find('meteo-ui-middle').add('<div></div>').appendTo(middle).addClass('meteo-ui-temperature');
            var detail = $(el).find('meteo-ui-middle').add('<div></div>').appendTo(middle).addClass('meteo-ui-detail');
            var title = $(el).find('meteo-ui-detail').add('<div></div>').appendTo(detail).addClass('meteo-ui-title');
            var ul_title = $(el).find('meteo-ui-title').add('<ul></ul>').appendTo(title);
            $.each(obj.regional[opt.language].details, function(class_title, title)
            {
                $(el).find('meteo-ui-title ul').add('<li>' + title + '</li>').appendTo(ul_title);
            });
            var data = $(el).find('meteo-ui-detail').add('<div></div>').appendTo(detail).addClass('meteo-ui-data');
            var ul_data = $(el).find('meteo-ui-data').add('<ul></ul>').appendTo(data);
            $.each(obj.regional[opt.language].details, function(class_title, title)
            {
                $(el).find('meteo-ui-data ul').add('<li></li>').addClass(class_title).appendTo(ul_data);
            });
 
            // the under
            var under = $(el).find('meteo-ui-infos').add('<div></div>').appendTo(infos).addClass('meteo-ui-under');
            var pager = $(el).find('meteo-ui-under').add('<div></div>').appendTo(under).addClass('meteo-ui-pager');
            var button_previous_day = $(el).find('meteo-ui-pager').add('<button></button>').appendTo(pager).addClass('meteo-ui-previous_day').addClass('meteo-ui-blue_button');
            var button_next_day = $(el).find('meteo-ui-pager').add('<button></button>').appendTo(pager).addClass('meteo-ui-next_day').addClass('meteo-ui-blue_button');
            var part_day = $(el).find('meteo-ui-under').add('<div></div>').appendTo(under).addClass('meteo-ui-part_day');
            var day = $(el).find('meteo-ui-part_day').add('<a></a>').appendTo(part_day).addClass('meteo-ui-day');
            var night = $(el).find('meteo-ui-part_day').add('<a></a>').appendTo(part_day).addClass('meteo-ui-night');
 
            // the settings access button
            var access_settings = $(el).find('meteo-ui').add('<div></div>').appendTo(container).addClass('meteo-ui-settings');
            var button_access_settings = $(el).find('meteo-ui').add('<button></button>').appendTo(access_settings).addClass('meteo-ui-settings_button').addClass('meteo-ui-blue_button');
        },
 
        _displayErrorReport: function()
        {
 
        },
 
        _updateDatas: function()
        {
 
        },
 
        _getDateTime: function()
        {
 
        },
 
        destroy: function() {
            $.Widget.prototype.destroy.apply(this, arguments);
        }
    });
}( jQuery ));

comme vous le voyez, la variable container est passée en paramètre dans la fonction _createStructure.
j'aimerais la retirer des paramètres de la fonction, comment puis-je faire pour l'appeler autrement ?

thor76160 · 25/02/2011, 13h12

voila j'ai bien avancé, mais des choses restent à mettre en ordre.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
(function( $, undefined )
{
    $.widget("ui.meteo", {
 
        options: {
            nb_days: 1,
            delay: 10, // minute
            userId: '',
            userKey: '',
            language: 'fr'
        },
 
        regional: {
            'fr': {
                previousDay: 'PrÃ©cÃ©dent',
                nextDay: 'Suivant',
                date: {
                    monthNames: ['Janvier','FÃ©vrier','Mars','Avril','Mai','Juin','Juillet','AoÃ¹t','Septembre','Octobre','Novembre','DÃ©cembre'],
                    dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
                    dateFormat: 'j n m y',
                    timeSeparator: 'h'
                },
                details: {
                    'sunr':'Lever du soleil',
                    'suns':'Coucher du soleil',
                    'wind':'Vent',
                    'direction':' - direction',
                    'speed':' - vitesse',
                    'hmid':'HumiditÃ©',
                    'ppcp':'PrÃ©cipitation'
                },
                unit: 'm',
                cardinalDirection: {
                    'N':'Nord',
                    'NE':'Nord-Est',
                    'E':'Est',
                    'SE':'Sud-Est',
                    'S':'Sud',
                    'SW':'Sud-ouest',
                    'W':'Ouest',
                    'NW':'Nord-ouest'
                },
                language: [
                    {'en':'Anglais'},
                    {'esp':'Espagnol'},
                    {'fr':'Français'}
                ],
                country: [
                    {'fr':'France'},
                    {'uk':'United Kingdom'}
                ],
                error: {
                    'userAccountNull':'Identifiant et clÃ© de connexion inconnus',
                    'networkConnection':'Connexion internet impossible',
                    'userAccount':'Identifiant et clÃ© de connexion incorrects'
                }
            }
        },
 
        city: {
            'fr': [
                {code:'FRXX0085', name:'Rouen'},
                {code:'', name:''}
            ]
        },
 
        datetime: {
            date: '',
            time: '',
            formatedDate: '',
            formatedTime: ''
        },
 
        isInitialized: false,
        isNetworkConnectionActive: false,
        xmlData: '',
 
        _create: function() {
            var obj = this,
                el = obj.element,
                opt = obj.options;
 
            // convert to thousand of seconds
            opt.delay = (opt.delay * (60 * 1000));
 
            // create the global block
            obj._mainStructure();
 
            // if userId && userKey aren't null, try to continue
            // else, display the error
            if(opt.userId != '' && opt.userKey != '')
            {
                // check the network connexion
                // if connected, build the template
                // else, display a error report
                obj._checkNetworkConnection();
            }
            else
            {
                obj._displayErrorReport();
            }
        },
 
        _mainStructure: function()
        {
            var obj = this,
                el = obj.element,
                opt = obj.options;
 
            return $(el).add('<div></div>')
                        .addClass('meteo-ui')
                        .addClass('meteo-ui-blue_bg');
        },
 
        _checkNetworkConnection: function()
        {
            var obj = this,
                el = obj.element,
                opt = obj.options;
 
            $.ajax({
                type: 'GET',
                url: 'http://www.google.fr',
                success: function(data)
                {
                    opt.isNetworkConnectionActive = true;
 
                    // try to load the xml data
                    // if succed, create the structure OR update datas
                    // else, display the error
                    obj._loadXML();
                    if(opt.xmlData != '')
                    {
                        if(!opt.isInitialized)
                        {
                            obj._createStructure();
                        }
                        else
                        {
                            obj._updateData();
                        }
                    }
                    else
                    {
                        obj._displayErrorReport();
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown)
                {
                    opt.isNetworkConnectionActive = false;
                    obj._displayErrorReport();
                }
            });
 
            // checking and update data every X minutes
            //setTimeout( function() {obj._checkNetworkConnection()}, opt.delay);
        },
 
        _loadXML: function()
        {
 
        },
 
        _createStructure: function()
        {
            var obj = this,
                el = obj.element,
                opt = obj.options,
                regional = obj.regional[opt.language],
                container = obj._mainStructure();
 
            // create the date and time
            var datetime = obj._getTimestamp();
            obj.date.date = datetime.date;
            obj.date.time = datetime.time;
 
            // create the full block
            var infos = $(el).find('meteo-ui').add('<div></div>').appendTo(container).addClass('meteo-ui-infos');
 
            // the top
            var top = $(el).find('meteo-ui-infos').add('<div></div>').appendTo(infos).addClass('meteo-ui-top');
            $(el).find('meteo-ui-top').add('<div></div>').appendTo(top).addClass('meteo-ui-date');
            $(el).find('meteo-ui-top').add('<div></div>').appendTo(top).addClass('meteo-ui-time');
 
            // the middle
            var middle = $(el).find('meteo-ui-infos').add('<div></div>').appendTo(infos).addClass('meteo-ui-middle');
            $(el).find('meteo-ui-middle').add('<div></div>').appendTo(middle).addClass('meteo-ui-temperature');
            var detail = $(el).find('meteo-ui-middle').add('<div></div>').appendTo(middle).addClass('meteo-ui-detail');
            var title = $(el).find('meteo-ui-detail').add('<div></div>').appendTo(detail).addClass('meteo-ui-title');
            var ul_title = $(el).find('meteo-ui-title').add('<ul></ul>').appendTo(title);
            $.each(obj.regional[opt.language].details, function(class_title, title)
            {
                $(el).find('meteo-ui-title ul').add('<li>' + title + ' :</li>').appendTo(ul_title);
            });
            var data = $(el).find('meteo-ui-detail').add('<div></div>').appendTo(detail).addClass('meteo-ui-data');
            var ul_data = $(el).find('meteo-ui-data').add('<ul></ul>').appendTo(data);
            $.each(obj.regional[opt.language].details, function(class_title, title)
            {
                $(el).find('meteo-ui-data ul').add('<li></li>').addClass(class_title).appendTo(ul_data);
            });
 
            // the under
            var under = $(el).find('meteo-ui-infos').add('<div></div>').appendTo(infos).addClass('meteo-ui-under');
            var pager = $(el).find('meteo-ui-under').add('<div></div>').appendTo(under).addClass('meteo-ui-pager');
            $(el).find('meteo-ui-pager').add('<button>' + regional.previousDay + '</button>').appendTo(pager).addClass('meteo-ui-previous_day').addClass('meteo-ui-blue_button');
            $(el).find('meteo-ui-pager').add('<button>' + regional.nextDay + '</button>').appendTo(pager).addClass('meteo-ui-next_day').addClass('meteo-ui-blue_button');
            var part_day = $(el).find('meteo-ui-under').add('<div></div>').appendTo(under).addClass('meteo-ui-part_day');
            $(el).find('meteo-ui-part_day').add('<a href="javascript:void(null);"></a>').appendTo(part_day).addClass('meteo-ui-day');
            $(el).find('meteo-ui-part_day').add('<a href="javascript:void(null);"></a>').appendTo(part_day).addClass('meteo-ui-night');
 
            // the settings access button
            var access_settings = $(el).find('meteo-ui').add('<div></div>').appendTo(container).addClass('meteo-ui-settings');
            $(el).find('meteo-ui').add('<button>&rang;&rang;</button>').appendTo(access_settings).addClass('meteo-ui-settings_button').addClass('meteo-ui-blue_button');
 
            // actions click on buttons
            // select previous day
            $('.meteo-ui-previous_day').click(function(){
 
            });
            // select next day
            $('.meteo-ui-next_day').click(function(){
 
            });
            // select day part
            $('.meteo-ui-day').click(function(){
 
            });
            // select night part
            $('.meteo-ui-night').click(function(){
 
            });
            // select settings button
            $('.meteo-ui-settings_button').click(function(){
 
            });
 
            // updating the data
            obj._getDatetimeStringByLanguage();
            obj._updateData();
        },
 
        _updateData: function()
        {
 
        },
 
        _displayErrorReport: function()
        {
            var obj = this,
                el = obj.element,
                opt = obj.options,
                container = obj._mainStructure(),
                regional = obj.regional[opt.language],
                msgError = '';
 
            // let check the userId && userKey
            if(opt.userId == '' || opt.userKey == '')
            {
                msgError = regional.error['userAccountNull'];
            }
            else
            {
                // if the network connection of good
                if(opt.isNetworkConnectionActive)
                {
                    // if the xml is not uploaded
                    if(opt.xmlData == '')
                    {
                        msgError = regional.error['userAccount'];
                    }
                }
                else
                {
                    msgError = regional.error['networkConnection'];
                }
            }
 
            // display the error report
            if(msgError != '')
            {
                $(el).find('meteo-ui').add('<div>' + msgError + '</div>').appendTo(container).addClass('meteo-ui-error');
            }
        },
 
        _getTimestamp: function()
        {
            var today = '',
                timeToday = '',
                dateToday = '';
 
            today = new Date();
            timeToday = (today.getHours() * 60 * 60) + (today.getMinutes() * 60) + today.getSeconds();
            dateToday = today.getTime() - timeToday;
 
            return {date: dateToday, time: timeToday};
        },
 
        _getDatetimeStringByLanguage: function()
        {
            var obj = this,
                opt = obj.options,
                datetime = '',
                todayDate = '',
                todayTime = '',
                date_string = '',
                regional = regional = obj.regional[opt.language],
                dateFormat = new Array();
 
            // create the date and time
            datetime = obj._getTimestamp();
 
            // if it's a new day
            if(obj.datetime.date >  datetime.date)
            {
                todayDate = new Date(datetime.date);
                date_string = '';
                dateFormat = (regional.date.dateFormat).split(' ');
 
                $.each(dateFormat, function(i, type)
                {
                    switch (type)
                    {
                        case 'j':
                            date_string = date_string + ' ' + regional.date.dayNames[todayDate.getDay()];
                        break;
 
                        case ',':
                            date_string = date_string + ',';
                        break;
 
                        case 'm':
                            date_string = date_string + ' ' + regional.date.monthNames[todayDate.getMonth()];
                        break;
 
                        case 'n':
                            date_string = date_string + ' ' + todayDate.getDate();
                        break;
 
                        case 'y':
                            date_string = date_string + ' ' + todayDate.getFullYear();
                        break;
                    }
                });
 
                // update the json date AND the date element
                obj.datetime.date = date_string;
                $('.meteo-ui-date').html(obj.datetime.time);
            }
 
            todayTime = new Date(datetime.time);
            obj.datetime.time = todayTime.getHours() + regional.date.timeSeparator + todayTime.getMinutes() + ':' + todayTime.getSeconds();
            $('.meteo-ui-time').html(obj.datetime.time);
 
            setTimeout( function() {obj._getDatetimeStringByLanguage()}, 1000);
        },
 
        destroy: function()
        {
            $.Widget.prototype.destroy.apply(this, arguments);
        }
    });
}( jQuery ));

j'aimerais vraiment savoir comment je peux utiliser mon container de façon propre, svp aidez-moi.
autre chose, j'aimerais faire apparaître un div sur l'évenement click du bouton à droite. comment intégrer cette partie dans mon code html ?
il ne fait pas partie du bloc central 'meteo-ui'.
il doit apparaître avec un effet de glissement...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<div class="meteo-ui_settings_menu">
        <div class="meteo-ui-country">
            <label for="language">Choisissez une langue :</label>
            <select name="language">
                <option value="en">Anglais</option>
                <option value="esp">Espagnol</option>
                <option value="fr">Français</option>
            </select>
        </div>
 
        <div class="meteo-ui-country">
            <label for="country">Choisissez un pays :</label>
            <select name="country">
                <option value="france">france</option>
                <option value="USA">usa</option>
            </select>
        </div>
 
        <div class="meteo-ui-city">
            <label for="city">Choisissez une ville :</label>
            <input type="text" name="city" value="">
        </div>
 
        <div class="meteo-ui-default">
            <label for="default">Valeur par défaut :</label>
            <input type="checkbox" name="default" checked>
        </div>
 
        <button class="meteo-ui-settings_menu_button">ok</button>
    </div>

thor76160 · 25/02/2011, 16h05

j'ai réussi à constuire mon html plus simplement !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
$(el).add('<div></div>')
                        .addClass('meteo-ui')
                        .addClass('meteo-ui-blue_bg');
 
            $('.meteo-ui').append('<div class="meteo-ui-infos"></div>');
 
            // the top
            $('.meteo-ui-infos').append('<div class="meteo-ui-top"></div>');
            $('.meteo-ui-top').append('<div class="meteo-ui-date"></div>');
            $('.meteo-ui-top').append('<div class="meteo-ui-time"></div>');
 
            // the middle
            $('.meteo-ui-infos').append('<div class="meteo-ui-middle"></div>');
            $('.meteo-ui-middle').append('<div class="meteo-ui-temperature"></div>');
            $('.meteo-ui-middle').append('<div class="meteo-ui-detail"></div>');
            $('.meteo-ui-detail').append('<div class="meteo-ui-title"></div>');
            $('.meteo-ui-title').append('<ul></ul>');
            $.each(regional.details, function(class_title, title)
            {
                $('.meteo-ui-title ul').append('<li>' + title + ' :</li>');
            });
 
            $('.meteo-ui-detail').append('<div class="meteo-ui-data"></div>');
            $('.meteo-ui-data').append('<ul></ul>');
            $.each(regional.details, function(class_title, title)
            {
                $('.meteo-ui-data ul').append('<li class="' + class_title + '"></li>');
            });
 
            // the under
            $('.meteo-ui-infos').append('<div class="meteo-ui-under"></div>');
            $('.meteo-ui-under').append('<div class="meteo-ui-pager"></div>');
            $('.meteo-ui-pager').append('<button class="meteo-ui-previous_day meteo-ui-blue_button">' + regional.previousDay + '</button>');
            $('.meteo-ui-pager').append('<button class="meteo-ui-next_day meteo-ui-blue_button">' + regional.nextDay + '</button>');
            $('.meteo-ui-under').append('<div class="meteo-ui-part_day"></div>');
            $('.meteo-ui-part_day').append('<a href="javascript:void(null);" class="meteo-ui-day"></a>');
            $('.meteo-ui-part_day').append('<a href="javascript:void(null);" class="meteo-ui-night"></a>');
 
            // the settings access button
            $('.meteo-ui').append('<div class="meteo-ui-settings"></div>');
            $('.meteo-ui-settings').append('<button class="meteo-ui-settings_button meteo-ui-blue_button">&rang;&rang;</button>');

je m'étais pris la tête xD

danielhagnoul · 26/02/2011, 19h24

Bonsoir

Je vois que vous avez continué le travail, c'est bien ! Mais j'en suis toujours au message n°*9 et aux questions posées :

Citation:

j'aimerais vraiment savoir comment je peux utiliser mon container de façon propre, svp aidez-moi.
autre chose, j'aimerais faire apparaître un div sur l'évenement click du bouton à droite. comment intégrer cette partie dans mon code html ?
il ne fait pas partie du bloc central 'meteo-ui'.
il doit apparaître avec un effet de glissement...

Malgré un emploi du temps fort chargé, j'ai pris deux heures pour regarder votre code et voir si je pouvais encore vous aider.

J'ai d'abord essayé de reprendre votre code, mais je m'y perds et je ne comprends pas la logique suivie. Pour construire un widget, j'utilise la manière mise en oeuvre dans le widget donné en exemple, simplement parce que sauf erreur de ma part c'est la bonne manière pour construire un widget en y intégrant les options et les événements.

Je suis donc parti de l'exemple de votre maquette et de vos styles pour construire à ma manière un exemple qui répond à vos questions.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/humanity/jquery-ui.css">	
	<style>
		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; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
		color:#000000; border:1px solid #666666; }
 
		/* METEO */
        .meteo-ui
        {
            position:absolute;
            top:12px;
            left:12px;
            width: 300px;
            height: 200px;
            font-family: "lucida grande", sans-serif;
            line-height: 1;
            border-radius: 5px;
            z-index:9999;
        }
        .meteo-ui-hidden {
            position:absolute;
            top:12px;
            left:12px;
            width: 300px;
            height: 200px;
            font-family: "lucida grande", sans-serif;
            line-height: 1;
            border-radius: 5px;
            overflow:hidden;
            z-index:9998;
        }
        .meteo-ui-blue_bg
        {
            border: 1px solid #03009C;
            background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #6AFBFA), color-stop(0.5, #0088F0), color-stop(0.5, #0078FF), color-stop(1, #03009C));
            -webkit-border-radius: 5px;
            -webkit-box-shadow: inset 0px 0px 0px 1px rgba(0, 34, 84, 0.4), 1px 1px 3px #333;
            background: -moz-linear-gradient(0% 100% 90deg, #03009C 0%, #0078FF 50%, #0088F0 50%, #6AFBFA 100%);
            -moz-border-radius: 5px;
            -moz-box-shadow: inset 0px 0px 0px 1px rgba(0, 34, 84, 0.4), 1px 1px 3px #333;
        }
        .meteo-ui-grey_bg
        {
            border: 1px solid #333736;
            background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #BABDBD), color-stop(0.5, #808484), color-stop(0.5, #777979), color-stop(1, #333736));
            -webkit-border-radius: 5px;
            -webkit-box-shadow: inset 0px 0px 0px 1px rgba(100, 100, 100, 0.4), 1px 1px 3px #333;
            background: -moz-linear-gradient(0% 100% 90deg, #333736 0%, #777979 50%, #808484 50%, #BABDBD 100%);
            -moz-border-radius: 5px;
            -moz-box-shadow: inset 0px 0px 0px 1px rgba(100, 100, 100, 0.4), 1px 1px 3px #333;
        }
        .meteo-ui-infos
        {
            float: left;
        }
        .meteo-ui-top
        {
            width: 255px;
            height: 30px;
            padding: 5px 15px 5px 5px;
            text-align: right;
        }
        .meteo-ui-top .meteo-ui-date { font-size: 10px; }
        .meteo-ui-top .meteo-ui-time { font-size: 18px; }
        .meteo-ui-middle
        {
            width: 275px;
            height: 110px;
        }
        .meteo-ui-middle .meteo-ui-temperature
        {
            float: left;
            width: 50px;
            height: 70px;
            padding: 40px 0px 0px 10px;
            font-size: 40px;
        }
        .meteo-ui-middle .meteo-ui-detail
        {
            float: right;
            width: auto;
            height: 80px;
            padding: 15px 0px 15px 0px;
        }
        .meteo-ui-middle .meteo-ui-detail ul
        {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
            font-size: 10px;
        }
        .meteo-ui-middle .meteo-ui-detail .meteo-ui-title
        {
            float: left;
            height: 100%;
            padding: 0px 5px 0px 0px;
        }
        .meteo-ui-middle .meteo-ui-detail .meteo-ui-data
        {
            float: left;
            height: 100%;
            padding: 0px 10px 0px 0px;
        }
        .meteo-ui-under
        {
            width: 275px;
            height: 50px;
        }
        .meteo-ui-under .meteo-ui-pager
        {
            float:left;
            width: 145px;
            height: 40px;
            padding: 10px 0px 0px 10px;
        }
        .meteo-ui-under .meteo-ui-pager button
        {
            width: 70px;
            padding: 2px 0 2px 0;
            background: #c63929;
            border-radius: 5px;
            opacity: 0.7;
            color: #fff;
            font-family: "helvetica neue", helvetica, arial, sans-serif;
            font-size: 10px;
            font-weight: bold;
            letter-spacing: 1px;
            line-height: 1;
            text-align: center;
        }
        .meteo-ui-under .meteo-ui-pager button.meteo-ui-blue_button
        {
            border: 1px solid #03009C;;
            text-shadow: 0px -1px 1px rgba(0, 0, 0, .8);
            background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #6AFBFA), color-stop(0.5, #0088F0), color-stop(0.5, #0078FF), color-stop(1, #03009C));
            -webkit-border-radius: 5px;
            -webkit-box-shadow: inset 0px 0px 0px 1px rgba(0, 34, 84, 0.4), 1px 1px 3px #333;
            background: -moz-linear-gradient(0% 100% 90deg, #03009C 0%, #0078FF 50%, #0088F0 50%, #6AFBFA 100%);
            -moz-border-radius: 5px;
            -moz-box-shadow: inset 0px 0px 0px 1px rgba(0, 34, 84, 0.4), 1px 1px 3px #333;
        }
        .meteo-ui-under .meteo-ui-pager button.meteo-ui-grey_button
        {
            border: 1px solid #333736;
            text-shadow: 0px -1px 1px rgba(0, 0, 0, .8);
            background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #BABDBD), color-stop(0.5, #808484), color-stop(0.5, #777979), color-stop(1, #333736));
            -webkit-border-radius: 5px;
            -webkit-box-shadow: inset 0px 0px 0px 1px rgba(100, 100, 100, 0.4), 1px 1px 3px #333;
            background: -moz-linear-gradient(0% 100% 90deg, #333736 0%, #777979 50%, #808484 50%, #BABDBD 100%);
            -moz-border-radius: 5px;
            -moz-box-shadow: inset 0px 0px 0px 1px rgba(100, 100, 100, 0.4), 1px 1px 3px #333;
        }
        .meteo-ui-under .meteo-ui-pager button:hover
        {
            opacity: 1;
        }
        .meteo-ui-under .meteo-ui-part_day
        {
            float: left;
            width: 120px;
            height: 50px;
        }
        .meteo-ui-under .meteo-ui-part_day a
        {
            float: left;
            cursor: default;
            display: block;
            width: 32px;
            height: 32px;
            text-indent: -9999px;
            opacity: 0.7;
        }
        .meteo-ui-under .meteo-ui-part_day a:hover
        {
            opacity: 1;
        }
        .meteo-ui-under .meteo-ui-part_day .meteo-ui-day
        {
            background-image: url(images/sun-icon.png);
        }
        .meteo-ui-under .meteo-ui-part_day .meteo-ui-night
        {
            background-image: url(images/moon-icon.png);
        }
        .meteo-ui-settings
        {
            float: right;
            width: 25px;
            height: 50px;
            padding: 50px 0px 50px 0px;
        }
        .meteo-ui-settings button
        {
            float: right;
            width: 20px;
            height: 100px;
            background: #c63929;
            border-radius: 5px;
            opacity: 0.7;
        }
        .meteo-ui-settings button.meteo-ui-blue_button
        {
            border: 1px solid #03009C;
            text-shadow: 0px -1px 1px rgba(0, 0, 0, .8);
            background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #6AFBFA), color-stop(0.5, #0088F0), color-stop(0.5, #0078FF), color-stop(1, #03009C));
            -webkit-border-radius: 5px;
            -webkit-box-shadow: inset 0px 0px 0px 1px rgba(0, 34, 84, 0.4), 1px 1px 3px #333;
            background: -moz-linear-gradient(0% 100% 90deg, #03009C 0%, #0078FF 50%, #0088F0 50%, #6AFBFA 100%);
            -moz-border-radius: 5px;
            -moz-box-shadow: inset 0px 0px 0px 1px rgba(0, 34, 84, 0.4), 1px 1px 3px #333;
        }
        .meteo-ui-settings button.meteo-ui-grey_button
        {
            border: 1px solid #333736;
            text-shadow: 0px -1px 1px rgba(0, 0, 0, .8);
            background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #BABDBD), color-stop(0.5, #808484), color-stop(0.5, #777979), color-stop(1, #333736));
            -webkit-border-radius: 5px;
            -webkit-box-shadow: inset 0px 0px 0px 1px rgba(100, 100, 100, 0.4), 1px 1px 3px #333;
            background: -moz-linear-gradient(0% 100% 90deg, #333736 0%, #777979 50%, #808484 50%, #BABDBD 100%);
            -moz-border-radius: 5px;
            -moz-box-shadow: inset 0px 0px 0px 1px rgba(100, 100, 100, 0.4), 1px 1px 3px #333;
        }
        .meteo-ui-settings button:hover
        {
            opacity: 1;
        }
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
        <div id="meteo"></div>
		<p>
			Vestibulum ac nisl sit amet odio lobortis pellentesque. Quisque eu nisl. In ipsum metus, congue in, porta non, luctus ac, dolor. Ut suscipit, metus id blandit scelerisque, dolor nunc varius velit, sit amet feugiat magna neque ut lorem. Ut ut lacus. Curabitur eget magna iaculis tellus pulvinar sagittis. Maecenas eget urna. Nunc scelerisque, justo ultricies luctus consectetur, enim ante aliquam urna, sed ullamcorper quam orci nec arcu. Sed volutpat ligula quis elit. Donec vitae neque vel ipsum ultricies accumsan. Aenean imperdiet tincidunt augue. Morbi elementum metus a dui. Nunc non turpis. Maecenas vel odio non justo bibendum varius. Morbi tincidunt orci et purus. Duis mattis ullamcorper odio.
		</p>
		<p>
			Quisque laoreet libero ac mi pellentesque aliquet. Phasellus at est. In consectetur urna vel leo. Nulla est arcu, posuere quis, tempor vel, rutrum vel, neque. Quisque non enim eu ipsum tincidunt iaculis. Sed vehicula consequat felis. Nulla scelerisque. Curabitur sem erat, cursus nec, eleifend et, accumsan in, ipsum. Suspendisse mauris urna, aliquet id, facilisis lacinia, vehicula vitae, est. Curabitur ac ante nec felis hendrerit scelerisque. Morbi felis neque, venenatis mollis, dignissim ut, faucibus sed, ipsum. Nullam bibendum enim vel nulla eleifend elementum. Fusce rhoncus augue. Duis in est nec nulla dictum vehicula. Nulla consequat, leo in commodo venenatis, sapien eros accumsan velit, tempus tincidunt mauris sem et mi. Nulla nisl.
		</p>
		<p>
			Aliquam erat volutpat. Sed sagittis leo et elit. Vivamus blandit venenatis nisl. Fusce lectus. Curabitur venenatis magna vel est. Sed enim turpis, luctus ut, convallis at, rhoncus at, purus. Fusce congue tempor tellus. Suspendisse sit amet nisl. Donec congue orci nec augue. Aliquam egestas venenatis mi. Ut elit velit, imperdiet fermentum, ullamcorper vitae, tincidunt facilisis, diam. Mauris vitae erat.
		</p>
 
    </div>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
	<script>
        (function($){
            $.widget("ui.meteo", {
                _options: {
                    // les options privées
                    Auteur: "Hagnoul Daniel (http://www.developpez.net/forums/u285162/danielhagnoul/)",
                    Copyright: "Creative Commons License Attribution-Share Alike 2.0 Belgium (http://creativecommons.org/licenses/by-sa/2.0/be/legalcode.fr)",
                    boolPair: false
                },
                options: {
                    // les options publiques
                    temperature: "8°c"
                },
                _create: function(){
                    var self = this;
 
                    this.objBtnSettings = $("<button/>", {
                        "class":"meteo-ui-settings_button meteo-ui-blue_button",
                        "text":'>>',
                        "click":$.proxy(this._btnSettingsClickEventHandler, this)
                    });
 
                    this.objDivSettings = $("<div/>", {
                        "class":"meteo-ui-settings",
                        "html":''
                    }).append(this.objBtnSettings);
 
                    this.objBtnPrevious = $("<button/>", {
                       "class":"meteo-ui-previous_da meteo-ui-blue_button",
                       "text":'Précédent',
                       "click":$.proxy(this._btnPreviousClickEventHandler, this)
                    });
 
                    this.objBtnNext = $("<button/>", {
                       "class":"meteo-ui-next_day meteo-ui-blue_button",
                       "text":'Suivant',
                       "click":$.proxy(this._btnNextClickEventHandler, this)
                    });
 
                    this.objDivPager = $("<div/>", {
                        "class":"meteo-ui-pager",
                        "html":''
                    }).append(this.objBtnPrevious, this.objBtnNext);
 
                    this.objDivPartDay = $("<div/>", {
                        "class":"meteo-ui-part_day",
                        "html":'<a href="#" class="meteo-ui-day"></a><a href="#" class="meteo-ui-night"></a>'
                    });
 
                    this.objDivUnder = $("<div/>", {
                        "class":"meteo-ui-under",
                        "html":''
                    }).append(this.objDivPager, this.objDivPartDay);
 
                    this.objDivData = $("<div/>", {
                        "class":"meteo-ui-data",
                        "html":'<ul><li><span class="sunr">7h55</span></li><li><span class="suns">18h24</span></li><li>&nbsp;</li><li><span class="direction">Sud-Est</span></li><li><span class="vitesse">14 km/h</span></li><li><span class="hmid">40%</span></li><li><span class="ppcp">20%</span></li></ul>'
                    });
 
                    this.objDivTitle = $("<div/>", {
                        "class":"meteo-ui-title",
                        "html":'<ul><li>Lever du soleil :</li><li>Coucher du soleil :</li><li>Vent :</li><li>&nbsp;- direction :</li><li>&nbsp;- vitesse :</li><li>Humidite :</li><li>Precipitation :</li></ul>'
                    });
 
                    this.objDivTemperature = $("<div/>", {
                        "class":"meteo-ui-temperature",
                        "html":self.options.temperature
                    });
 
                    this.objDivDetail = $("<div/>", {
                        "class":"meteo-ui-detail",
                        "html":''
                    }).append(this.objDivTitle, this.objDivData);
 
                    this.objDivMiddle = $("<div/>", {
                        "class":"meteo-ui-middle",
                        "html":''
                    }).append(this.objDivTemperature, this.objDivDetail);
 
                    this.objDivTop = $("<div/>", {
                        "class":"meteo-ui-top",
                        "html":'<div class="meteo-ui-date">Lundi 21 Fevrier 2011</div><div class="meteo-ui-time">18:56</div>'
                    });
 
                    this.objDivInfos = $("<div/>", {
                        "class":"meteo-ui-infos",
                        "html":''
                    }).append(this.objDivTop, this.objDivMiddle, this.objDivUnder);
 
                    this.objDivHidden = $("<div/>", {
                        "class":"meteo-ui-hidden meteo-ui-blue_bg",
                        "html":'<p>Un mot pour remplir</p>'
                    });
 
                    this.objDivMeteo = $("<div/>", {
                        "class":"meteo-ui meteo-ui-blue_bg",
                        "html":''
                    }).append(this.objDivInfos, this.objDivSettings);
 
                    this.element.append(this.objDivHidden, this.objDivMeteo);
                },
                destroy: function(){
                    this.objDivHidden.remove();
                    this.objDivMeteo.remove();
 
                    $.Widget.prototype.destroy.apply(this, arguments);
                },
                _btnSettingsClickEventHandler: function(event){
                    console.log(this, event.target, new Date(event.timeStamp).toLocaleString());
 
                    // effet slideToggle horizontal
                    if (!this._options.boolPair){
                        this._options.boolPair = true;
                        this.objDivHidden.animate({"left":"312px"},800);
 
                        // pour test
                        this.objDivTemperature.css("color","red");
                    } else {
                        this._options.boolPair = false;
                        this.objDivHidden.animate({"left":"12px"},800);
 
                        // pour test
                        this.objDivTemperature.css("color","blue");
                    }
                },
                _btnPreviousClickEventHandler: function(event){
                    // pour test
                    console.log(this, event.target, new Date(event.timeStamp).toLocaleString());
                },
                _btnNextClickEventHandler: function(event){
                    // pour test
                    console.log(this, event.target, new Date(event.timeStamp).toLocaleString());
                }
           });
        })(jQuery);
 
 		$(function(){
            $("#meteo").meteo({
                "temperature": "-12°c"
            });
		});
	</script>
</body>
</html>

thor76160 · 28/02/2011, 13h54

merci pour votre réponse et d'avoir consacré un peu de temps pour moi, je vais étudier vote code dès ce soir !!

j'ai aussi pas mal avancé de mon coté !
dans l'immédiat, je dois créer une base en postgresql pour générer des json online (pour alimenter des listes déroulantes dans le futur menu des options).

je mettrais à disposition la dernière version de mon projet ce soir !

merci beaucoup

thor76160 · 25/03/2011, 10h52

ce projet est en pause pour raison personnelle, mais je le reprendrais plus tard !

merci pour l'aide que vous m'avez apporté !

22/02/2011, 22h12	#5
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	J'ai parlé de l'introduction et des liens qu'elle contient. Là, on rentre dans le code de mon widget qui est bâti sur $.ui.dialog. Ce n'est donc pas intéressant pour vous, sauf si voulez également baser votre widget sur $.ui.dialog. __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

22/02/2011, 22h05	#4
thor76160 Membre habitué Inscription : décembre 2007 Messages : 579 Détails du profil Informations personnelles : Localisation : France, Seine Maritime (Haute Normandie) Informations forums : Inscription : décembre 2007 Messages : 579 Points : 114 Points : 114	à propos de la première ligne de ton code js. Code : Sélectionner tout - Visualiser dans une fenêtre à part $.widget("ui.dvjhPassword", $.ui.dialog, pourquoi avoir mis $.ui.dialog ? dialog est un widget existant en jqueryui, on peut donc appeler d'autre widget de cette manière ? et dans quel but ? j'ai vraiment beaucoup à apprendre en matière de création de plugin en jquery. à commencer par la structure ! et le css jquery, que je ne connais pas. partons du principe que je ne sais rien de rien ^^ EDIT : pour les fichiers js à appeler. je compte utiliser l'effet SLIDE mis en démonstration dans cette page : http://jqueryui.com/demos/show/. afin de faire apparaitre une fenetre d'options, sur l'évènement clic du bouton à droite de ma fenêtre (voir la nouvelle version de mon code). et peut-etre l'effet highlight, lors d'une mise à jour de mes données météo. je ne compte plus rendre mon plugin resizable, ni amovible...
	00

23/02/2011, 22h42	#7
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	Bonsoir Comme exemple, regardez mon widget, je construis un formulaire et je l'ajoute avec append. Et, comme le dit la doc du Widget, this est l'objet widget et this.element est l'élément du DOM. Donc, this.element.append(...); Point deux, c'est logique, l'objet this n'existe pas encore à ce stade. Je vous conseille de mettre dans _create tout ce qui est nécessaire à la construction du widget. __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

28/02/2011, 13h54	#12
thor76160 Membre habitué Inscription : décembre 2007 Messages : 579 Détails du profil Informations personnelles : Localisation : France, Seine Maritime (Haute Normandie) Informations forums : Inscription : décembre 2007 Messages : 579 Points : 114 Points : 114	merci pour votre réponse et d'avoir consacré un peu de temps pour moi, je vais étudier vote code dès ce soir !! j'ai aussi pas mal avancé de mon coté ! dans l'immédiat, je dois créer une base en postgresql pour générer des json online (pour alimenter des listes déroulantes dans le futur menu des options). je mettrais à disposition la dernière version de mon projet ce soir ! merci beaucoup
	00

25/03/2011, 10h52	#13
thor76160 Membre habitué Inscription : décembre 2007 Messages : 579 Détails du profil Informations personnelles : Localisation : France, Seine Maritime (Haute Normandie) Informations forums : Inscription : décembre 2007 Messages : 579 Points : 114 Points : 114	ce projet est en pause pour raison personnelle, mais je le reprendrais plus tard ! merci pour l'aide que vous m'avez apporté !
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email