Na podstawie połączenia internetowego zmień kolor przycisku na zielony lub szary.

Question

Chcę, aby sam przycisk zmieniał kolor w trybie online (na podstawie połączenia internetowego) na zielony, w przeciwnym razie szary.

Mam skrzypce JS, które daje rozwiązanie, aby kliknąć przycisk i możemy zobaczyć, czy jesteśmy online/offline przez alert.

Czy ktoś mógłby pomóc

HTML:

<div data-role="page" id="index"> 
    <div data-theme="a" data-role="header"> 
    <h3>First Page</h3> <a href="#second" class="ui-btn-right">Next</a> </div> 
    <div data-role="content"> <a data-role="button" id="check-connection">Check internet connection</a> </div> 
</div> 

jQuery:

$(document).on('pagebeforeshow', '#index', function() { 
    $(document).on('click', '#check-connection', function() { 
    var status = navigator.onLine ? 'online' : 'offline'; 
    (alert(status)); 
    }); 
}); 

Zobacz JSFiddle.

Answer 1

Oto skrzypce robocze: http://jsfiddle.net/dn7zjm41/

Właśnie dodany if oświadczenie:

if(status==="online") { 
    $("#check-connection > span").css("background-color", "green"); 
} else if(status==="offline") { 
    $("#check-connection > span").css("background-color", "gray"); 
} else { 
    // the code for another scenario 
} 

A jeśli chcesz automatycznie uruchamiane bez click imprezy - Oto ona: http://jsfiddle.net/f6paa9xy/

W ten Przypadek, dla którego Twoja JavaScript powinna wyglądać następująco:

$(document).on('pagebeforeshow', '#index', function() {    
    var status = navigator.onLine ? 'online' : 'offline'; 
    alert(status); 
    if(status==="online") { 
    $("#check-connection > span").css("background-color", "green"); 
    } else if(status==="offline") { 
    $("#check-connection > span").css("background-color", "red"); 
    } 
}); 

Nadzieja pomaga

Answer 2

Można użyć prostego klasę css, aby to zrobić:

$(document).on('click', '#check-connection', function(){ 
 
    var status = navigator.onLine ? 'online' : 'offline'; 
 
    this.className = 'status-'+status; 
 
});

.status-online{ background-color: green; } 
 
.status-offline{ background-color: grey; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div data-role="content"> 
 
    <a data-role="button" id="check-connection"> 
 
     Check internet connection 
 
    </a> 
 
</div>

Jednak jeśli chcesz determinację na żywo, można użyć detektora zdarzeń przedstawioną przez przeglądarkę, najbardziej wsparcie ta (np IE8 +)

window.addEventListener("offline", function() { 
    $("#check-connection")[0].className = "status-offline"; 
}); 
window.addEventListener("online", function() { 
    $("#check-connection")[0].className = "status-online"; 
}); 

Więcej na ten temat na MDN: https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine