Pomysl na help Opcje

[pavlaq]

Witam, z grubsza rzecz ujmując potrzebuję inspiracji do stworzenia helpa w aplikacji. Jednym z pomysłów jest taki jak jest w produktach microsoft office, ale jest troche mało wyszukany. Może wy widzieliście gdzieś ciekawie zaprojektowaną strefę pomocy w aplikacjach / na stronach? Nie mam zielonego pomysłu jak to zaprojektować zwłaszcza, że został postawiony warunek - musi być na każdej podstronie i zajmować mało miejsca. Any ideas?

[prowseed]

Od razu mówię- nie wiem jak wygląda help w produktach microsoft office.

Ja kiedyś zrobiłem małą ikonkę helpa (?) w rogu i po kliknięciu nakładał się na stronę overlay z takimi strzałeczkami i opisem jak co działa. Co ważniejsze elementy, przyciski, wykresy itp miały swojego ukrytego span'a i po kliknięciu wszystkie span'y się pojawiały przyciemniając jednocześnie lekko ekran. Pomysł się podobał- możesz przemyśleć takie rozwiązanie : )

[pavlaq]

jest to jakiś pomysł, myślałem o tym i zeby do tego wykorzystac tooltipy ikony z pytajnikami odpadaja za malo miiejsca po prostu jakbys mial gdzies jakies demo czegos takiego to bylbym dźwięczny jak diabli

[prowseed]

Z helpem była tylko jedna ikonka i na raz wyskakiwało wszyskto

Hmm, skoro chcesz tooltipy, no to naprościej:

[HTML] pobierz, plaintext 
<p class="posiadatooltip">Tutaj coś tam sobie jest<span class="tooltip">Tutaj ukryta treść</span></p>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
.posiadatooltip {
position:relative; /*zeby mozna bylo pozycjonowac absolutnie wzgledem tego elementu*/
display: inline-block; /*zeby mozna bylo czytac wysokosc, na wszelki wypadek, jakby element z tooltip'em miałby typ inline*/
}
.posiadatooltip span.tooltip {
display:block;
bottom:100%;
left:50%;
margin-left: -100px;
width:200px;
position:absolute;
visibility:hidden;
opacity:0;
background: #432e1a;
color: #fff;
}
.posiadatooltip:hover span.tooltip {
visibility:visible;
opacity:1;
}
[CSS] pobierz, plaintext 

No a jak chcesz pierwsze rozwiązanie, to po prostu w jQuery przypisać sobie zdarzenie click dla konkretnej klasy i wyświetlić wszystkie spany ze środka w taki sam sposób:

[HTML] pobierz, plaintext 
$('.tooltip').hide();
$('.posiadatooltip').click(function(){
$(this).find('.tooltip').show();
//ewentualnie tutaj jeszcze obsluzyc zamykanie
});
[HTML] pobierz, plaintext 

Wszystko pisane na szybko, nie gwarantuje, że działa, ale zarys masz : )

Ten post edytował prowseed 7.06.2012, 00:16:06