jquery ui et super fish bug?

**Mika2008** · 20/08/2009, 16h09

Bonjour, j'ai utilisé super fish, et maintenant j'utilise en même tps jquery UI
et je me sers du datePicker jquery Ui
(qui est super au passage)
mais qui ne marhe pas avec super fish en même tps :'(

voila mon code :
DAns mon head je met :

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
 
 
      <link rel="stylesheet" type="text/css" href="./css/design_site.css" media="screen">
                <link type="text/css" href="./css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
 
                  <!-- autocompletion -->
                        <link rel="stylesheet" type="text/css" href="./css/autocompletion/styleRPC.css" media="screen">
                            <!--  fin autocompletion -->
 
 
 
                <script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script>
                <script type="text/javascript" src="./js/jquery-ui-1.7.2.custom.min.js"></script>
 
 
                    <!-- Debut menu -->
                    <link rel="stylesheet" type="text/css" href="./css/menu/superfish.css" media="screen">
                    <script type="text/javascript" src="./js/menu/hoverIntent.js"></script>
                    <script type="text/javascript" src="./js/menu/superfish.js"></script>
                    <!-- fin menu -->

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
le script du menu :


	
	Code  :
	Sélectionner tout -
	Visualiser dans une fenêtre à part
	123456789 <
script type="text/javascript">
 
 
    // initialise plugins
    jQuery(function(){
        jQuery('ul.sf-menu').superfish();
    });
</script>

ensuite j'affiche mon menu :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<ul class="sf-menu">
 
			<li class="current">
				<a href="#a">menu item</a>
				<ul>
					<li>
						<a href="#aa">menu item that is quite long</a>
...
		</ul>

ensuite je déclare mon champ avec le date picker :

Code :

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

1
2
3
4
5
6
7
 
<script type="text/javascript">
    // Datepicker
    $('#date_saisie').datepicker({
        inline: true
    });
</script>

et je déclare mon input avec mon datepicker :

Code :

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

1
2
3
   <br>
                <label for="date_saisie">Date de saisie : </label><input value="<?php echo date('Y-m-d'); ?>" type="text" class="text" id="date_saisie"  name="date_saisie"   />
                <br><br>

Sous firefox la page s'affiche avec le menu qui marche mais pas de datepicker qui marche (firebug ne détecte aucune erreur)
et sous ie la page ce chargea moitié et s' arretté au niveau du premier script de déclaration de l'id de l'input qui sert de datepicker.

sous ie sa plante au niveau du script

Code :

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

1
2
3
  // Datepicker
    $('#date_saisie').datepicker({
        inline: true

mais il n 'y a aucun message d'erreur.

quelqu'un saurait comment débugger se problème?

merci d'avance

**danielhagnoul** · 20/08/2009, 18h59

Bonsoir.

Code :

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

1
2
3
4
5
6
7
8
9
10
 
    <script type="text/javascript">
        $(document).ready(function(){
            $('ul.sf-menu').superfish();
 
            $('#date_saisie').datepicker({
        inline: true
            });
        });
    </script>

Attention, dans le head il faut déclarer les styles avant les scripts.

**Mika2008** · 20/08/2009, 23h12

merci de ta réponse,
j'ai tourné dans tout les sens, mias ça veut rien savoir

voila ma page complet te :

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
 
<?php include ('include/include_files.php'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <title>AEROPILOT - école de pilotage d'avions</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
 
                <link rel="stylesheet" type="text/css" href="./css/design_site.css" media="screen">
 
 
                  <!-- autocompletion -->
                        <link rel="stylesheet" type="text/css" href="./css/autocompletion/styleRPC.css" media="screen">
                            <!--  fin autocompletion -->
    		<link rel="stylesheet" type="text/css" href="./css/menu/superfish.css" media="screen">
 
		<script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="/js/jquery-ui-1.7.2.custom.min.js"></script>
			<script type="text/javascript" src="js/hoverIntent.js"></script>
		<script type="text/javascript" src="js/superfish.js"></script>
 
 
         <!-- autocompletion produit -->
        <script type="text/javascript">
 
            function arrondir(resultat) {
                resultat = Math.round(resultat*100)/1000;
                return resultat;
            }
 
            function lookupProduit(inputString) {
                if(inputString.length == 0) {
                    // Hide the suggestion box.
                    $('#suggestionsProduit').hide();
                } else {
                    $.post("rpc_produits.php", {queryString: ""+inputString+""}, function(data){
                        if(data.length >0) {
                            $('#suggestionsProduit').show();
                            $('#autoSuggestionsListProduit').html(data);
                        }
                    });
                }
            } // lookup
 
            function fillProduit(thisValue,id_client,nomProd,tpsVol,tpsBrief,tps_theo,ht,tva) {
                $('#inputStringProduit').val(thisValue);
                $('#valeurProduit').val(id_client);
                $('#nomProd').val(nomProd);
                $('#tpsVol').val(tpsVol);
                $('#tpsBrief').val(tpsBrief);
                $('#tps_Theo').val(tps_theo);
                $('#ht').val(ht);
                $('#tva').val(tva);
 
 
 
 
                setTimeout("$('#suggestionsProduit').hide();", 200);
            }
 
 
        </script>
        <!-- Fin autocompletion produit -->
 
 
<script type="text/javascript">
    // Datepicker
    $('#date_saisie').datepicker({
        inline: true
    });
</script>
 
  </head>
                    <body>
...
 
 
 
<?php include('include/menu.php'); ?>
...
 
<br>
                <label for="date_saisie">Date de saisie : </label><input value="<?php echo date('Y-m-d'); ?>" type="text" class="text" id="date_saisie"  name="date_saisie"   />
                <br><br>
...

par contre dans firebug, il me point la ligne :

Code :

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

1
2
 $('#date_saisie').datepicker({
        inline: true

et il me dit is not a function

je n'utilise pourtant pas un autre framwork :'(

**danielhagnoul** · 21/08/2009, 00h17

Bonsoir.

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
 
<script type="text/javascript">
    function arrondir(resultat) {
            resultat = Math.round(resultat*100)/1000;
            return resultat;
    }
 
    $(document).ready(function(){
 
        function lookupProduit(inputString) {
                if(inputString.length == 0) {
                        // Hide the suggestion box.
                        $('#suggestionsProduit').hide();
                } else {
                        $.post("rpc_produits.php", {queryString: ""+inputString+""}, function(data){
                                if(data.length >0) {
                                        $('#suggestionsProduit').show();
                                        $('#autoSuggestionsListProduit').html(data);
                                }
                        });
                }
        } // lookup
 
        function fillProduit(thisValue,id_client,nomProd,tpsVol,tpsBrief,tps_theo,ht,tva) {
                $('#inputStringProduit').val(thisValue);
                $('#valeurProduit').val(id_client);
                $('#nomProd').val(nomProd);
                $('#tpsVol').val(tpsVol);
                $('#tpsBrief').val(tpsBrief);
                $('#tps_Theo').val(tps_theo);
                $('#ht').val(ht);
                $('#tva').val(tva);
 
                setTimeout("$('#suggestionsProduit').hide();", 200);
        }
 
    // Datepicker
    $('#date_saisie').datepicker({
        inline: true
    });
 
 });
</script>

**Mika2008** · 21/08/2009, 14h35

sa marche
merci beaucoup !!!

une autre petite question qui concerne date picker dans un dialogue

j'ai repris l'exemple du site pour le dialog,:
c'est la page 'exemple ou on créer un nouvelle utilisateur avec un formulaire das une boite de dialogue,
j'ai rajotuer un date picker dans cette boit de dialogue, mais le datepicker apparait dans le fond et il n'est pas visible, tu saurais comment le faire apparaitre devant ?

voila le 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
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
<!doctype html>
<html lang="en">
<head>
	<title>jQuery UI Dialog - Modal form</title>
			<link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
	<link type="text/css" href="../demos.css" rel="stylesheet" />
 
	<style type="text/css">
		body { font-size: 62.5%; }
		label, input { display:block; }
		input.text { margin-bottom:12px; width:95%; padding: .4em; }
		fieldset { padding:0; border:0; margin-top:25px; }
		h1 { font-size: 1.2em; margin: .6em 0; }
		div#users-contain {  width: 350px; margin: 20px 0; }
		div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
		div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
		.ui-button { outline: 0; margin:0; padding: .4em 1em .5em; text-decoration:none;  !important; cursor:pointer; position: relative; text-align: center; }
		.ui-dialog .ui-state-highlight, .ui-dialog .ui-state-error { padding: .3em;  }
 
 
	</style>
	<script type="text/javascript">
	$(function() {
 
		var name = $("#name"),
			email = $("#email"),
			password = $("#password"),
			allFields = $([]).add(name).add(email).add(password),
			tips = $("#validateTips");
 
		function updateTips(t) {
			tips.text(t).effect("highlight",{},1500);
		}
 
		function checkLength(o,n,min,max) {
 
			if ( o.val().length > max || o.val().length < min ) {
				o.addClass('ui-state-error');
				updateTips("Length of " + n + " must be between "+min+" and "+max+".");
				return false;
			} else {
				return true;
			}
 
		}
 
		function checkRegexp(o,regexp,n) {
 
			if ( !( regexp.test( o.val() ) ) ) {
				o.addClass('ui-state-error');
				updateTips(n);
				return false;
			} else {
				return true;
			}
 
		}
 
		$("#dialog").dialog({
			bgiframe: true,
			autoOpen: false,
			height: 300,
			modal: true,
			buttons: {
				'Create an account': function() {
					var bValid = true;
					allFields.removeClass('ui-state-error');
 
					bValid = bValid && checkLength(name,"username",3,16);
					bValid = bValid && checkLength(email,"email",6,80);
					bValid = bValid && checkLength(password,"password",5,16);
 
					bValid = bValid && checkRegexp(name,/^[a-z]([0-9a-z_])+$/i,"Username may consist of a-z, 0-9, underscores, begin with a letter.");
					// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
					bValid = bValid && checkRegexp(email,/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i,"eg. ui@jquery.com");
					bValid = bValid && checkRegexp(password,/^([0-9a-zA-Z])+$/,"Password field only allow : a-z 0-9");
 
					if (bValid) {
						$('#users tbody').append('<tr>' +
							'<td>' + name.val() + '</td>' + 
							'<td>' + email.val() + '</td>' + 
							'<td>' + password.val() + '</td>' +
							'</tr>'); 
						$(this).dialog('close');
					}
				},
				Cancel: function() {
					$(this).dialog('close');
				}
			},
			close: function() {
				allFields.val('').removeClass('ui-state-error');
			}
		});
 
 
 
		$('#create-user').click(function() {
			$('#dialog').dialog('open');
		})
		.hover(
			function(){ 
				$(this).addClass("ui-state-hover"); 
			},
			function(){ 
				$(this).removeClass("ui-state-hover"); 
			}
		).mousedown(function(){
			$(this).addClass("ui-state-active"); 
		})
		.mouseup(function(){
				$(this).removeClass("ui-state-active");
		});
 
	});
	</script>
 
	   <script type="text/javascript">
        $(document).ready(function(){
 
 
            $('#date').datepicker({
        inline: true
            });
        });
    </script>
 
 
</head>
<body>
 
<div class="demo">
 
<div id="dialog" title="Create new user">
	<p id="validateTips">All form fields are required.</p>
 
	<form>
 
	<fieldset>
		<label for="name">Name</label>
		<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
		<label for="email">Email</label>
		<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
		<label for="password">Password</label>
		<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
				<label for="date">Date</label>
		<input type="text" name="date" id="date" class="text ui-widget-content ui-corner-all" />
 
	</fieldset>
	</form>
</div>
 
 
<div id="users-contain" class="ui-widget">
 
		<h1>Existing Users:</h1>
 
 
	<table id="users" class="ui-widget ui-widget-content">
		<thead>
 
			<tr class="ui-widget-header ">
				<th>Name</th>
				<th>Email</th>
				<th>Password</th>
			</tr>
		</thead>
		<tbody>
 
			<tr>
				<td>John Doe</td>
				<td>john.doe@example.com</td>
				<td>johndoe1</td>
			</tr>
		</tbody>
	</table>
 
</div>
<button id="create-user" class="ui-button ui-state-default ui-corner-all">Create new user</button>
 
</div><!-- End demo -->
 
<div class="demo-description">
 
<p>Use a modal dialog to require that the user enter data during a multi-step process.  Embed form markup in the content area, set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p>
 
</div><!-- End demo-description -->
 
</body>
</html>

edit :
voila ce que ça fait :

edit :
comme c'est un autre probléme je cloture ce topic et j'en ouvre un autre

**danielhagnoul** · 21/08/2009, 22h57

Bonsoir Mika2008.

La nécessité d'un nouveau post après m'avoir posé la question et sans attendre 24 h une réponse m'échappe totalement.

C'était un problème de z-index. Mais la solution n'était pas triviale.
Il n'existe pas d'option inline pour le datepicker.

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
 
<!doctype html>
<html lang="en">
<head>
    <title>jQuery UI Dialog - Modal form</title>
 
    <!-- A MODIFIER : pour le test j'ai du changer ce lien vers ma version de 1.7.2 -->
    <link rel="stylesheet" type="text/css" href="../lib/humanity/jquery-ui-1.7.2.custom.css"  />
 
    <style type="text/css">
        body {
            font-size: 62.5%;
        }
        label, input {
            display:block;
        }
        input.text {
            margin-bottom:12px;
            width:95%;
            padding: .4em;
        }
        fieldset {
            padding:0;
            border:0;
            margin-top:25px;
        }
        h1 {
            font-size: 1.2em;
            margin: .6em 0;
        }
        div#users-contain {
            width: 350px;
            margin: 20px 0;
        }
        div#users-contain table {
            margin: 1em 0;
            border-collapse: collapse;
            width: 100%;
        }
        div#users-contain table td, div#users-contain table th {
            border: 1px solid #eee;
            padding: .6em 10px;
            text-align: left;
        }
 
        .ui-button {
            outline: 0;
            margin:0;
            padding: .4em 1em .5em;
            text-decoration:none; !important;
            cursor:pointer;
            position: relative;
            text-align: center;
        }
        .ui-dialog .ui-state-highlight, .ui-dialog .ui-state-error {
            padding: .3em;
        }
 
        /*
        * OK sous IE8, C2 et F3,
        * se positionne au-dessus du dialogue de z-index 1000,
        * se positionne juste en dessous de la ligne d'input.
        * Sous F3, si la fenêtre Firebug est ouverte
        * le datepicker remonte sur le dialog par manque de place, normal.
        */
        div#ui-datepicker-div {
            z-index: 2000;
        }
    </style>
 
    <!-- A MODIFIER : pour le test j'ai du changer ces liens vers ma version de 1.3.2 et de 1.7.2 -->
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script>
    <!-- Pour les date en français -->
    <script type="text/javascript" src="../lib/datepicker-fr.js"></script>
 
    <script type="text/javascript">
        $(document).ready(function() {
            var name = $("#name"),
            email = $("#email"),
            password = $("#password"),
            allFields = $([]).add(name).add(email).add(password),
            tips = $("#validateTips");
 
            function updateTips(t) {
                tips.text(t).effect("highlight",{},1500);
            }
 
            function checkLength(o,n,min,max) {
                if ( o.val().length > max || o.val().length < min ) {
                    o.addClass('ui-state-error');
                    updateTips("Length of " + n + " must be between "+min+" and "+max+".");
                    return false;
                } else {
                    return true;
                }
            }
 
            function checkRegexp(o,regexp,n) {
                if ( !( regexp.test( o.val() ) ) ) {
                    o.addClass('ui-state-error');
                    updateTips(n);
                    return false;
                } else {
                    return true;
                }
            }
 
            $("#dialog").dialog({
                bgiframe: true,
                autoOpen: false,
                width: 400,
                modal: true,
                buttons: {
                    'Create an account': function() {
                         var bValid = true;
                         allFields.removeClass('ui-state-error');
                         bValid = bValid && checkLength(name,"username",3,16);
                         bValid = bValid && checkLength(email,"email",6,80);
                         bValid = bValid && checkLength(password,"password",5,16);
                         bValid = bValid && checkRegexp(name,/^[a-z]([0-9a-z_])+$/i,"Username may consist of a-z, 0-9, underscores, begin with a letter.");
                            /*
                            * From jquery.validate.js (by joern), contributed by Scott Gonzalez: 
                            * http://projects.scottsplayground.com/email_address_validation/
                            */
                        bValid = bValid && checkRegexp(email,/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i,"eg. ui@jquery.com");
                        bValid = bValid && checkRegexp(password,/^([0-9a-zA-Z])+$/,"Password field only allow : a-z 0-9");
 
                        if (bValid) {
                            $('#users tbody').append('<tr>' +
                            '<td>' + name.val() + '</td>' +
                            '<td>' + email.val() + '</td>' +
                            '<td>' + password.val() + '</td>' +
                            '</tr>');
 
                            $(this).dialog('close');
                        }
                    },
                        Cancel: function() {
                            $(this).dialog('close');
                        }
                    },
                        close: function() {
                            allFields.val('').removeClass('ui-state-error');
                    }
                }
            );
 
            $('#create-user').click(function() {
                $('#dialog').dialog('open');
            })
            .hover(
                function(){
                    $(this).addClass("ui-state-hover");
                },
                function(){
                    $(this).removeClass("ui-state-hover");
                }
            ).mousedown(function(){
                $(this).addClass("ui-state-active");
            })
            .mouseup(function(){
                $(this).removeClass("ui-state-active");
            });
 
             $('#date').datepicker();
        });
    </script>
</head>
<body>
    <div class="demo">
 
        <div id="dialog" title="Create new user">
            <p id="validateTips">All form fields are required.</p>
            <form>
                <fieldset>
                    <label>Name : <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" /></label>
                    <label>Email : <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" /></label>
                    <label>Password : <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" /></label>
                    <label>Date : <input type="text" name="date" id="date" class="text ui-widget-content ui-corner-all" /></label>
                </fieldset>
            </form>
        </div>
 
        <div id="users-contain" class="ui-widget">
            <h1>Existing Users:</h1>
            <table id="users" class="ui-widget ui-widget-content">
                <thead>
                    <tr class="ui-widget-header ">
                        <th>Name</th>
                        <th>Email</th>
                        <th>Password</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>John Doe</td>
                        <td>john.doe@example.com</td>
                        <td>johndoe1</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <button id="create-user" class="ui-button ui-state-default ui-corner-all">Create new user</button>
    </div><!-- End demo -->
 
    <div class="demo-description">
        <p>
            Use a modal dialog to require that the user enter data during a multi-step process.  Embed form markup in the content area, set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.
        </p>
    </div><!-- End demo-description -->
 
</body>
</html>

Le fichier datepicker-fr.js est inclus dans le dossier 1.7.2 mais en voici une copie :

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
 
/* French initialisation for the jQuery UI date picker plugin. */
/* Written by Keith Wood (kbwood@virginbroadband.com.au) and Stéphane Nahmani (sholby@sholby.net). */
jQuery(function($){
    $.datepicker.regional['fr'] = {
        closeText: 'Fermer',
        prevText: '&#x3c;Préc',
        nextText: 'Suiv&#x3e;',
        currentText: 'Courant',
        monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin',
        'Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
        monthNamesShort: ['Jan','Fév','Mar','Avr','Mai','Jun',
        'Jul','Aoû','Sep','Oct','Nov','Déc'],
        dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
        dayNamesShort: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],
        dayNamesMin: ['Di','Lu','Ma','Me','Je','Ve','Sa'],
        dateFormat: 'dd/mm/yy', firstDay: 1,
        isRTL: false};
    $.datepicker.setDefaults($.datepicker.regional['fr']);
});

**Mika2008** · 21/08/2009, 23h09

alors la un grand merci !

ça marche parfaitement !!
et en fr en plus !!!

merci et encore merci

désoler pour l'autre post, je vais encore prendre un avertissement?

**danielhagnoul** · 22/08/2009, 01h52

Bonsoir.

Bien heureux d'avoir pu vous aider.

Je ne suis pas modérateur, je trouve seulement que cela fait désordre.

jquery ui et super fish bug?

jQuery

Discussions similaires

Partager

Partager