Jquery Dialogue - Multiple sur la même page

J'essaie d'implémenter une boîte de dialogue jquery plusieurs fois sur une page. En gros, je veux montrer plus d'informations sur une personne quand un utilisateur clique sur son nom.Jquery Dialogue - Multiple sur la même page

Je génère la page avec php.

J'ai essayé de le faire, et j'ai réussi à le faire fonctionner partiellement, mais je ne peux que faire fonctionner la première instance de la page. S'il vous plaît, est-ce que quelqu'un peut me donner un exemple, parce que ceux sur la page de l'interface utilisateur ne sont pas si utiles, car ils apparaissent automatiquement lorsque la page s'ouvre.

Je me suis abstenu d'afficher mon code car je pense que ce n'est pas la bonne façon de procéder.

Merci d'avance.

Source

2009-04-07 Rob Y

Ce qui suit devrait fonctionner comme exemple valide.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<!-- Above Doctype should provide S mode in Moz, Safari, Opera, IE8 and A (almost standards) in IE6/7 --> 
<head> 
    <meta http-equiv="Content-Type" content="application/text+html;utf-8"/> 

    <title>Sandbox</title> 

    <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" charset="utf-8" /> 
    <link rel="stylesheet" href="css/print.css" type="text/css" media="print" charset="utf-8" /> 
    <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> 
<style type="text/css"> 

</style> 

<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
    google.load("jquery", "1.3.2"); 
    google.load("jqueryui", "1.7.0"); 
</script> 
<script type="text/javascript"> 
google.setOnLoadCallback(function() { 

     $(document).ready(function() { 
     $('.more-text').toggle(); 
     $('.more').click(function() { 
      $(this).parent().next('p').dialog(); 
     }) 


    }); 
}); 
</script> 
</head> 
<body> 
    <div id="container"> 
     <div id="person-1"> 
     <p>Short text for person one <a href="#" class="more">Show more</a></p> 
     <p class="more-text">This is more of the text</p> 
     </div> 
     <div id="person-2"> 
     <p>Short text for person two <a href="#" class="more">Show more</a></p> 
     <p class="more-text">This is more of the text with a longer description that 
     is supposed to go into a popup</p> 
     </div> 
    </div> 
</body> 

</html>

Source

2009-04-07 14:14:07 Steerpike

Merci d'avoir pris le temps de faire tout ce que Steerpike. Ça a l'air génial en tant que starter, mais en essayant, les dialogues n'apparaissent que la première fois qu'on clique dessus, je pense que j'ai lu une autre réponse à propos de ça quelque part que je chercherai maintenant, mais des idées? –

Il se déclenche uniquement une fois que le dialogue extrait le balisage du DOM lorsqu'il le transforme en popup. En ce moment, je suis au travail et je n'ai pas le temps d'examiner la question. Je sais que c'est possible cependant, j'ai fait exactement ce dont vous avez besoin sur un autre projet en utilisant un code similaire à ce que j'ai posté. – Steerpike

Malheureusement, je n'ai pas accès au code que j'ai écrit pour le moment. – Steerpike

Toutes les informations dont vous avez besoin est là, sur la page de documentation de l'interface utilisateur, sur le fond dans les onglets étiquetés « Options » et « méthodes ». Ces gars sont vos amis et vous diront (presque) tout ce que le widget peut faire. Par exemple,

<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> 
... 
<a href="" onclick="openDialog('Peter Smith', '<p>Peter Smith likes dirt bike riding, mountain climbing and punk music.</p>'); return false;">Peter Smith</a> 
... 
<script type="text/javascript"> 

    $(document).ready(function() { 
     $("#dialog").dialog({ autoOpen: false, modal: true }); 
    }); 

    function openDialog(title, text) { 
     $("#dialog").html(text).dialog('option','title',title).dialog('open'); 
    } 
</script>

Source

2009-04-07 14:56:11 Ajw

Salut Ajw, merci de répondre, mais le peu qui manque pour ce qui précède est de savoir comment choisir différents morceaux de texte pour différents liens. Pour autant que je peux voir, cela va sélectionner la div avec un ID de dialogue, et toujours ouvrir –

Qu'en est-il, Peter Smith – Ajw

Jquery Dialogue - Multiple sur la même page

Répondre

Questions connexes