jQuery – dymki

Na stronie (szczególnie tam, gdzie jest dość skomplikowany formularz) przydają się podpowiedzi. Najczęściej dla zachowania czytelności ukryte są one pod postacią różnych ikonek (znak zapytania, wykrzyknik, itp.). Mogą one wyglądać następująco:

<img src="ikonka.png" alt="pomoc" title="tutaj tekst opisujący zagadnienie" />

Wystarczy, że użytkownik najedzie myszką na taki obiekt, a po chwili zobaczy domyślny dymek. Czasami jednak domyślne dymki nie wystarczają. Wtedy pomocny będzie javascript.

Generator dymków najlepiej podpiąć do $(document).ready(). W momencie odpalenia tego wydarzenia robimy dwie rzeczy:
– dodajemy div, w którym będzie pokazywana treść

<style type="text/css">
#hint {
 position: absolute ;
 display: none ;
 border: 1px solid #f00 ;
 padding: 10px ;
}
</style>

<script type="text/javascript">
$(document).ready( function() {
$("body").append( '<div id="hint"></div>' ) ;
}) ;
</script>

– wyszukujemy wszystkie odpowiednio oznaczone elementy (w tym przypadku obrazki z klasą hint) i doczepiamy do nich mousemove oraz mouseout.

<script type="text/javascript">
$(document).ready( function() {
$("img.hint").mousemove( function(e) {
 $("#hint").html( $(this).attr( 'title' )) ;
 $('#hint').css({'top': e.pageY + 20, left: e.pageX + 20});
 $("#hint").show() ;
 return false ;
}) ;

$("img.hint").mouseout( function() {
 $("#hint").hide() ;
}) ;

}) ;
</script>

Pierwsza operacja jest czysto kosmetyczna. Jeśli dymki przestaną być potrzebne, to wystarczy usunąć javascript bez potrzeby zagłębiania się w kod strony. Druga natomiast odpowiadać będzie za pokazywanie dymków na stronie. Po najechaniu myszki na odpowiedni obiekt pobrana zostanie treść do pokazania (attr(’title’)), określone położenie dymka na podstawie położenia myszki (e.pageX, e.pageY) oraz zmiana stanu wyświetlania (z none na block). Po przesunięciu myszki poza obiekt dymek zostanie ukryty.

W tym momencie już prawie wszystko jest gotowe, ale pozostaje pewna mała niedogodność. Niektóre przeglądarki mogą pokazywać oprócz naszego, także domyślny dymek. Obejście tego jest dość proste. Skoro i tak całością zajmuje się javascript, to można przenieść tekst z title do jakiegoś innego atrybutu.

<script type="text/javascript">
$(document).ready( function() {

$("img.hint").each( function() {
 $(this).attr( 'hint_title', $(this).attr('title') ) ;
 $(this).attr( 'title', '' ) ;
}) ;
});
</script>

Po przeniesieniu tekstu do hint_title wyrzucamy atrybut title.

Ostatecznie skrypt przyjmie postać:

<script type="text/javascript">
$(document).ready( function() {

$("img.hint").each( function() {
 $(this).attr( 'hint_title', $(this).attr('title') ) ;
 $(this).attr( 'title', '' ) ;
}) ;

$("img.hint").mousemove( function(e) {
 $("#hint").html( $(this).attr( 'hint_title' )) ;
 $('#hint').css({'top': e.pageY + 20, left: e.pageX + 20});
 $("#hint").show() ;
 return false ;
}) ;

$("img.hint").mouseout( function() {
 $("#hint").hide() ;
}) ;

});
</script>

Jeżeli strona uzupełniana jest poprzez ajax i dodatkowa treść zawierać elementy z dymkami, to konieczne będą drobne modyfikacje. Wydarzenia związane z myszką należy powiązać z odpowiednimi obiektami przy pomocy metody .live(). Potrzebna będzie też funkcja do odpalenia w momencie przyjęcia nowej treści:

<script type="text/javascript">
function wstaw_dymki() {
$("img.hint").each( function() {
 if( $(this).attr('title') != '' ) {
  $(this).attr( 'hint_title', $(this).attr('title') ) ;
  $(this).attr( 'title', '' ) ;
 }
}) ;
}

function wez_tresc() {
$.ajax( {
   type: "GET",
   url: "jakis_skrypt.php",
   success: function(result) {
      $("#id_docelowy").html( result ) ;
      wstaw_dymki() ;
   }
 });
}
</script>

• Tweet
• Pin It