IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

création d'une station météo


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Décembre 2007
    Messages
    696
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Développeur .NET

    Informations forums :
    Inscription : Décembre 2007
    Messages : 696
    Par défaut création d'une station météo
    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 ?

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    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>

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre éclairé
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Décembre 2007
    Messages
    696
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Développeur .NET

    Informations forums :
    Inscription : Décembre 2007
    Messages : 696
    Par défaut
    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>

  4. #4
    Membre éclairé
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Décembre 2007
    Messages
    696
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Développeur .NET

    Informations forums :
    Inscription : Décembre 2007
    Messages : 696
    Par défaut
    à 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...

  5. #5
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    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.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  6. #6
    Membre éclairé
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Décembre 2007
    Messages
    696
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Développeur .NET

    Informations forums :
    Inscription : Décembre 2007
    Messages : 696
    Par défaut
    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 ));

  7. #7
    Membre éclairé
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Décembre 2007
    Messages
    696
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Développeur .NET

    Informations forums :
    Inscription : Décembre 2007
    Messages : 696
    Par défaut
    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 ?

  8. #8
    Membre éclairé
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Décembre 2007
    Messages
    696
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Développeur .NET

    Informations forums :
    Inscription : Décembre 2007
    Messages : 696
    Par défaut
    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>

  9. #9
    Membre éclairé
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Décembre 2007
    Messages
    696
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Développeur .NET

    Informations forums :
    Inscription : Décembre 2007
    Messages : 696
    Par défaut
    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

  10. #10
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    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 :

    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>

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  11. #11
    Membre éclairé
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Décembre 2007
    Messages
    696
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Développeur .NET

    Informations forums :
    Inscription : Décembre 2007
    Messages : 696
    Par défaut
    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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 7
    Dernier message: 12/09/2008, 10h36
  2. [amc designer] création d'une base postgresql
    Par david42 dans le forum PostgreSQL
    Réponses: 9
    Dernier message: 12/03/2004, 11h08
  3. Création d'une base avec IbConsole
    Par Lucien dans le forum Outils
    Réponses: 3
    Dernier message: 02/03/2004, 18h34
  4. création d'une batabse .gdb
    Par jejestyle dans le forum Bases de données
    Réponses: 3
    Dernier message: 23/02/2004, 00h29
  5. [BES] Création d'une variable d'environnement
    Par NGI80 dans le forum Autres
    Réponses: 2
    Dernier message: 17/10/2002, 07h31

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo