Boite de dialogue avec différents contenus

**danardf** · 24/11/2013, 11h14

Bonjour

Je me lance dans le Jquery UI. Très intéressent.

Par contre je bloque sur un problème.
J'arrive à faire apparaitre une boite de dialogue quand je clique sur une image.

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
<script>
 
$(function() {
	$( ".dialog" ).dialog({ 
		autoOpen: false,
		title: "Info",
	});
    $(".details").click(function() {
    	$("#id").dialog('open');
    });
});
</script>
</head>
<body>
<img src="./icone.png" class="details"/>
<div class="dialog" id="id">
<p>Détails</p>
</div>

Mais là où ça se complique c'est que sur mon site, je vais avoir plusieurs lignes avec différents id.

Code html :

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

1
2
3
4
5
6
7
8
9
...
<img src="./icone.png" class="details" />
<div class="dialog" id="id1">
Contenu 1
</div>
<img src="./icone.png" class="details"/>
<div class="dialog" id="id2">
Contenu 2
</div>

Je me suis inspiré d'informations glanées sur le net, sur des exemples pris sur des link avec href.
Mais je pense que mon cas n'est pas exactement le même.
Ils font une extraction de l'attribut d'href. Hors, mois je n'ai pas d'attribut.

Si quelqu'un peut m'aider.

**danielhagnoul** · 24/11/2013, 20h56

Bonsoir

Principe : on construit un seul dialogue, avant de l'ouvrir on changera son contenu en fonction des besoins.

Selon la quantité et le type d'éléments à afficher dans le dialogue on placera son contenu dans un attribut data-dialog ou dans des divisions cachées.

Voici un exemple fonctionnel avec l'attribut data-dialog. Il suffit de copier-coller pour tester.

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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<meta name="description" content="Exemple d'incorporation des fichiers jQuery">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/1.0.3/head.min.js"></script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<script>
		"use strict";
 
		 /*
		  * On utilise head.js pour charger JS et CSS de manière asynchrone 
		  * et parallèle, mais on les exécute dans l'ordre.
		  * Voir la documentation et l'API : http://headjs.com/
		  * Les polices de caractères et le fichier head.js doivent être 
		  * inclus manuellement.
		  */
		head.load(
			{ "d3" : "http://d3js.org/d3.v3.min.js" },
			{ "jquery" : "http://code.jquery.com/jquery-2.0.3.min.js" },
			{ "jqueryui" : "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" },
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/d3HeadBase.js",
			"http://danielhagnoul.developpez.com/styles/dvjhRemBase.css",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/sunny/jquery-ui.min.css"
		);
	</script>
	<style>
		.dialog { display: none; }
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="http://www.developpez.net/forums/d1395728/\
				webmasters-developpement-web/javascript/bibliotheques-frameworks/\
				jquery/boite-dialogue-differents-contenues/">Boite de dialogue avec\
				 différents contenues</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
<!-- Début code du test -->
 
<div class="dialog">
    <p>Contenu par défaut</p>
</div>
 
<img src="http://danielhagnoul.developpez.com/images/imageTest.png" class="details" data-dialog="texte du dialogue pour l'image 1">
<img src="http://danielhagnoul.developpez.com/images/avatarDVJH.jpg" class="details"  data-dialog="texte du dialogue pour l'image 2">
 
<!-- Fin code du test -->
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-11-24T20:52:38.688+0100" pubdate>2013-11-24T20:52:38.688+0100</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
	<script>
		"use strict";
 
		/*
		 * Chargeur de code head.js, document ready et fichiers chargés.
		 */
		head.ready( [ "jquery", "jqueryui" ], function(){
 
/* Début code du test */
 
$( ".dialog" ).dialog({ 
    "autoOpen" : false,
    "title" : "Info"
});
 
$( "img.details" ).on( "click", function(){
    $( ".dialog" )
         .html( '<p>' + $( this ).data( "dialog" ) + '</p>' )
         .dialog( "open" );
});
 
/* Fin code du test */
 
		});
	</script>
</body>  
</html>

**danardf** · 25/11/2013, 06h10

Salut.

Merci pour ton aide.
Avec ton exemple, je comprend mieux certaines choses. (Comme je l'ai dit, je débute dans le Java et le Jquery).

J'ai fini tardivement par trouver comment y arriver d'une autre manière.

En fait, j'ai transporté les données à afficher dans la ligne img via un event onclik qui va appeler FindDetails avec une variable $msgResponse contenant les données à afficher:

Code :

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

$arrTmp[0] = "<img src='modules/".$module_name."/images/guest_info.png' border='0' onclick='FindDetails(\"$msgResponse\")'>\n";

Dans mon entête script, j'ai mis ceci:

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
function FindDetails(details)
{
	$(function() {
		var SplitText = "Title";
		var $dialog = $('<div></div>')
		.html(SplitText )
		.dialog({
        title: 'Info',
		modal: true,
		 buttons: {
			Ok: function() {
			$( this ).dialog( "close" );
			}
		}});
		$dialog.dialog('open');
		$dialog.html(details);
	});
}

Les exemples que j'avais mis en début de sujet venaient d'un simple essai réalisés avec Aptana Studio 3 (Editeur HTML).

Ce que j'ai mis là, c'est dans mon code PHP de ma page.

Merci pour tout.

Boite de dialogue avec différents contenus [UI]

jQuery

Vue hybride

Discussions similaires

Partager

Partager