rudiments jquery /jquery-ui

**nico72** · 16/06/2010, 15h39

Re

Comme vous l aurez surement compris suite a mon precedent message, je suis debutant sur jquery/jquery ui

Ceci dit cela m interesse fortement

J ai donc reussi a afficher le date picker en anglais puis en français.

Bien evidemment, je souhaite aller plus loin da ma comprehension du truc.

Donc, je me demande ou trouver la doc utile pour une bonne utilisation : savoir comment manier l apparence, les fonctionnalites, etc ..

Je suis preneur de toute info utile.Bien sur, je cherche activement sur google mais je suis assez décontenancé par ce que j y trouve : bon nombre de tutos ne fonctionnent pas.

Bon, merci et a bientot

**devyan** · 16/06/2010, 15h55

Bonjour,

As-tu regardé "directement" sur le site officiel ?

devyan

**FunK92** · 16/06/2010, 16h24

Salut,

Personnelement je trouve que la documentation officiel est très bien faite, et largement compréhensible, seul inconvénient c'est quel est en anglais

Si tu lit un minimun l'anglais tu devrait t'en sortir

http://docs.jquery.com/Main_Page

**nico72** · 16/06/2010, 17h27

Suite a vos suggestions, je me suis penché sur la doc des fenetres modales

J ai ceci

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function() {
	var $dialog = $('<div></div>')
		.html('')
		.dialog({
			autoOpen: true,
			draggable: false,
			buttons: { "Fermer": function() { $(this).dialog("close"); }},			
			title: 'Login'
		});
	$('#opener').click(function() {
		$dialog.dialog('open');
	});
});

Je suis content, j ai quelque chose

Mais je ne vois pas comment bloquer l arrire plan.

Peut on conditionner son ouverture a la presence d une variable php?

Comment inserer un formulaire et le traiter ?

Comment modifier l apparence ?

En fait, j ai une connexion admin qui se fait en php.Ca marche tres bien mais j aurai voulu essayer de le faire avec un modal form.

En gros, si la variable de session admin est presente on affiche pas la fenetre, sinon on l affiche.

[Edit 2010-06-16 17:34]

Bon, pour bloquer l arriere plan : modal: true

Ca c est réglé (Je pensais pas que ça pouvait etre aussi simple

[Edit 2010-06-16 18:19]

Par exemple, je ne trouve pas ou est specifiée la couleur de la titlebar (le orange couplee a une image png glossy).Je ne vois pas non plus ou modifier la croix de fermeture.peut on la supprimer ?

A+

**danielhagnoul** · 16/06/2010, 23h42

Bonsoir.

Un exemple, voir les commentaires dans 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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<meta name="description" content="Page type">
	<title>Page type</title>
	<link rel="stylesheet" type="text/css" href="../lib/jqueryui/css/humanity/jquery-ui-1.8.2.custom.css">	
	<style>
		/* BASE */
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			height:500px;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
		div#affiche {
			clear:both;
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
 
		/* TEST */
		#dialog {
			display: none;
			font-size:1em;
		}
		/*
		 * Les styles UI sont assez complexes avec de nombreuses interactions.
		 * Le plus simple est d'examiner le code avec Firebug et d'agir par essais et erreurs.
		 *
		 * Pour le titre, il s'agit de :
		*/
		.ui-widget-header {
			background-image: none;
			background-color: whiteSmoke;
			border:1px solid grey;
			color:red;
			font-weight:bold;
		}
		/*
		 * Pour la case de fermeture, il me semblait qu'il y avait une option,
		 * mais je ne la trouve plus !
		 *
		 * Alors :
		*/
		.ui-dialog-titlebar-close {
			display:none;
		}
	</style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-ui-1.8.2.custom.min.js"></script>
 	<script>
		$(function(){
			$("#dialog").dialog({
				autoOpen: false,
				width: 460,
				buttons: {
					"Fermer": function(){
						$(this).empty().dialog("close");
					}
				}
			});
 
			/*
			 * Exemple :
			 */
			$('#opener').toggle(
				function(){
					$("#dialog")
						.append("<p>À chaque ouverture du dialogue, le titre et le contenu sont modifiés.</p>")
						.dialog({title:'C\'est un cycle'})
						.dialog('open');
				},
				function(){
					$("#dialog")
						.append("<p>Bienvenue sur dvp !</p>")
						.dialog({title:'Bonjour'})
						.dialog('open');
				},
				function(){
					$("#dialog")
						.append("<p>Amusez-vous bien avec UI !</p>")
						.dialog({title:'Bonsoir'})
						.dialog('open');
				}
			);
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<button id="opener">Show dialog</button>
		<div id="dialog"></div>
	</div>
</body>  
</html>

**nico72** · 17/06/2010, 00h04

Merci

Je vois que bien que laborieuse, la modification des styles est possible.

Dans votre exemple, la fenetre s ouvre sur un click bouton.

Je recherche une solution pour ouvrir cette fenetre (qui contiendra un formulaire d authentification) en cas d abscence d une variable de session de login php.

Voila mon shema : La page connexion.php est ouverte, la fenetre apparait et invite l utilisateur a se logger.Requete, on verifie que c est ok (moi je vois ça en php) et on renvoie le resultat a connexion.php, qui au lieu d afficher la fenetre (Et la je suis tres embeté parce qu il s agit recuperer et tester des variables php en js, non ?) affichera Salut a toi utilisateur lambda ...

Voila tout mon probleme.
Ayant peu de connaissances en js / jquery, je ne suis pas sorti de l'auberge mais j y ai mis un pied, c est deja ça

A+

**danielhagnoul** · 17/06/2010, 00h55

Bonsoir.

PHP n'est pas du JavaScript ! Ce n'est pas le bon forum.

rudiments jquery /jquery-ui

jQuery

Vue hybride

Discussions similaires

Partager

Partager