Jquery Dialogue - Mehrere auf der gleichen Seite

Ich versuche, eine jquery Dialogbox mehrmals auf einer Seite zu implementieren - im Grunde möchte ich weitere Informationen über eine Person anzeigen, wenn ein Benutzer auf ihren Namen klickt.Jquery Dialogue - Mehrere auf der gleichen Seite

Ich erzeuge die Seite mit PHP.

Ich habe versucht, dies zu tun, und habe es teilweise funktioniert, aber ich kann nur die erste Instanz auf der Seite arbeiten. Bitte kann mir jemand auf ein Beispiel hinweisen, da die auf der UI-Seite nicht so hilfreich sind, da sie automatisch aufklappen, wenn die Seite geöffnet wird.

Ich habe davon abgesehen, meinen Code zu posten, da ich denke, dass dies nicht der richtige Weg ist.

Thaks im Voraus.

Quelle

2009-04-07 Rob Y

Folgendes sollte als ein gültiges Beispiel funktionieren.

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

Quelle

2009-04-07 14:14:07 Steerpike

Danke, dass Sie sich die Zeit genommen haben, all das zu tun, Steerpike. IT sieht gut aus, aber wenn man es ausprobiert, erscheinen die Dialoge nur beim ersten Klick. Ich glaube, ich habe irgendwo eine andere Antwort gelesen, nach der ich jetzt suchen werde, aber irgendwelche Ideen? –

Es wird nur einmal ausgelöst, weil das Dialogfeld das Markup aus dem DOM zieht, wenn es in das Popup umgewandelt wird. Im Moment bin ich bei der Arbeit und habe keine Zeit, um das Problem zu untersuchen. Ich weiß, dass es möglich ist, aber ich habe genau das getan, was Sie für ein anderes Projekt benötigen, indem ich ähnlichen Code verwende, den ich gepostet habe. – Steerpike

Leider habe ich keinen Zugriff auf den Code, den ich im Moment geschrieben habe. – Steerpike

Alle Informationen, die Sie brauchen, ist direkt auf der UI-Dokumentationsseite, auf der Unterseite in den ‚Optionen‘ und ‚Methoden‘ gekennzeichnet Registerkarten. Diese Jungs sind deine Freunde und werden dir (fast) alles erzählen, was das Widget kann. Zum Beispiel

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

Quelle

2009-04-07 14:56:11 Ajw

Hallo Ajw, danke für die Beantwortung, aber das Bit, das für das oben genannte fehlt, ist, wie man verschiedene Teile des Textes für verschiedene Verbindungen auswählt. Soweit ich sehen kann, wird dies das Div mit einer ID des Dialogs auswählen, und immer öffnen, dass –

Was ist, – Ajw

Jquery Dialogue - Mehrere auf der gleichen Seite

Antwort

Verwandte Themen