UI Accordion et UI Dialog. Intéger un accordion dans une box dialog [Résolu]

beegees · 03/06/2011, 15h09

Bonjour à tous,

Je voudrais intégrer à une dialog jquery UI un accordion UI.

Pour ce faire, j'ai ce 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
 
//jquery UI dialog
			$('#dialog').click(function(){
				$('#examen').accordion().dialog();
				$('#examen').accordion({
				collapsible: true
			  })
			  $('#examen').dialog({
				width: 1300,
				height: 550,
				title: 'Some title'
			  });
 
			});

Pensez-vous que ce code soit bon ?

L'accordéon ne semble pas fonctionner chez moi.

Merci d'avance.

beegees

Finality · 04/06/2011, 14h03

Bonjour,

ne manque-t-il pas un ";" ligne 7 ?

danielhagnoul · 04/06/2011, 20h42

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
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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/humanity/jquery-ui.css">
	<style>
		/* Base */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0px; padding:0px; }
		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; padding:6px; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur {width:95%; min-width:800px; min-height:400px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
		<div id="dialog" title="Basic dialog">
			<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
			<div id="accordion">
				<h3><a href="#">Section 1</a></h3>
				<div>
					<p>
					Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
					ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
					amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
					odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
					</p>
				</div>
				<h3><a href="#">Section 2</a></h3>
				<div>
					<p>
					Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
					purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
					velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
					suscipit faucibus urna.
					</p>
				</div>
			</div>
		</div>
 
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2011-06-04T20:45:00.000+02:00" pubdate>2011-06-04</time> <span itemprop="name">Daniel Hagnoul</span> <a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
	<script>
		$(function(){
			$( "#accordion" ).accordion({
				collapsible: true
			});
 
			$( "#dialog" ).dialog({
				width: 1300,
				height: 550,
				title: 'Some title'
			});
		});
	</script>
</body>  
</html>

beegees · 05/06/2011, 10h07

Bonsoir Daniel,

Un énorme

pour ta réponse.

Le design est maintenant parfait.

Encore un tout grand merci à toi.

beegees

05/06/2011, 10h07	#4
beegees Membre Expert David Vincent (l'homme qui a vu les extra-terrestres) Développeur Web Inscription : mars 2004 Messages : 3 239 Détails du profil Informations personnelles : Nom : David Vincent (l'homme qui a vu les extra-terrestres) Âge : 37 Localisation : Belgique Informations professionnelles : Activité : Développeur Web Secteur : Enseignement Informations forums : Inscription : mars 2004 Messages : 3 239 Points : 1 046 Points : 1 046	Bonsoir Daniel, Un énorme pour ta réponse. Le design est maintenant parfait. Encore un tout grand merci à toi. beegees __________________
	00

04/06/2011, 14h03	#2
Finality Membre éclairé Webmaster Inscription : septembre 2007 Messages : 376 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Webmaster Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : septembre 2007 Messages : 376 Points : 377 Points : 377	Bonjour, ne manque-t-il pas un ";" ligne 7 ?
	10

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