jQuery: Grafické označení externích odkazů a jejich otevření v novém okně | Profi Magazín - webdesign, ikony, jquery, Textpattern


jQuery: Grafické označení externích odkazů a jejich otevření v novém okně

Jiří Melčák | 29. října 2008 | 19 463× zobrazeno | 3 komentáře
Hodnocení: 4.6 (14 hlasů)

Stává se pomalu běžnou praxí, že bývají graficky odlišovány odkazy na stránce, které vedou mimo daný web. Podívejme se tedy, jak pomocí jQuery naprosto jednoduše odlišit externí odkazy a navíc je případně po kliknutí otevřít v novém okně bez použití target="_blank" (do krve bojující skupina lidí za neotevírání odkazů do nových oken jistě prominou). Nejprve si ukážeme, jak externímu odkazu přiřadíme class="external", pro kterou již budeme mít definované CSS vlastnosti. Ve druhém příkladu vložíme za externí odkaz obrázek bez použití CSS.

Varianta A: nalezení externích odkazů a přiřazení class="external"

Nejprve si ukažme celý kód:

$(document).ready(function() {
  $('#content a').filter(function() {
    return this.hostname && this.hostname !== location.hostname;
  }).addClass('external');
});

Zobrazit příklad

Teď si to trochu rozeberme. $(document).ready() nám zajistí, že se skript provede až po načtení celého DOMu, což je v podstatě u všech jQuery skriptů naprosto nezbytné, jinak by se skript vůbec nemusel vykonat nebo by se provedl jen na části HTML kódu.

$('#content a') zde představuje CSS selektor, který definuje všechny odkazy elementu a uvnitř #content (například DIVu). Zde si dejte největší pozor, tady se dělají největší chyby, neboť někteří horlivě kopírují zdrojový kód neuvědomujíc si, že zde může být selektor, který ve svém HTML vůbec nemají a skript jim tak nefunguje.

jQuery funkce filter() nám vyhledá všechny elementy vyhovující našemu specifikovanému výrazu.

function() { return this.hostname && this.hostname !== location.hostname; }) nám testuje, zda je odkaz odlišný od domény na níž se odkaz nachází. Tedy testujeme location.hostname (naši doménu) vůči this.hostname (doméně v odkazu), které se nesmí rovnat. A zároveň && pro předejití problémů s případnými falešně pozitivními mailto: odkazy přidáme ještě samotné this.hostname.

Funkce addClass('external') je asi pochopitelná - všem vyhovujícím elementům přidá CSS class external. Zde už je potřeba pouze připravit CSS vlastnosti pro tuto třídu - můžete tedy specifikovat např. pozadí odkazu nebo speciální barvu pouze pro externí odkazy. Mohlo by to tedy vypadat například takto:

.external {
  background: url(/design/external.gif) top right no-repeat;
  padding: 0 15px 0 0;
}

Padding si samozřejmě nastavíte podle šířky ikony plus mezery, kterou chcete mít mezi textem a ikonou. 

Varianta B: vložení obrázku za externí odkaz

Další možností je přidat za (případně před) externí odkaz obrázek. Zde je kompletní skript:

$(document).ready(function() {
  $('#content a').filter(function() {
    return this.hostname && this.hostname !== location.hostname;
  }).after('<img src="/design/external.gif" alt="Odkaz směřuje mimo tento web" />');
});

Zobrazit příklad

Jak vidíte jen jsme vyměnili funkci addClass() za funkci after(), která nám za specifikovaný element vloží XHTML, tedy námi definovaný obrázek. Pokud byste obrázek chtěli vložit před odkaz použili byste funkci before().

Otevření externího odkazu v novém okně

Třesničkou na pomyslném dortu je pak otevření odkazu v novém okně bez použití atributu target="_blank".

$(document).ready(function() {
  $('#content a').filter(function() {
    return this.hostname && this.hostname !== location.hostname;
  }).addClass('external')
  .click(function() {
    window.open(this.href);
    return false;
  });
});

Zobrazit příklad

Pomocí funkce click() se po kliknutí tedy otevře nové okno s adresou externího odkazu window.open(this.href).

Komentáře

Jara
11. prosince 2008, 10:59

Nefunguje v Opere

Redaktor ovsem.netAutor článku Jiří Melčák
11. prosince 2008, 11:31

Testoval jsem v Opeře 9.62 a fungují oba příklady jak mají.

nemo
6. března 2009, 09:23

Vaše články o jQuery jsou velice dobré. Škoda, že jich není víc. Zajímala by mě hlavně práce s okny, validace formulářů a vůbec tvorba nějakých interaktivních aplikací.

Komentáře jsou uzavřeny

Pracovní projekty

Bleskovky

Kniha: jQuery Kuchařka programátora

Kniha: jQuery Kuchařka programátora

Rád bych upozornil na zajímavou knihu, o kterou jsem zavadil. Jedná se o knihu s názvem jQuery Kuchařka programátora a je tedy zřejmé, co bude jejím obsahem. Nemá moc smysl cokoliv popisovat. Raději hned mrkněte do obsahu kapitol nebo zkoukněte ukázkovou kapitolu v PDF. Běžná cena je 590 Kč. Momentálně ji můžete online koupit za 502 Kč.

Textpattern.com redesignoval web

Textpattern

Oficiální stránky mého oblíbeného CMS Textpattern prošly redesignem - www.textpattern.com. Ještě je potřeba kompletně redesignovat celý výchozí admin a mohl by se Textpattern lehce vrátit na výsluní. Poslední verze Textpattern 4.2.0 sice podporuje skiny pro admin, ale abych byl upřímný, tak drtivá většina nestojí ani za stažení. Budu muset dodělat tu svou představu o adminu Textpatternu.

Guide to CSS support in e-mail clients

Guide to CSS support in e-mail clients

Tvorba HTML e-mailu rozesíláného především v podobě newsletteru představuje občas nemalé trápení a ladění, aby e-mail vypadal přesně tak, jak chcete nebo jak jste zamýšleli. Na serveru campaignmonitor.com jsou k dispozici tabulky (i ke stažení v PDF, ZIP) s podporou CSS selektorů a vlastností, které lze v nejpoužívanějších e-mailových klientech bezpečně používat.

Fascinující pohled na svět

The Big Picture

Na serveru Boston.com můžete v kategorii The Big Picture vidět fotografie zachycující atmosféru různých zemí, národností, přírodních jevů i katastrof, politiku, válku atd..

Vývoj produktů Apple v letech 1977-2008

Vývoj produktů Apple

Zajímavou podívanou vám nabídne článek, který shrnuje vývoj výrobků Apple, od stolních počítačů přes notebooky, až po jednotlivé periferie jako klávesnice a myš.

Zobrazit další bleskovky »

O všem na internetu