Qualcuno potrebbe farmi sapere il codice giusto per l'evento di modifica dell'orientamento da parte di jquery mobile nell'intervallo telefonico? Dove e come posso implementare questa funzione di orientationChange?Implementazione evento cambio di orientamento da jquery mobile nell'intervallo telefonico
risposta
$(window).bind('orientationchange', _orientationHandler);
poi nella funzione _orientationHandler
, hanno qualcosa di simile:
if(event.orientation){
if(event.orientation == 'portrait'){
//do something
}
else if(event.orientation == 'landscape') {
//do something
}
}
$(window).bind('orientationchange', function(e){
if ($.event.special.orientationchange.orientation() == "portrait") {
//Do whatever in portrait mode
} else {
//Do Whatever in landscape mode
}
});
È possibile aggiungere l'evento di ridimensionamento nel parametro caso di funzione bind, se ci si rivolge iOS e orientationChange non funziona Dal momento che il cambiamento dell'orientamento attiva anche l'evento di ridimensionamento.
Il seguente codice dovrebbe funzionare su tutti i browser per rilevare il cambio di orientamento. Non utilizza l'evento mobile jQuery ma sembra funzionare per la maggior parte dei dispositivi.
1. var isIOS = /safari/g.test(navigator.userAgent.toLowerCase());
2. var ev = isIOS ? 'orientationchange' : 'resize';
3. var diff = (window.innerWidth-window.innerHeight);
4. $(window).bind(ev,function(){
5. setTimeout(function(){
6. if(diff*((window.innerWidth-window.innerHeight)) < 0)
7. orientationChanged();
8. },500);
9. });
linea 2 riprende l'evento resize per tutti i browser non-safari in quanto altri browser in altri dispositivi occupano evento di ridimensionamento in modo più coerente di evento di modifica dell'orientamento. http://www.quirksmode.org/m/table.html
La riga 5 esegue il controllo in un timeout poiché alcuni browser Android nativi non acquisiscono immediatamente la nuova larghezza.
Riga 6 Affinché il cambiamento dell'orientamento abbia luogo, il prodotto delle differenze tra altezza e larghezza vecchie e nuove deve essere negativo.
Sto usando questo nei miei modelli di mobili, come l'evento orientationChange non è stato attivato su iOS 7 Safari:
// ORIENTATION CHANGE TRICK
var _orientation = window.matchMedia("(orientation: portrait)");
_orientation.addListener(function(m) {
if (m.matches) {
// Changed to portrait
$('html').removeClass('orientation-landscape').addClass('orientation-portrait');
} else {
// Changed to landscape
$('html').removeClass('orientation-portrait').addClass('orientation-landscape');
}
});
// (event is not triggered in some browsers)
$(window).on('orientationchange', function(e) {
if (e.orientation) {
if (e.orientation == 'portrait') {
$('html').removeClass('orientation-landscape').addClass('orientation-portrait');
} else if (e.orientation == 'landscape') {
$('html').removeClass('orientation-portrait').addClass('orientation-landscape');
}
}
}).trigger('orientationchange');
// END TRICK
con questo script puoi scrivere le regole CSS più facilmente, in base all'orientamento – itsjavi
qualunque u vuole fare sul cambiamento di orientamento. – ghostCoder
se vedi codice splitview, puoi vedere cosa fa per nascondere un pannello in modalità potrait – ghostCoder
ur significa ... come cambiare la larghezza e l'altezza del corpo ... – Nishant