Hlavní strana   Blog   Práce   Kontakty   Mapa stránek   Filmy  

Podkategorie

C++
Php
Java
JavaScript
Ruby on Rails
Vývoj pro iPhone
Databáze
OpenGL
Hardware
Software
Algoritmy
Technologie
Webdesign
Bezpečnost
Elektronika
Konference
VlastnÍ projekty
Jen tak mimochodem
Hry

Můžete mě sledovat:

          

Projekty

      

Novinky

Nové články
Nějakou dobu jsem psal blog na živě.cz a tomuto blogu se nevěnoval. Během několika dalších dnů budu některé články z blogu na živě.cz přesouvat sem, na tento blog. Bude se jednat hlavně o články, které obsahují zdrojové kódy, protože na živě není implementováno žádné rozšíření pro psaní kódu do článku.

Linkuj a TopClanky
Přidal jsem ke článkům odkazy na Linkuj.cz a TopClanky.cz. Pokud se vám článek líbí, tak to dejte najevo jeho zalinkováním.

Registrace
Dnes, 13.září, byla přídána možnost registrace.

JavaScript: ToolTip Script

Jednoduchý ToolTip, používaný pro zobrazení dalších informací k elementu stránky. ToolTip může obsahovat jak prostý text, tak zformátovaný HTML text.

 

ToolTip chápejte jako malé „vyskakovací okno“, které většinou doplňuje informace u elementu na stránce. Toto vyskakovací okno není vytvořeno novým oknem prohlížeče, ale pouze Divem, vhodně pozivovaným na stránce.

Vše je vidět na jednoduchém příkladu pokud myší přejedete přes zvýrazněné části textu:

Co všechno bude ToolTip umožňovat?

ToolTip bude tedy umožňovat zobrazit rozšířené informace u elementu v HTML. Bude obsahovat pouze jeden div, do kterého se pomocí JavaScriptu vloží vámi zadaný text.

Po najetí na element se okno zobrazí. Zde budeme využívat nastavení CSS vlastnosti visibility a její hodnoty visible, nebo hidden.

Při zobrazení bude okno navíc obsahovat efekt postupného zobrazení, jak je tomu na ukázce, kdy se okno plynule zobrazí a nakonec zůstane částečně transparentní.

Okno se defaultně zobrazuje vpravo dole od kurzoru (dle počátečního nastavení). Takto by mohla nastat situace, kdy by se okno zobrazilo až za hranicí otevřeného okna, musíme tedy ošetřit i tuto možnost a v takovém případě přesuneme okno na druhou stranu kurzoru.

ToolTip

Jako první si vytvoříme několik proměnných, umožňujících částečné nastavení okna.

Prakticky se jedná pouze o proměnné pro posun okna vzhledem ke kurzoru a proměnnou, obsahující identifikátor okna, kvůli možnosti nastylování.

//div ID
var myDivId = 'ZHintDiv';
//posun v ose X
var movingX = 20; //px
//posun v ose Y
var movingY = 10; //px

Nyní je třeba vytvořit div, do kterého se bude ToolTip načítat a ve kterém se bude zobrazovat. Zde máme v podstatě dvě možnosti. Vložit div do stránky ručně, nebo jej vytvořit dynamicky. Kvůli jednoduššímu použití vytvoříme div dynamicky a rovnou mu nastavíme základní počáteční styly:

//vytvorime novy element typu DIV
var divElement;
divElement = document.createElement('div');
//nastavime ID 
divElement.setAttribute('id', myDivId);
//visibility:hidden
divElement.style.visibility = 'hidden';
//positin: absolute
divElement.style.position = 'absolute';
//vychozi pozice
divElement.style.left = '0px';
divElement.style.top = '0px';

Div je vytvořený a tak můžeme pokračovat. Pustíme se do samotné funkce pro zobrazení ToolTipu. Funkce bude obsahovat tři vstupní parametry:

• textový řetězec, který representuje obsah okna
• element, u kterého se tip zobrazuje
• šířku vytvořeného divu

Ve funkci nejprve zjistíme, zda je ve stránce již umístěn námi vytvořený div. V případě že ne, přidáme jej do stránky pomocí appendChild. Dále nastavíme rozměry a visibility na hodnotu visible.

Nakonec musíme vytvořit události pro myš, konkrétně pro onmousemove, při pohybu po elementu a onmouseout, při opuštění elementu:

//TOOLTIP FUNCTION
function tooltip( str, el, width ){
    //pokud neni vytvoreny div pridany v HTML
    if( !document.getElementById(myDivId) )
        //pridame div do stranky
        document.body.appendChild(divElement);
    //nastavime pozadovanou sirku pro div
    divElement.style.width = width + 'px';
    //nastavime visibility:visible
    setOpacity(myDivId, 0 );
    divElement.style.visibility = 'visible';
    pulseOn();
    //vlozime do divu nas text
    divElement.innerHTML = str;
    //pri posunu po elementu menime pozici divu
    el.onmousemove=getMouseXY;
    //pri opusteni elementu okno schovame
    el.onmouseout = hidetip;
}

Ve funkci je navíc volána funkce setOpacity. Tato funkce byla vysvětlena ve článku „Ajax Loader“ (http://www.zaachi...loader.html).

Další neznámou funkcí, která je použita je funkce pulseOn();, zajištující právě plynulé zobrazení okna a nastavení částečné transparentnosti:

function pulseOn(){
    for( i = 0; i <= 9; i++ ){
        setTimeout("setOpacity('" + myDivId + "'," + i/10 + ");", 25*i);
    }   
}

Funkce využívá setOpacity, kterou volá ve velice krátkých intervalech a mění hodnotu opacity u vytvořeného divu. Konečnou hodnotu nastaví na 90 procent a div zůstane částečně transparentní. Kdybychom chtěli, aby byl div neprůhledný, museli bychom změnit hodnotu v cyklu na plných 10.

Event onmousemove, který zachytává pohyb nad elementem, je nastaven na funkci getMouseXY, která zjišťuje pozici kurzoru myši na aktuální stránce:

//zjisteni souradnic mysi
function getMouseXY(e) {
    var browserIE = document.all?true:false
    if (!browserIE) document.captureEvents(Event.MOUSEMOVE)
    //zjisteni souradnic
    positionX = browserIE?event.clientX + document.body.scrollLeft:e.pageX;
    positionY = browserIE?event.clientY + document.body.scrollTop:e.pageY;
    //posun elementu 
    setPosition();
    return true;
}

Funkce zjistí pozici myši a volá funkci setPosition, která konečně nastaví pozici vytvořeného divu. Zde se navíc ošetřuje zobrazení divu za okrajem okna, a případné upravení pozice:

//nastaveni pozice okna
function setPosition(){
    var windowWidth = 0;
    //zjisteni sirky okna
    if( typeof( window.innerWidth ) == 'number' ) {
        windowWidth = window.innerWidth;
    } else if( document.documentElement && document.documentElement.clientWidth ) {
        windowWidth = document.documentElement.clientWidth;
    } else if( document.body && document.body.clientWidth  ) {
        windowWidth = document.body.clientWidth;
    }
    //pokud je pozice za okrajem okna, nastavi se pred kurzor
    if( ( positionX +  parseInt(divElement.style.width ) + movingX + 50 ) > windowWidth ){
        positionX -= ( movingX + parseInt(divElement.style.width ) );
    }
    divElement.style.left =  ( movingX + positionX ) + 'px';
    divElement.style.top = ( movingY + positionY ) + 'px';
}

Poslední funkcí, která je nastavená na event onmouseout, je hidetip, jež skryje okno. To se provede pouhým nastavením visibility na hodnotu hidden:

//schovani okna
function hidetip(){
    divElement.style.visibility = 'hidden';
}

Styly okna

Jelikož vytvořený div obsahuje unikátní ID, můžeme mu vytvořit libovolné styly a přizpůsobit jej tak designu webu. Styly nastavíme klasicky:

#ZHintDiv{
    float:left;
    border: 1px solid silver; 
    border-right: 3px solid black;
    border-bottom: 3px solid black;
    background-color: white; 
    padding: 4px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 11px;
    font-weight: normal;
}

Volání funkce

Při zobrazení voláme funkci tooltip, která obsahuje, jak již bylo zmíněno, tři vstupní parametry. První je textový řetězec zobrazení v divu, druhý je objekt elementu, nad kterým se tooltip zobrazí a třetí je šířka okna, zadaná jako číslo představující hodnotu v pixelech:

ipsum

Do tipu můžeme vkládat i složitější elementy, jako libovolně zformátované HTML, například takto:

Here

Závěrem

Zobrazit celý javascript můžete zde: tooltip.js.txt

Použití ToolTipu může být v některých případech poměrně praktické. Uvedený příklad je možné libovolně rozšiřovat a upravovat.