webentwicklung-frage-antwort-db.com.de

Empfehlung für ein einfaches Jquery-Dialogbeispiel?

Bei der Suche nach den Stichworten "einfaches Jquery-Dialog-Beispiel" - mit all den Antworten da draußen, habe ich kein einfaches und aussagekräftiges Beispiel in einem prägnanten eigenständigen .html-Dokument gesehen. Selbst wenn ich mehrere vollständige Bücher über jQuery heruntergeladen habe, habe ich kein solches Beispiel gesehen.

Die Beispiele, die ich gefunden habe, beziehen sich auf einen Dialog, der eine Warnmeldung "Hello World" zeigt. Für die Interaktion nicht sehr nützlich. Ich denke, das reale Beispiel wäre etwas, das Eingaben erfasst und an die Seite zurücksendet, ohne dass eine Rückmeldung an den Server erfolgen muss. Der Serverbeitrag kann ein nachfolgender Schritt sein.

Kann jemand eine Codereferenz in dieser Richtung empfehlen? Vielen Dank

BEARBEITEN # 3

Ich habe eine Lösung mit einem neuen Post eingefügt. Es ist eine vollständig in sich geschlossene Datei mit einsatzbereiten Dateien. Es arbeitet für mich.

BEARBEITEN # 2

Ich habe den Kopfblock aktualisiert, um die fehlenden CSS zu enthalten. Der Inhalt des Dialogfelds wird jetzt nicht angezeigt, aber das Dialogfeld wird immer noch nicht geöffnet. In der Konsole werden keine Fehler angezeigt.

                <style>
                #dialog {
                        display:none;
                    }
                </style>

BEARBEITEN ~ ​​VERSUCH # 1

Basierend auf der Antwort von @ rob-schmuecker habe ich den folgenden Code ausprobiert. Ich sehe, dass es auf jsFiddle funktioniert, aber meine Implementierung funktioniert nicht. In meinem Browser zeigt die Konsole keine Fehler an. Ich sehe jedoch zwei Probleme:

  • das Dialogfeld div-Inhalt wird direkt in die Seite geladen
  • das Klicken auf die Schaltfläche zum Laden des Dialogfelds funktioniert nicht

Irgendeine Idee, was ist mit diesem Code falsch? .. ist es vielleicht meine jquery anrufe?

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js" type="text/javascript"></script>

      <script type="text/javascript">

      //Initialize dialog

      $("#dialog").dialog({
          autoOpen: false,
          show: {
              effect: "blind",
              duration: 1000
          },
          hide: {
              effect: "explode",
              duration: 1000
          }
      });

      //Open it when #opener is clicked
      $("#opener").click(function () {
          $("#dialog").dialog("open");
      });

      //When the button in the form is clicked, take the input value and set that as the value of `.myTarget`
      $('.formSaver').on('click', function () {
          $('.myTarget').text($('.myInput').val());
          $("#dialog").dialog('close');
      });

      </script>

                <style>
                #dialog {
                        display:none;
                    }
                </style>

    </head>
    <body>

    <div>Here is the rest of the page. Hopefully we can get the value from the dialog form?! Should display <span class="myTarget">here</span> when finished.</div>

    <div id="dialog" title="Basic dialog">
        <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
        <input class="myInput" type="text" />
        <button class="formSaver">Save me!</button>
    </div>

    <button id="opener">Open Dialog</button>

    </body>
    </html>
16
Gene Bo

Ich weiß die Antworten aller zu schätzen - und ich habe gesehen, wie sie online in JsFiddle und jqueryui.com arbeiten. Soweit ich das beurteilen kann, habe ich hier die prägnanteste Lösung, die ich verwenden konnte, indem ich alle Remote-Includes verwendete und auf der Lösung von Java2s.com basiert:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">

    <script type="text/javascript">
    $(function() {

        // Allows user to click Enter key in text field and it will submit the dialog
        $('#myDialog').keypress(function(e) {
            if (e.keyCode == $.ui.keyCode.ENTER) {
                getResponse();
            }
        });

        var cancel = function() {
            $("#myDialog").dialog("close");
        }

        var getResponse = function() {
            var answer;
            /*// for radio-button selection
            $("input").each(function(){
              (this.checked == true) ? answer = $(this).val() : null;
            });
             */

            answer = $("#first_name").val();

            // This adds it dynamically
            // $("<p>").text(answer).insertAfter($("#poll"));
            $("#result").text(answer);
            $("#myDialog").dialog("close");
        }

        var dialogOpts = {
            modal : true,
            closeOnEscape : true,
            buttons : {
                "Done" : getResponse,
                "Cancel" : cancel
            },
            autoOpen : false
        };
        $("#myDialog").dialog(dialogOpts);
        $("#poll").click(function() {
            $("#myDialog").dialog("open");
        });
    });
    </script>

</head>
<body>
    <button id="poll">Poll</button>
    <div id="myDialog" class="flora" title="This is the title">
      <p>Question?</p>
      <label for="yes">Yes!</label><input type="radio" id="yes" value="yes25" name="question"><br>
      <label for="no">No!</label><input type="radio" id="no" value="no" name="question">
      <br/>
      First Name: <input type="text" id="first_name" />

    </div>

    <div style='color: green;' id='result'>
    </div>

</body>
</html>
1
Gene Bo

OK, hier geht es

Demo: http://jsfiddle.net/robschmuecker/9z2ag/1/

HTML:

<div>Here is the rest of the page. Hopefully we can get the value from the dialog form?! Should display <span class="myTarget">here</span> when finished.</div>

<div id="dialog" title="Basic dialog">
    <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    <input class="myInput" type="text" />
    <button class="formSaver">Save me!</button>
</div>

<button id="opener">Open Dialog</button>

Dialog beginnt versteckt mit CSS:

#dialog {
    display:none;
}

Dann machen wir etwas Javascript:

//Initialize dialog
$("#dialog").dialog({
    autoOpen: false,
    show: {
        effect: "blind",
        duration: 1000
    },
    hide: {
        effect: "explode",
        duration: 1000
    }
});

//Open it when #opener is clicked
$("#opener").click(function () {
    $("#dialog").dialog("open");
});

//When the button in the form is clicked, take the input value and set that as the value of `.myTarget`
$('.formSaver').on('click', function () {
    $('.myTarget').text($('.myInput').val());
    $("#dialog").dialog('close');
});
10
Rob Schmuecker

Der Grund, warum es nicht funktioniert, ist, dass Ihre Aufrufe von jQuery und der jQuery-Benutzeroberfläche folgendermaßen aussehen: 

http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

Die URL zum Laden ist jedoch:

https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

Geben Sie die richtige URL ein und es wird funktionieren.

ZUSATZ:

Das Problem liegt in Ihrem zweiten Aufruf von jQuery: 

http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js

Abgesehen davon, dass die jQuery von https geladen wird, gibt es keine jquery.js, sondern jquery.min.js. 

4
Yaakov Ainspan