UI Accordion et UI Dialog. Intéger un accordion dans une box dialog

**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

UI Accordion et UI Dialog. Intéger un accordion dans une box dialog

jQuery

Discussions similaires

Partager

Partager