-2

ダイアログが表示される前に、画像の読み込みを実装する方法や方法を知りたいですか？どんなgifでもかまいません。関数に追加する必要がある関数またはコード行は何ですか？

------------私のjqueryコード：------------

 $(".red_img").click(function() {

                });

                $("#red_form").dialog({

                        modal:true,
                        buttons: {
                            "Done": function() {


                            },
                            Cancel: function() {
                                $(this).dialog("close");
                            }
                        }
                });
                $("#red_form").show(500);
            });
4

2 に答える 2

1

クリックイベントの開始時に読み込み中の画像を表示し、ダイアログを表示する直前に画像を非表示にすることができます。

// Initially, your loading image must be hidden
$("#your_loading_image").hide();

$(".red_img").click(function() {
    var red_type = $(this).attr("title").trim();

    // Display your loading image here -----------------------------
    $("#your_loading_image").show();

    $.ajax({
        url: "get_attributes.php",
        type: "post",
        datatype: "json",
        data: {wtype: red_type},
        success: function(data) {
            var toAppend = '';
            if(typeof data === "object"){
                toAppend += "<tbody>";
                toAppend += "<tr></td><td class=datalabel>Type:</td><td>"+data['type']+"</td></tr>";
                toAppend += "<tr><td class=datalabel>Health:</td><td>"+data['health']+"</td></tr>";
                toAppend += "<tr><td class=datalabel>Attack:</td><td>"+data['attack']+"</td></tr>";
                toAppend += "<tr><td class=datalabel>Defense:</td><td>"+data['defense']+"</td></tr>";
                toAppend += "<tr><td class=datalabel>Speed:</td><td>"+data['speed']+"</td></tr>";
                toAppend += "<tr><td class=datalabel>Evade:</td><td>"+data['evade']+"</td></tr>";
                toAppend += "<tr><td class=datalabel>Special:</td><td>"+data['special']+"</td></tr>";
                toAppend += "</tbody>";
                $("tbody").remove();
                $("#red_form table").append(toAppend);
            }
        }
    });

    $("#red_form #name").val($(this).attr("alt").trim());

    // Hide your loading image here --------------------------------
    $("#your_loading_image").hide();

    $("#red_form").dialog({
        width:300,
        resizable:false,
        modal:true,
        buttons: {
            "Done": function() {

                if($("#red_form #name").val().trim()==''){
                    alert("Text field cannot be empty.");
                    $("#red_form #name").focus();
                }
                else if($("#red_form #name").val().trim()===$("#blue_name").val().trim()){
                    alert("Name cannot be the same by other player.");
                    $("#red_form #name").focus();
                }
                else {
                    $("#red_name").val($("#red_form #name").val().trim());
                    $("#red_type").val(red_type);
                    $("#red_form").hide(400);
                    $(this).dialog("close");
                }
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        }
    });
    $("#red_form").show(500);
});

たとえば、読み込み中の画像はどこに#your_loading_imageありますか。

<img id="your_loading_image" src="your_loading_image_path.gif"/>
于 2012-09-17T05:02:20.407 に答える
1

ポップアップダイアログの前に進行状況インジケーターの解決策を探して、ポップアップの読み込みの進行状況を表示することを願っています。そうであれば、この進行状況インジケーターをモーダルと一緒に実装する方法を次に示します。

ステップ1。

簡単なパネルを撮り、その中に画像を挿入しました。「読み込み中お待ちください...」は表示しようとしているテキストです。パネルの位置を画面上の目的の場所に設定しました。

<asp:Panel ID="ProgressIndicatorPanel" runat="server" Style="display: none" CssClass="modalPopup">
        <div id="ProgressDiv" class="progressStyle">
            <ul class="ProgressStyleTable" style="list-style:none;height:60px">
                <li style="position:static;float:left;margin-top:0.5em;margin-left:0.5em">
                    <asp:Image ID="ProgressImage" runat="server" SkinID="ProgressImage" />
                </li>
                <li style="position:static;float:left;margin-top:0.5em;margin-left:0.5em;margin-right:0.5em">
                    <span id="ProgressTextTableCell"> Loading, please wait... </span>
                </li>
            </ul>
        </div>
    </asp:Panel>

ステップ2 進行状況インジケーターの表示中に画面の残りの機能を無効にしたいので、以下に示すようにモーダルダイアログを使用しました。

<asp:ModalPopupExtender ID="Progress_ModalPopupExtender" runat="server" ClientIDMode="Static" BehaviorID="ProgressModalPopupBehaviour"
        PopupControlID="ProgressIndicatorPanel" TargetControlID="DummyDialogButton" BackgroundCssClass="ModalPopupBG" 
        RepositionMode="RepositionOnWindowResizeAndScroll" Drag="false" DropShadow="true">
    </asp:ModalPopupExtender>

ステップ3

次に、この$（ "＃ProgressImage"）。show（）;を含めてJavascript関数を作成する必要があります。

于 2012-09-17T05:25:08.637 に答える