május 2008

Valid új ablakba nyíló hyperlink jQuery segítségével

Biztos sokakban felmerült már a kérdés, hogy hogyan lehet olyan hyperlink-et készíteni ami új ablakban nyílik meg, mégis valid.

Ugyebár megvan a lehetőség HTML segítségével új ablakba nyíló hivatkozás készítésére, de sajnos a hyperlink-nek nincs valid target attributuma.

A kellő eredményt hozza a következő kódrészlet, de nem sajnos nem lesz valid:

<a href="http://drupal.org/" title="http://drupal.org/" target="_blank">drupal.org</a>

Én a megoldásra a jQuery JavaScript könyvtárat használom. Ez amúgy alapól benne van a Drupal CMS-ben. Egy nagyon egyszerű eljárást alkalmazok:
Azokat a hyperlink-ekekt amiket új ablak szeretnénk megnyitni elhelyezem a new_window osztályba, és az oldal betöltődésekor a jQuery segítségével helyettesíthetem a target="_blank" paramétert.

<script type="text/javascript">
$(document).ready(function() {
  $('a.new_window').click(function(){
    window.open(this.href);
    return false;
  });
});
</script>
 
<a class="new_window" href="http://drupal.org/" title="http://drupal.org/">drupal.org</a>

Drupal 6 expedíció: Internet Corporation smink implementálása

Drupal 6 Internet Corporation theme: Letöltés / Download

Mivel még nem sok Drupal 6 smink készült el és nem akartam a Drupal 6 alapértelmezett sminkjét felrakni az oldalamra úgy döntöttem megpróbálok egy Drupal 5-öst átírni, hogy működjön.
Az Internet Corporation theme mellett döntöttem.

Szerencsére felkerült a Drupal oldalára egy dokumentáció a Drupal 6 sminkeléséről
Ez volt a kiinduló alapom, hogy mégis mért nem müködnek a Drupal 5-ös sminkek a 6-os verzió alatt.

Bevallom őszintén nagyobb problémára gondoltam mint amekkora ténylegesen volt. Az egész megvalósítás nem vett igénybe fél óránál többet, persze miután elolvastam a Drupal oldalán a dokumentációt.
Lényeges különbség, hogy kell egy info fájl, mint a moduloknál. Ebbe kell egy a sminkkel kapcsolatos dolgokat deffiniálni. Milyen css-ek tartoznak hozzá, milyen JavaScript-eket töltösön be automatikusan, milyen régiói vannak stb.

Az Internet_Corporation.info így néz ki, mivel nem igényel különösebb js fájlokat, és a template.php fájlba a régiók definiálva vannak, bár itt is megtehettem volna.
Internet_Corporation.info:

; $Id$
name = Internet Corporation
description = Implements of Internet_Corporation theme for Druapl 6
version = 1.0
core = 6.x
engine = phptemplate
stylesheets[all][] = style.css

Innenstől fogva már nagyjából működött is, persze a blokkok nem jelentek meg, mert megválzotak. Az eredeti Internet Corporation smink nem volt valid HTML úgyhogy eltávolítottam belőle a primary_links-re vontakozó hibát.