2011-12-22 18 views
12

Szukałem sposobu na implementację wyskakującego okienka podręcznego bez powodzenia. Ponieważ jest używany na wielu stronach, pomyślałem, że łatwo będzie znaleźć instrukcje, ale zastanawiam się, czy brakuje mi czegoś podstawowego. Spojrzałem na qTips2 i kilka innych, ale te wydają się być czymś więcej niż potrzebuję.Jak tworzyć wyskakujące okienka wyskakujące w Railsach 3.1

Mam aplikację Rails 3.1 i chcę wyświetlić więcej szczegółów, gdy użytkownik unosi się nad linią w tabeli. Czy jest to coś wbudowanego w Railsy, ​​którego mi brakuje, czy też potrzebuję dodatku?

Na pewno byłbym wdzięczny za wskazanie mi kogoś w dobrym kierunku.

Dzięki!

+0

To byłoby proste unosić div. –

+0

To nie jest pytanie Railsowe, ale raczej pytanie o CSS lub JavaScript. –

+0

Ha! Tagi javascript i css zostały dodane zanim mogłem dostać się do niego. –

Odpowiedz

11

korzystać z niektórych CSS i JavaScript!

Oto przykład można grać z: http://jsfiddle.net/cdpZg/

Kopiowanie go tutaj, na wszelki wypadek.

HTML:

<div id='user'>I am a user. Move your mouse over me</div> 
<div id='popup'>Extended info about a user</div> 
<div>I a piece of useless information. No use hovering over me.</div> 

CSS:

#popup { 
    height: 50px; 
    width: 200px; 
    text-align: center; 
    vertical-align:middle; 
    background-color: cornflowerblue; 
    color: white; 
    display: none; 
    padding-top: 8px; 
    position: absolute; 
} 

Javascript:

$(document).ready(function() { 
    $('#user').hover(function() { 
     $('#popup').show(); 
    }, function() { 
     $('#popup').hide(); 
    }); 
}); 
+0

Dziękujemy Sergi, Za korzyści dla kogokolwiek innego ... Aby to zadziałało w mojej aplikacji Rails 3.1, musiałem objąć JavaScript z '$ (dokument) .ready (function() { " javascript jedzie tutaj " });'); – SteveO7

+0

@ SteveO7 tak, to trochę podstawowe rzeczy. Zaktualizuję odpowiedź na wszelki wypadek :-) –

+2

Czasami te podstawowe rzeczy mogą Cię kosztować dużo czasu! Jeszcze raz dziękuję – SteveO7

6

Wystarczy ustawić tytuł na link jak to

<a title="Some text that will show up when I hover over this link">My link</a> 
+1

Nie miałem pojęcia, że ​​to było takie proste ... Poprowadziłem osłonięte życie komputerów stacjonarnych i dopiero zaczynałem pracować nad Railsami. Dzięki! – SteveO7

+0

@ SteveO7 nie ma problemu, jeśli to zadziałało, proszę oznaczyć swoje pytanie jako udzielone na przyszłe referencje, cieszę się, że mogę pomóc –

+0

Bassam, czy istnieje sposób, aby to zrobić na non-link? To, na czym chcę go użyć, to "" w tabeli. – SteveO7

Powiązane problemy