web-dev-qa-db-ja.com

単純なjqueryダイアログの例の推奨事項

「シンプルなjqueryダイアログの例」というキーワードを全面的に検索します-すべての答えが出ましたが、簡潔なスタンドアロンの.htmlドキュメントでは、シンプルで意味のある例を見たことはありません。 jQueryの完全な本をいくつかダウンロードしても、そのような例は見当たりませんでした。

私が見つけた例は、「Hello World」という警告メッセージを表示するダイアログです。実世界の例は、入力をキャプチャし、サーバーにポストバックすることなくページに送信するものだと思います。サーバー投稿は、後続のステップになる場合があります。

誰もがこれらの行に沿ってコード参照を推奨できますか？ありがとう

編集＃

私は以下の新しい投稿でソリューションに貼り付けました。すぐに使用できるインクルードを備えた完全な自己完結型ファイルです。それは私のために働いています。

編集＃2

欠落しているcssを含むようにheadブロックを更新しました。ダイアログの内容は現在表示されていませんが、それでもダイアログボックスは開かれていません。コンソールにエラーはありません。

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

編集〜試行＃1

@ rob-schmueckerからの回答に基づいて、以下のコードを試しました。 jsFiddleで動作するようですが、実装が動作していません。私のブラウザでは、コンソールにエラーは表示されません。しかし、私が見ている2つの問題があります：

  • ダイアログボックスdivコンテンツはページに直接読み込まれます
  • ロードダイアログボタンをクリックしても機能しません

このコードの何が問題なのでしょうか？ ..それはおそらくjquery include呼び出しですか？

    <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>
jqueryjquery-ui-dialog
16
Gene Bo

みんなの回答に感謝します-そして、すべてがJsFiddleとjqueryui.comでオンラインで動作するのを見ました。私が望んでいたことについて、私が知る限り、すべてのリモートインクルードを使用し、Java2s.comのソリューションに基づいて、私が行くことができた最も簡潔なソリューションは次のとおりです：

<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

デモ： 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>

ダイアログはCSSで非表示になります：

#dialog {
    display:none;
}

次に、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

動作しない理由は、jQueryとjQuery UIの呼び出しが次のようになっているためです。

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

ただし、ロード元のURLは次のとおりです。

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

正しいURLを入力すると、機能します。

追加：

問題は、jQueryの2回目の呼び出しにあります。

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

JQueryがhttpsからロードされるという事実に加えて、jquery.jsはなく、jquery.min.jsです。

4
Yaakov Ainspan