Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: rozwijane menu na urządzenia mobilne
Forum PHP.pl > Inne > Hydepark
nospor
Hej,
znacie jakieś ciekawe menu na urządzenia mobilne?
Chodzi mi by wyglądało to mnie więcej tak, że mam obok siebie pozycje X Y Z ...
Klikając na X rozwija mi się jej podmenu, klikajac na Y rozwija mi się podmenu Y itd.
Sęk w tym, że rozwinięte podmenu też może mieć submenu a te submenu może znowu mieć submenu itd. Chodzi więc o jakieś menu, które po pokazaniu submenu zwijałoby wcześniejsze główne menu, zostawiajać tylko wybraną pozycję głównę i pokazywało dane podmenu.

Widział ktoś takie skrypty/rozwiązania? Jeszcze jakby to było w jQuery to już w ogóle bajka.
Fifi209
Może głupie pytanie, ale mógłbyś mi narysować wizualnie jakby to miało wyglądać? Z wysuwaniem submenu i subsubmenu.
ixpack
Może to kretyńskie rozwiązanie, ale czy rozważałeś accordion? W jquery pełno przykładów i mając np. 3 zakładki, każda może mieć kolejne accordion menusy. Ale tu jest problem, że wybierając sub menu nie "nadpisze" Ci wyżej wybranego elementu. Działać to będzie tak:

Opcja 1
Opcja 2
Opcja 3

Rozwijamy Opcja1:

Opcja1:
xxx
yyy
zzz
Opcja2
Opcja3

Rozwijamy xxx:
Opcja1
xxx
111
222
333
yyy
zzz
Opcja2
Opcja3

Dzięki accordion jak wybierzesz np. teraz yyy to da Ci coś takiego:

Opcja1
xxx
yyy
111
222
333
zzz
Opcja2
Opcja3

Nie znam js (przynajmniej na tyle), ale chyba dałoby się zrobić tak, że można "ukryć" Opcja2, Opcja3, ale teraz co z dostępnością? Nie każdy się domyśli, że trzeba znowu kliknąć "Opcja1" aby pokazać Opcja1, 2, 3... Analogicznie co stoi na przeszkodzie, żeby ukryć Opcja1, 2, 3 gdy wybrany jest xxx, yyy lub zzz? Ukrywasz i powiększasz (w teorii - nigdy tego nie robiłem).

Z chęcią sam bym zerknął na takie rozwiązanie.

Edit: coś tam znalazłem, co spełnia jako tako wymagania - można coś na tym zrobić:
http://www.filamentgroup.com/examples/menusHierarchical/
Speedy
Jeśli chodzi o aplikacje webowe na urządzenia mobilne, to polecam jQuery mobile. Robiłem niedawno webową aplikację mobilną, która wymagała sporej interakcji i jQuery mobile dało radę. Mam telefon z Androidem z dolnej półki, więc nie działało to na nim bardzo płynnie, ale dało się z tego korzystać. Poza tym, cały czas tam dodają coś nowego i to rozwijają. Jeśli chodzi o samo menu, to zerknij tu: http://jquerymobile.com/demos/1.0b1/#/demo...ms-selects.html Możesz też użyć tego: http://jquerymobile.com/demos/1.0b1/#/demo...ollapsible.html . Generalnie, przejrzyj sobie dokumentację, a może znajdziesz jeszcze coś fajnego. Z tego, co widzę, to zrobili sporego upgrade'a od czasu, kiedy ostatnio z tego korzystałem (a korzystałem może ponad miesiąc lub 2 miesiące temu), więc nie jestem jeszcze całkiem oswojony z nową dokumentacją.
nospor
@fifi wizualnie ma to wyglądać mniej więcej tak jak zaproponował ixpack
@ixpack dzięki smile.gif Jak przeteszczę to dam znać jak działa smile.gif
@Speedy widziałem właśnie parę dni wcześniej jquery mobile. A powiedz mi jak to się ma do normalnego jquery? Mogę używać jednocześnie obu, czy jedno wyklucza drugie? Jak to się ma do jQuery UI?

ps: jak ktoś ma jeszcze jakieś ciekawe menu to czekam na kolejne propozycje smile.gif
Speedy
Aby jQuery mobile mogło działać poprawnie, musisz załączyć też plik z jQuery, ponieważ jQuery mobile, korzysta z głównej biblioteki jQuery. Trzeba uważać z kolejnością załączania plików, gdyż czasami ma to znaczenie. Np. w moim projekcie musiałem najpierw załączyć jQuery mobile, a dopiero potem zwykłe jQuery, żeby niektóre komponenty działały. Generalnie, w jQuery mobile masz elementy, które posiadają taką funkcjonalność, jak jQuery UI. Np. okienka, animacje i parę innych rzeczy. Wszystko zależy od tego, co konkretnie chcesz zrobić. W jQuery mobile nie było datepickera, który był obecny w jQuery UI, a akurat go potrzebowałem. Znalazłem w poprzedniej dokumentacji jQuery mobile eksperymentalną wersję datepickera, która do działania potrzebowała jQuery UI. Postępowałem wg załączonej instrukcji i wszystko działało. Potrzebowałem też podpowiadania w polach formularza (autocomplete) takiego, jak tu: http://jqueryui.com/demos/autocomplete/ , tylko w wersji mobilnej i udało mi się znaleźć rozwiązanie tego problemu na forum jQuery mobile.
Podsumowując:
1. jQuery mobile potrzebuje do działania jQuery.
2. W jQuery mobile możesz bez problemu używać wszystkich funkcji dostępnych w jQuery.
3. W jQuery mobile jest sporo odpowiedników elementów dostępnych w jQuery UI.
4. Można integrować jQuery mobile z jQuery UI, ale należy to robić ostrożnie i wymaga to trochę zabawy.
szen
Może takie coś: http://codecanyon.net/item/jquery-infinite...u-plugin/164115
nospor
@szen na dzień dobry menu jest "rozwinięte". Powinno być zwinięte. Gdyby nie to, to byłoby to dobre menu. A najgorsze, że nie można tego pobrać i przeteścić. sad.gif
phpion
Cytat(nospor @ 27.06.2011, 07:51:56 ) *
A najgorsze, że nie można tego pobrać i przeteścić. sad.gif

Można: http://www.slashc.com/codecanyon/jquery_in...menu/index.html
nospor
Ok, to poproszę wersję czytelną tego:
http://www.slashc.com/codecanyon/jquery_in...ing-menu.min.js
co bym mógł sprawdzić czy można to menu zwinąć smile.gif
phpion
Jak dla mnie to jest ona czytelna wink.gif jeśli drażni Cię, że kod jest 1 linii to włącz zawijanie wierszy hehe.
nospor
Kod
..... k={H:e,p:g,u:i,3:0,8:f.z},l;i.15("u").r("x","18");t(c){6 m=i.15("L#"+c);t(m.W>0){6 n=m.2("d"),o,p;n&&(n.9.r("x","T"),f.q.B(n.D),i.r("V",n.3),k.3=n.3,k.8=n.D,l=[],m.1j(".K-M-J").......

Napewno mówimy o tym samym kodzie?
phpion
Tak, o tym samym - zwróć uwagę na ";)" w moim poście zakochany.gif
nospor
ha ha ha.... tongue.gif
phpion
Może z jQuery UI wiki coś wyciągniesz. Po prawej masz menu "Navigator". Na dzień dobry musisz kliknąć "back" bo jest już przesunięte.

PS: Co do menu podanego przez szena - pewnie wystarczy dodać nadrzędną listę z elementem np. "Menu" i uzyskasz efekt zwiniętego menu na dzień dobry.
nospor
Cytat
PS: Co do menu podanego przez szena - pewnie wystarczy dodać nadrzędną listę z elementem np. "Menu" i uzyskasz efekt zwiniętego menu na dzień dobry.
No nie do końca. Zwróć uwagę, że menu masz stałą wysokość. Dodając tylko jeden element nadal będę miał stałą dużą wysokość. Musiałbym ewentualnie kombinować w dodanie przycisku, którego kliknięcie powoduje pokazanie tamtego menu.
Speedy
Cytat(nospor @ 27.06.2011, 08:02:08 ) *
Ok, to poproszę wersję czytelną tego:
http://www.slashc.com/codecanyon/jquery_in...ing-menu.min.js
co bym mógł sprawdzić czy można to menu zwinąć smile.gif


Jeżeli chodzi Ci tylko o zwinięcie bloku menu, to pakujesz to wszystko do diva i zwinąć sobie możesz w jQuery.
nospor
Doszedłem do wniosku, że napiszę własne menu.
Całość napisałem nie dłużej niż szukałem tego nieszczęsnego menu smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.