mobilyMap – jQuery Plugin für Kartendarstellung

Mein letzter Artikel beschäftigte sich mit der Einbindung eigener Karten (eigener Grafiken) in Google Maps. Mit mobilyMap steht jetzt ein jQuery-Plugin zur Verfügung, das es ermöglicht, auf Googles Maps-API zu verzichten und vollständige eigene Karten zu realisieren.

Insbesondere zeichnet sich mobilyMap dadurch aus, besonders leichtgewichtig zu sein, das Plugin bringt gerade einmal 5kB auf die virtuelle Textwaage (nur das Javascript, zusätzliche beigefügte Dateien wie beispielsweise Kartenmarker und ähnliche sind natürlich umfangreicher).

Klar, das Plugin verfügt nicht über den doch sehr großen Funktionumfang der Google Maps API, aber für kleinere Projekte kann es durchaus von Vorteil sein. Selbstverständlich können Klicks ebenso abgefangen und bearbeitet werden, wie Marker eingeblendet und noch ein paar Features mehr. Kartendaten können auf einfachste Weise via HTML eingebunden werden:

<div id=“p-900-130″> fügt beispielsweise dem über die ID definierten Punkt der Karte einen Marker hinzu.

Wichtigster Nachteil dürfte im Moment noch sein, dass mobilyMap keinerlei Zoom-Funktion zur Verfügung stellt (dafür wäre allerdings auch entweder ein Mapserver oder eine gekachelteKarte vonnöten).

Dennoch ein sehr interessantes Projekt, das ich weiter beobachten werde – zudem muss ich mal damit herumexperimentieren, wenn es meine Zeit erlaubt. Ich werde dann berichten.

jQuery Snippets

Nachfolgend ein paar sehr hilfreiche jQuery-Snippets, die den täglichen Alltag des Webdevelopers streßfreier gestalten können. Demnächst mehr!


Zebrastreifen für ungeordnete Listen oder Tabellen

Der nachfolgende Code fügt jedem ungeraden Element die Klasse „ungerade“ hinzu:

$("tr:odd").addClass("ungerade");
$("li:odd").addClass("ungerade");


Externe Links automatisch in einem neuen Fenster öffnen

Bisher hat man das gerne über die Vergabe des Zieles „_blank“ gemacht, das ist unter XHMTL Strict aber nicht mehr erlaubt. jQuery bietet eine Lösung, die das Öffnen jedes externen Links in einem neuen Fenster (Tab) erzwingt:

$('a').each(function() {
 var a = new RegExp('/' + [removed].host + '/');
 if(!a.test(this.href)) {
  $(this).click(function(event) {
   event.preventDefault();
   event.stopPropagation();
   window.open(this.href, '_blank');
  });
 }
});

Weiterlesen

FullCalendar – ein jQuery-Plugin

FullCalendarFullCalendar ist ein jQuery-Plugin, das einen Kalender darstellen kann. Das ist jetzt noch nichts Bahnbrechendes oder Aufsehenerregendes. Tatsächlich steckt aber mehr dahinter, denn FullCalendar kann die Kalenderdaten von fast beliebigen Datenquellen beziehen (bereits dabei ist ein Interface für Google Calendar), kann also für vorhandene Kalenderdatenformate ebenso angepasst werden, wie die Möglichkeit besteht, ein neues, eigenes zu definieren.

Das Aussehen von FullCalendar kann leicht angepasst werden, er holt sich seine Daten via AJAX on-the-fly von der Datenquelle und man kann verschiedene Events wie Klick oder Drag mit eigenen Funktionen belegen.

Sehr feines und nützliches jQuery Plugin!