: Home / JavaScript / artykuły / Opisy w chmurce

Warning: file_get_contents(http://graph.facebook.com/http://youthcoders.net/javascript/artykuly/587-opisy-w-chmurce.html): failed to open stream: HTTP request failed! HTTP/1.0 403 Forbidden in /var/www/old-yc/plugins/content/addthis.php on line 38
Opisy w chmurce
Ocena użytkowników: / 2
SłabyŚwietny 
Wpisany przez Patryk yarpo Jar   
środa, 26 maja 2010 17:14

Chcąc dodać opis do jakiegoś elementu na stronie (np. skróty lub pojęcia, które nie muszą być znane każdemu internaucie) warto rozpatrzyć kilka możliwości:

  1. atrybut title
  2. własny mechanizm

W tej poradzie postaram się pokazać oba. Drugi później odpowiednio rozwinę.

 

Atrybut title

Jest częścią standardu HTML. Po prost dodajemy do znacznika atrybut z wartością. Po najechaniu nad element pokaże się mała chmurka.

<p title='To jest opis'>Najedź na mnie</p>

I oto przykład działania.

Przykład zastosowania atrybutu title

Dawniej

Kiedyś IE 6 błędnie używał do tego celu atrybutu alt dla znaczników <img/>.

 

Własny mechanizm

Aby było łatwiej i krócej użyję jQuery.

Wykorzystam dwa zdarzenia: mouseover i mouseout. Odpowiednio dodając do DOM-u nowy węzeł, lub go usuwając. Można zoptymalizować i jedynie ukrywać. Ale to ma być prosty przykład.

<html>
<head>
    <title>Przykład jQuery</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('#a').mouseover(function() {
            $('<span class="bubble">').html('opis').appendTo($(this));
        }).mouseout(function() {
            $(this).find('span.bubble').remove();
        });
    });
    </script>
    <style type="text/css">
        #a   { position: relative; }
        #a span.bubble   {
            position: absolute;
            top: 20px;
            left: 0;
            width: 180px;
            padding: 10px;
            border: 1px solid #000;
            line-height: 30px;
            background: #fff;
        }
    </style>
</head>
<body>
    <p id="a">To jest mój napis</p>
</body>
 
</html>

 

Powyższy kod daje taki oto wynik:

 Własny mechanizm

Oczywiście znacznik <span/> może być ładniej ostylowany.

 

Ulepszenie?

Wszystko niby wygląda ok, ale jednak jest to trochę kodu... No i te id węzła zaszyte w kodzie $('#a')... Nieładnie. A może zrobić z tego wtyczkę jQuery? Czemu nie. Jednak to jest temat na osobny artykuł :)

Tags:
< Poprzednia   Następna >
 

Dodaj komentarz


Kod antysapmowy
Odśwież