2011-05-17 8 views
6

Sto provando a fare un semplice menu a cascata per Safari mobile. Ho questo funzionamento al 100% nel safari stesso, che mostra i normali menu a discesa. Tuttavia, i menu a discesa Safari per dispositivi mobili hanno un pulsante "successivo".'successivo' nel menu a discesa su iPhone Safari non si attiva sull'evento di modifica

Premendo questo pulsante successivo si passa alla successiva discesa della cascata con l'attivazione di onchange() - quindi il prossimo menu a discesa è vuoto.

L'utente è costretto a premere 'done' per attivare la modifica, quindi fare clic sul prossimo menu a discesa.

Qualcuno sa un modo per aggirare questo. Oppure quale evento DOM viene attivato dall''next 'di Safari mobile?

+0

Solo per notare (per scopi SEO anche), la gente potrebbe attribuiscono questo a jquery o jquery mobile o altre librerie javascript, ma se questo è ancora un problema a partire da oggi (che è per noi), allora sarebbe sicuramente bene ascoltare una soluzione. – iJames

+1

Una soluzione interessante a questo problema è quella di ** disattivare i pulsanti successivo e precedente **. Un tentativo di farlo è stato fornito qui: http://stackoverflow.com/questions/7472465/disabling-previous-and-next-buttons-in-mobile-safari – iJames

+0

Il plug-in da [questo post] (http: //stackoverflow.com/questions/5960731/strange-behavior-of-select-dropdowns-oschange-js-event-when-using-next-on-m/7284325#7284325) ha funzionato per me. Sembra che si stia caricando il secondo elenco non appena si seleziona l'elemento nel primo elenco invece di aspettare fino a quando l'utente non fa "next" o "done" – Billy

risposta

0

Questo è un overlay nativo iOS, quindi quello che otterrai è un evento di sfocatura quando viene visualizzato l'overlay. Prova a usare l'evento sfocatura e guarda come funziona.

+0

Da quello che posso dire, non è un dado. Ho provato a sfocare e anche a concentrarmi sul secondo menu a discesa.In entrambi i casi su iOS 5, la sovrapposizione sembra catturare le opzioni a discesa prima dell'evento di modifica/sfocatura/messa a fuoco, pertanto non consente l'aggiornamento dei menu a discesa e quindi non consente l'aggiornamento dei dispositivi di scorrimento iOS. Ancora sperando in una soluzione. Vernon, hai altre idee su questo overlay nativo iOS? Grazie! – iJames

+0

Mi chiedo se potrebbe esserci qualcos'altro. Ecco un jsFiddle che ho installato e testato sul mio iPhone. http://jsfiddle.net/Wjbxt/1/ L'evento change si attiva quando faccio clic su Avanti dopo aver effettuato una selezione nel primo menu a discesa e aggiorna il valore nell'anteprima. Sono su iOS 5, testarlo e fammi sapere cosa ottieni. – vernonk

+0

Questo aggiornamento (http://jsfiddle.net/Wjbxt/2/) antepone il valore selezionato al secondo menu a discesa. Questo non succede immediatamente. Se vado prima e poi di nuovo al secondo menu a discesa, il valore è lì. Semplicemente non viene prelevato immediatamente. Sicuramente richiede più ricerca. – vernonk

0

Ho provato molte soluzioni dirette per risolvere questo problema senza successo. Il secondo pulldown viene popolato dopo L'overlay di "modulo assistente" di Safari Mobile viene fornito con lo spinner (chiamato "raccoglitore" nella documentazione - http://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.html), viene visualizzato. Quindi il raccoglitore è popolato da vecchi valori.

In un altro caso, se il secondo pulldown in cascata è inattivo, il pulsante Avanti dell'assistente modulo salta direttamente su di esso. In tale scenario, tuttavia, una volta che il seguente elemento del form è atterrato, il secondo pulldown si aggiorna correttamente, quindi toccando "precedente" in quel punto si ottiene l'elenco corretto nel selettore.

mia "risposta" è che Apple sta suggerendo che pulldowns cascata basate su JavaScript non devono essere utilizzati, ma che un altro UX deve essere attuata se non ho trovato nulla che descrive questa parte i menu standard jQuery Mobile tipo di paging.

2

Disabilitare la seconda discesa dall'inizio è l'unica operazione che ho trovato fino ad ora! disabiliterà il pulsante "next" su iphones

Aggiungi il disabled attr (disabled = "disabled") per selezionare e utilizzare javascript o jQuery per abilitare o disabilitare.

Ecco il codice jQuery

$(".DD1").focus(function() { 
    $('.DD2').attr('disabled', 'disabled'); 
}).blur(function() { 
    $('.DD2').removeAttr('disabled'); 
}); 

ecco un esempio dal vivo che sta facendo questo

utilizzando jQuery: http://www.imotors.com/mobile

Problemi correlati