2011-05-17 19 views
6

Próbuję wykonać proste rozwijanie kaskadowe dla mobilnego safari. Mam to działające w 100% na samym safari, które pokazuje normalny spadek stylu. Jednak rozwijane mobilne safari mają przycisk "następny"."następny" w liście rozwijanej na iPhonie Safari nie uruchamia się po zmianie zdarzenia

Naciśnięcie tego przycisku powoduje przejście do następnego spadku kaskady z włączeniem zmiany() - w ten sposób kolejne menu jest puste.

Użytkownik jest zmuszony do naciśnięcia przycisku "Gotowe", aby aktywować zmianę, a następnie kliknąć kolejne menu.

Czy ktoś wie, jak to obejść. Lub jakie zdarzenie DOM jest wywoływane przez mobilne safari?

+0

Wystarczy zwrócić uwagę (dla celów SEO również), ludzie mogą przypisywać to do jQuery lub jQuery Mobile lub innych bibliotek javascript, ale jeśli to nadal jest problem na dzień dzisiejszy (który jest dla nas), to na pewno dobrze byłoby usłyszeć rozwiązanie. – iJames

+1

Interesującym rozwiązaniem tego problemu jest ** dezaktywacja następnego i poprzedniego przycisku **. Próba wykonania tego została podana tutaj: http://stackoverflow.com/questions/7472465/disabling-previous-and-next-buttons-in-mobile-safari – iJames

+0

Wtyczka z [tego posta] (http: //stackoverflow.com/questions/5960731/strange-behavior-of-select-dropdowns-onchange-js-event-when-using-next-on-m/7284325#7284325) pracował dla mnie. Wygląda na to, że ładuję drugą listę zaraz po wybraniu pozycji na pierwszej liście, zamiast czekać, aż użytkownik natrafi na "następny" lub "zrobiony". – Billy

Odpowiedz

0

Jest to natywna nakładka iOS, więc otrzymasz rozmycie, gdy pojawi się nakładka. Spróbuj użyć zdarzenia rozmycia i zobacz, jak to działa.

+0

Z tego co wiem, to nie jest kostka. Próbowałem rozmycia, a nawet skupiłem się na drugim rozwijanym menu.W obu przypadkach na iOS 5 nakładka zdaje się przechwytywać opcje rozwijane przed zdarzeniem zmiany/rozmycia/fokusa, nie umożliwiając aktualizacji pulldowns, a tym samym nie pozwalając na aktualizację kubków iOS. Wciąż mam nadzieję na rozwiązanie. Vernon, czy masz jakieś inne przemyślenia na temat tej natywnej nakładki na iOS? Dzięki! – iJames

+0

Zastanawiam się, czy jest coś jeszcze. Oto jsFiddle, który skonfigurowałem i przetestowałem na moim iPhonie. http://jsfiddle.net/Wjbxt/1/ Zdarzenie zmiany uruchamia się po kliknięciu przycisku Dalej po dokonaniu wyboru w pierwszym menu rozwijanym i zaktualizowaniu wartości w podglądzie. Jestem na iOS 5, przetestuj to i daj mi znać, co otrzymujesz. – vernonk

+0

Ta aktualizacja (http://jsfiddle.net/Wjbxt/2/) dodaje wybraną wartość do drugiego menu rozwijanego. To nie nastąpi natychmiast. Jeśli przejdę do poprzedniej, a następnie z powrotem do drugiej listy, wartość jest. To po prostu nie zostanie natychmiast odebrane. Zdecydowanie wymaga więcej badań. – vernonk

0

Próbowałem wielu bezpośrednich rozwiązań, aby rozwiązać ten problem bez powodzenia. Drugi rozwijany jest po nakładka "Asystent form" Safari Mobile pojawia się z pokrętłem (zwanym "pickerem" w dokumentacji - http://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.html), pojawia się. Tak więc selektor jest wypełniony starymi wartościami.

W innym przypadku, jeśli drugie przełączanie kaskadowe jest nieaktywne, przycisk Dalej asystenta formularzy przeskakuje nad nim. W tym scenariuszu, gdy następny element formularza zostanie wylądowany, drugi plik zostanie zaktualizowany poprawnie, więc naciśnięcie "poprzedni" w tym miejscu daje prawidłową listę w selektorze.

Moja "odpowiedź" polega na tym, że Apple sugeruje, że kaskadowe rozwijanie kaskadowe oparte na JavaScript nie powinno być używane, ale należy zastosować inne UX, ale nie znalazłem niczego, co by to opisało poza standardowymi menu stronicowania jQuery Mobile.

2

Wyłączenie drugiego rozwijania od początku jest jedyną pracą, jaką udało mi się znaleźć do tej pory! wyłącza przycisk "następny" w telefonie komórkowym. Dodaj wyłączone attr (wyłączone = "wyłączone"), aby wybrać i używać javascript lub jQuery, aby włączyć lub wyłączyć.

oto kod jQuery

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

tutaj jest żywą przykład, że robi to

użyciu jQuery: http://www.imotors.com/mobile

Powiązane problemy