如何在這種情況下，在按鈕按下時顯示一個指示器

Question

在點擊重試按鈕，是有可能表現出一些處理設備

My 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(); 
}); 

我的代碼，功能是工作，但似乎該應用程序沒有做任何動作

所以我的問題是它的POSS IBLE表現出任何的指示（例如，延遲，進度，任何東西）

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

當然，

嘗試附加裝載機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，以顯示某種處理。

Answer 3

您可以使用一個小功能（以時間爲參數），並使用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) { \t 
 
    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'); 
 
    \t \t \t $(".getStarted").trigger("click"); 
 
    event.stopImmediatePropagation(); 
 
     event.preventDefault(); 
 
     return false; 
 
}); 
 

 
$(document).on("popupbeforeposition", "#nonetconnmain",function(event, ui) { 
 
     \t $('#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> \t 
 
       </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>

Fiddle

Answer 4

也許當你點擊再試一次，你可以有一個的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; 
});