1. Dom
  2. Pytanie i odpowiedź
  3. Zalecenia dla podpowiedzi jQuery

Zalecenia dla podpowiedzi jQuery

2009-02-12 16 views
18

Szukam wtyczek podpowiedzi dla jQuery, które pozwoliłyby na następujący typ zachowania.Zalecenia dla podpowiedzi jQuery

<a href="somewhere.html"> 
<span> 
    <img src="someimage.jpg" style="display: none;" /> 
    Here is the tooltip content. 
</span> 
Here is the link to somewhere. 
</a>

Zachowanie że mam nadzieję na to, aby przesunąć kursor nad „Oto link do czegoś” i mają podpowiedzi pop-up pokazuje zawartość rozpiętości zawierające „someimage.jpg” i „Oto podpowiedź zadowolony".

Wolałbym, aby ścieżka z podpowiedziami wraz z ruchem myszki nad linkiem i możliwością wyświetlania jego wyglądu (kolor tła, krycie, kolor obramowania itp.).

Dwie najbardziej popularne etykiety narzędzi, które znalazłem, "clueTip" i "Tooltip" Jörn Zaefferera nie wydają się pasować do rachunku, chyba że czegoś mi brakuje.

Ostatecznie linki i obrazy będą generowane dynamicznie.

Źródło

2009-02-12 jerome

Odpowiedz

4

Czy to ma być jquery? Możesz to zrobić za pomocą CSS, jeśli chcesz.

a.info 
{ 
    position: relative; 
    z-index: 24; 
} 

a.info:hover 
{ 
    z-index: 25;  
} 

a.info span 
{ 
    display: none; 
} 

a.info:hover span 
{ 
    display: block; 
    position: absolute; 
    top: 2em; 
    left: 2em; 
    width: 15em; 
    padding: 6px; 
    border: 1px solid black; 
    background-color: #eeeeee; 
    color: #000; 
}

Następnie można go używać tak, jak go masz.

<a href="somewhere.html" class="info"> 
<span> 
    <img src="images/someImage.jpg" /> 
    Here is the tooltip content. 
</span> 
Here is the link to somewhere. 
</a>

EDIT

Czytając moją dzienną dawkę blogów this article przyszedł do mojej uwagi. Tworzą wtyczkę jQuery, która robi to, co chcesz, wyskakuje obraz z opcjami stylu i ruchem myszy. Sprawdź wynik tutaj.

http://james.padolsey.com/demos/imgPreview/full/

powinien być w stanie śledzić zarówno samouczek i napisać plugin lub pobrać przykładowy wtyczki.

Źródło

2009-02-12 21:25:07 Jab

+0

prawo. W rzeczywistości używamy czegoś podobnego w witrynie, na której obecnie się rozwijam. Interesowało mnie, że mogę podpiąć wskazówkę myszki. Dzięki. – jerome

+0

Hm. Wygląda na to, że nie działa prawidłowo w IE6. – jerome

+0

Sprawdź moją edycję, myślę, że to może być właśnie to, czego szukasz. – Jab

8

informując cię prawdziwa, próbowałem kilka z nich ale "Trzymam się tego, co naprawdę lubię:

http://craigsworks.com/simpletip/sandbox/

Jest wiele rzeczy, które można zmienić i wyglądają fantastycznie w dowolnym miejscu! :)

alt text http://www.balexandre.com/temp/StackOverflow_jquerySimpleTip.png

Updated

Jak PBZ powiedział, to nie jest już dostępna dla infrangiments autorskimi, ale to samo można znaleźć w 'oryginalnej' autora na

http://www.nickstakenburg.com/projects/prototip2/

Źródło

2009-02-13 14:54:55 balexandre

+0

Witryna już nie działa, a komponent nie jest już dostępny. – pbz

+0

Odpowiedź z ponad 1 rok półtora ... Chciałbym wiedzieć, dlaczego spadł! – balexandre

0

Mam również zbudowany a jQuery plugin for tooltips - jest naprawdę mały - 5KB minified, bardzo łatwy w konfiguracji i użyciu, a także z wieloma opcjami konfiguracji; umieści wskazówki wewnątrz rzutni, niezależnie od pionowego/poziomego przewijania lub rozmiaru okna; Szerokość i kolor tła można zmienić podczas inicjalizacji. Nie używał żadnych obrazów - używa CSS do wszystkich fantazyjnych rzeczy i degraduje się z gracją w starszych przeglądarkach. Działa nawet w IE6 :) A domyślnie wygląda to tak:

Screenshot

Źródło

2013-04-28 18:20:43

Powiązane problemy

 Powiązane problemy