在这种情况下，单击按钮时如何显示指示器

Question

单击“重试按钮”上的，可以显示设备上正在发生的某些处理

我的jsfiddle

我的代码如下

$(document).on("click", ".getStarted", function(event) {
    // Simulating Net Connection here
    var a = 10;
    if (a == 10) {
        $('#mainlabel').delay(100).fadeIn(300);
        $('#nonetconnmain').popup({
            history : false
        }).popup('open');
        event.stopImmediatePropagation();
        event.preventDefault();
        return false;
    }
});
$(document).on('click', '.nonetconnmainclose', function(event) {
    $('#nonetconnmain').popup('close');
    $(".getStarted").trigger("click");
    event.stopImmediatePropagation();
    event.preventDefault();
    return false;
});

$(document).on("popupbeforeposition", "#nonetconnmain", function(event, ui) {
    $('#mainlabel').hide();
});  

使用我的代码，该功能正常运行，但似乎该应用程序未执行任何操作

所以我的问题是有可能显示任何指示（例如，delay，progressbar等等）

Answer 1

你去

 $(document).on("click", ".getStarted", function(event) { $.mobile.loading("show", { text: "", textVisible: true, theme: "z", html: "" }); // Simulating Net Connection here var a = 10; if (a == 10) { setTimeout(function() { $.mobile.loading("hide"); $('#mainlabel').fadeIn(300); }, 1000); $('#nonetconnmain').popup({ history: false }).popup('open'); event.stopImmediatePropagation(); event.preventDefault(); return false; } }); $(document).on('click', '.nonetconnmainclose', function(event) { $('#nonetconnmain').popup('close'); $(".getStarted").trigger("click"); event.stopImmediatePropagation(); event.preventDefault(); return false; }); $(document).on("popupbeforeposition", "#nonetconnmain", function(event, ui) { $('#mainlabel').hide(); }); 

 .popup { height: 200px; width: 150px; } .popup h6 { font-size: 1.5em !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> <link href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" rel="stylesheet" /> <div data-role="page"> <div data-role="popup" id="nonetconnmain" data-dismissible="false" class="ui-content" data-theme="a"> <div class="popup_inner popup_sm"> <div class="popup_content" style="text-align:center;"> <p class="">Please check net connectivcty</p> <label id="mainlabel" style="margin:100px auto 60px auto;color:Red; line-height:40px;font-size:medium;display:none">Please check</label> </div> <div class="popup_footer nonetconnmainclose"> <a class="">Try Again</a> </div> </div> </div> <button class="getStarted btn btn-a get_btn">Click Here</button> </div> 

Answer 2

您可以使用一个小的函数（以时间作为参数），并使用jQuery animate()创建如下所示的过程效果。

var updateProgress = function(t) {
$( "#p" ).css("width",0);
$( "#p" ).show();
$( "#p" ).animate({ "width": "100%" }, t , "linear", function() {
$(this).hide();
});
}

请注意，调用updateProgress()时选择的时间与文本消息的延迟和淡入效果有关。

updateProgress(3500);
$('#mainlabel').delay(3400).fadeIn(600);

在下面的代码段中检查

 var updateProgress = function(t) { $( "#p" ).css("width",0); $( "#p" ).show(); $( "#p" ).animate({ "width": "100%" }, t , "linear", function() { $(this).hide(); }); } $(document).on("click", ".getStarted", function(event) { var a = 10; if(a==10) { updateProgress(3500); $('#mainlabel').delay(3400).fadeIn(600); $('#nonetconnmain').popup({history: false}).popup('open'); event.stopImmediatePropagation(); event.preventDefault(); return false; } }); $(document).on('click', '.nonetconnmainclose', function(event) { $('#nonetconnmain').popup('close'); $(".getStarted").trigger("click"); event.stopImmediatePropagation(); event.preventDefault(); return false; }); $(document).on("popupbeforeposition", "#nonetconnmain",function( event, ui ) { $('#mainlabel').hide(); }); 

 .popup { height: 200px; width: 400px; } .popup h6 { font-size: 1.5em !important; } #p { border:none; height:1em; background: #0063a6; width:0%; float:left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> <link href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" rel="stylesheet"/> <div data-role="page"> <div data-role="popup" id="nonetconnmain" data-dismissible="false" class="ui-content" data-theme="a"> <div class="popup_inner popup_sm"> <div class="popup_content" style="text-align:center;"> <p class="">Please check net connectivcty</p> <div id="p"></div><br> <label id="mainlabel" style="margin:100px auto 60px auto;color:Red; line-height:40px;font-size:medium;display:none">Please check </label> </div> <div class="popup_footer nonetconnmainclose"> <a class="">Try Again</a> </div> </div> </div> <button class="getStarted btn btn-a get_btn">Click Here</button> </div> 

小提琴

Answer 3

也许当您单击try try时，您可以触发一个setinterval来检查在线连接性，找到时可以关闭弹出窗口并重新开始，当我们在该时间间隔内重试时，进度也可以显示为进度点。下面是代码，我没有尝试运行代码，但它显示了想法

$(document).on('click', '.nonetconnmainclose', function(event) {
var msgUI = $("#mainlabel");
msgUI.data("previoustext",msgUI.html()).html("retrying...");
var progress = [];
var counter = 0 ,timeout = 5;
var clearIt = setInterval(function(){
    var online = navigator.onLine;
    progress.push(".");
    if(counter > timeout && !online){
        msgUI.html(msgUI.data("previoustext"));
        counter=0;
    }
    if(online){
        $('#nonetconnmain').popup('close');
        $(".getStarted").trigger("click");
        counter=0;
        clearInterval(clearIt);
    }
else{
    msgUI.html("retrying" + progress.join(""));
    counter++;
}

},1000);
event.stopImmediatePropagation();
event.preventDefault();
return false;
});

Answer 4

当然，

尝试将loader GIF附加到div之一，并记得在处理完成后将其删除。

请参考StackOverflow

并尝试附加此

$('#nonetconnmain').append('<center><img style="height: 50px; position:relative; top:100px;" src="cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/…; alt="loading..."></center>'); 

这将在您的HTML上附加一个加载器，以显示某种处理。