Masz kliknięcie w dowolnym miejscu na stronie internetowej, a następnie wybierz rozwijane menu.

Question

Buduję stronę internetową, która będzie wyświetlana na urządzeniach mobilnych (w szczególności dla Blackberry). Mam rozwijane menu sortowania zaimplementowane jako wybierz > w lewym górnym rogu strony. Zamiast wymagać od użytkownika kliknięcia bezpośrednio na liście rozwijanej, chciałbym, aby użytkownik mógł kliknąć/dotknąć w dowolnym miejscu na stronie, aby otworzyć rozwijane menu wyboru w lewym górnym rogu. Na stronie nie ma żadnych innych linków ani klikalnych obiektów innych niż menu rozwijane wybierz w lewym górnym rogu.

Czy to możliwe? Z tego co odkryłem do tej pory wydaje się, że nie jest możliwe programowe otwarcie rozwijanego <select>, ale doszedłem do wniosku, że wyrzucę tam tę konkretną sprawę.

Answer 1

Ponieważ nie można sfałszować naciśnięć klawiszy za pomocą JavaScript (i słusznie ze względów bezpieczeństwa), najbliżej jest zmienić rozmiar elementu <select> (zmienić go z kontrolki rozwijanej na kontrolkę listy i cofnąć).

Demo, Code (czysty JS, bez biblioteki)

Gdy użytkownik wybierze opcję klikając (lub dotykając) to procedura obsługi zdarzenia click 'zamyka zwanej dalej' list, ustawiając jego rozmiar z powrotem na 1, po czym konwertuje się z powrotem do normalnego kontrolka rozwijania. Testowałem tylko to w (nie-mobilnym) Chrome, daj mi znać, czy działa na telefonie Blackberry, czy nie.

Edit:

Stworzyłem małą jQuery plugin, która otacza zachowanie i konfigurowalność w bardziej zrozumiały kontrolą. Przetestowałem to na Safari Mobile na iOS 4 i zachowuje się jak zwykłe rozwijanie w tej przeglądarce, z tym wyjątkiem, że można je otwierać programowo.

Demo, Code (jQuery 1.7)

To działa tak:

$("select").openable({ triggers: $("#trigger") }); 

Kliknięcie dowolnego spustu otworzy interfejs wyboru.

Dodałem także do obsługi klucza aż zdarzeń złapać Wprowadź, Esc i Kosmiczne na „Zamknij” w polu listy. To naśladuje mechanizm wyboru kontroli w przeglądarkach na komputery.

Oczywiście w przeglądarce na komputerze zmieni to układ strony, ponieważ różni się od natywnego kontrolki rozwijanej. Będziesz musiał wymyślić rozwiązanie CSS do tego (coś z position: absolute i z-index prawdopodobnie). Ale w systemie iOS interfejs wyboru nie jest renderowany na stronie, więc nie stanowi to problemu.

Ponownie, nie testowałem tej wtyczki na BlackBerry ...