rozwijane menu na urządzenia mobilne Opcje

[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.

Powód edycji: [nospor]:

[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/

Ten post edytował ixpack 24.06.2011, 21:01:56

[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ą.

Ten post edytował Speedy 25.06.2011, 14:44:21

[nospor]

@fifi wizualnie ma to wyglądać mniej więcej tak jak zaproponował ixpack
@ixpack dzięki (IMG:style_emoticons/default/smile.gif) Jak przeteszczę to dam znać jak działa (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/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ć. (IMG:style_emoticons/default/sad.gif)

[phpion]

A najgorsze, że nie można tego pobrać i przeteścić. (IMG:style_emoticons/default/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ąć (IMG:style_emoticons/default/smile.gif)

[phpion]

Jak dla mnie to jest ona czytelna (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/zakochany.gif)

[nospor]

ha ha ha.... (IMG:style_emoticons/default/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]

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]

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ąć (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/smile.gif)