Ajaxschmiede.de

Nachdem im Juni die Version 1.2 des Javascript-Frameworks MooTools erschien, gaben die MT-Entwickler am heutigen Tag das fehlerbereinigte Release 1.2.1 frei.

Im Gegensatz zur letzten Veröffentlichung gibt es diemal keine weltbewegenden Neuerungen. Stattdessen legte man großen Wert auf das Beseitigen von Programmfehlern und Verbesserungen, die da wären:

• Element.set(‚html‘) erlaubt nun das Einfügen von HTML in jegliche Elemente (einschließlich table and select)
• Browser.Engine detection erkennt WebKit 525 und Opera 9.6
• neue Eigenschaft Browser.Features.query prüft auf Unterstützung des neuen querySelector’s
• Beheben von Speicherlecks in Bezug auf die Elementspeicherung und Iframes
• wiederbelebte Unterstützung von Safari 2 durch Überarbeiten von class.js,  $exec und setter/getter
• Beschleunigung des hasChild-CSS-Selektors

In der Changelog-Datei findet man noch weitere Änderungen.

Die Arbeiten am nächsten Hauptrelease 1.3 sind indes schon angelaufen. Definitiv steht bereits fest, dass Safari 2 und Opera 9.5 keine weitere Unterstützung seitens der MT-Entwickler erhalten werden.

Vorher steht noch die Version 1.2.2 ins Haus, die sicherlich einige weitere Fehler beheben wird und das ein oder andere interessante Feature einführen wird. Große Änderungen werden jedoch erst mit 1.3 Einzug halten.

Der Deutsche Jan A. Manolov hat auf Grundlage des Frameworks MooTools (1.2) das ddMenu-Script zum Erstellen von eigenen Kontextmenüs geschrieben.

Ein einziger Klick auf die rechte Maustaste genügt, um anstatt des standardmäßigen Menüs eine individuelle, an die jeweiligen Bedürfnisse angepasste Optionenliste aufzurufen.

Sowohl das Erscheinungsbild, als auch die Steuerung des Menüs ähneln der gewohnten Betriebssystemumgebung lässt sich aber gleichzeitig völlig frei an die eigenen Vorlieben und Vorstellungen anpassen.

Durch gedrückthalten der Strg-Taste beim Rechtsklicken wird das Standardmenü aufgerufen. Wenn man die Shift-Taste beim Klicken der rechten Maustaste drückt, werden beide Menüs nebeneinander angezeigt.

ddMenu, das sich auch sanft Ein- und Ausblenden lässt, bietet Unterstützung für alle üblichen Browser (Firefox 2+, Safari 3, Internet Explorer 6+, Opera 9+).

Neben dem bereits erwähnten MooTools-Framework benötigt man noch die folgenden beiden Dateien:

• ddmenu.css
• mootools.ddmenu.v1.js

Sind alle Dateien eingebunden, erstellt man die Menüstruktur als HTML-Liste. Jedes Item erhält hierbei eine eigene ID.

<div id="ddmenu2" style="display: none">
<li class="title">Hauptmenü</li>
<li class="item" id="menu_item1"><a href="#">HTML</a></li>
<li class="item" id="menu_item2"><a href="#">CSS</a></li>
<li class="item" id="menu_item3"><a href="#">JS</a></li>
<li class="item" id="menu_big_item"><a href="#">Web 2.0 - Alles zusammen</a></li>
<li class="sepline"></li>
<li class="item" id="menu_item_with_icon1"><a class="objects" href="#">Patrick</a></li>
<li class="item" id="menu_item_with_icon2"><a class="letter" href="#">Tobias</a></li>
<li class="item" id="menu_item_with_icon3"><a class="umbrella" href="#">Ajaxschmiede</a></li>
</div>

Zuletzt muss noch die nachfolgende Initialisierungsfunktion in ein Script-Tag eingebaut werden:

function iniz () {
	pagemenu = new DDMenu ('ddmenu2', document, {
	onOpen: function (e) {  //console.log (e);
			this.enableItems(true);
			this.enableItems('menu_item_with_icon2',false);
			$(e.target).get('tag') == 'a' ? this.enableItems('menu_spec_links',true) : this.enableItems('menu_spec_links',false);
		},
		onItemSelect: function (act_id,act_el,act_from) {
			//console.info ("menu action -> item id: \"%s\" from: %o in %o", act_id, act_el, act_from);
			//Hier kommen die Klickevents hinein
		}
	});
}

if ( window.addEventListener ) {
	addEventListener( "load", iniz, false );
} else {
	attachEvent( "onload", iniz );
}

Ich habe selbst ein Demo-Menü erstellt.

Nachdem vor fast 6 Monaten die Betaversion des Javascript-Frameworks MooTools veröffentlicht wurde, wurde vergangene Woche nun die finale Version zum Download freigegeben.

Zu den Hauptneuerungen zählen:

• eine völlig überarbeitete API
• eine übersichtlichere Dokumentation
• bessere fx-Funktionen, einschließlich neuer generic morph– und tween-Effekte
• echte Hash-Objekte
• Swiff-Objekt zum Einbinden von Flash-Inhalten
• elementgebundene Metadaten-Speicherung

MooTools 1.2 unterstützt alle gängigen Browser (Safari 2+, Internet Explorer 6+, Firefox 2+, Opera 9+) und bietet einen ähnlichen Funktionsumfang wie jQuery.

Wer mehr erfahren möchte, schaue sich die neue Dokumentation und die Demos an.

Um seine Fähigkeit im Umgang mit MooTools zu verbessern, begann Markus Inger an einer BeJeweled-Umsetzung basierend auf dieser Javascript-Bibliothek zu schreiben.

Ziel des Spiels, das er BeSlimed getauft hat, ist es, wie im Original, durch Vertauschen benachbarter Blöcke in einer vorgegeben Zeit möglichst viele Punkte zu erzielen.

Um Punkte zu bekommen, müssen sich mindestens 3 Blöcke mit gleichem Motiv in einer Reihe (horizontal oder vertikal) befinden.Vertauscht werden darf sowohl von oben nach unten und links nach rechts (natürlich auch umgekehrt).

Mit steigender Levelzahl nimmt die Zahl der verschiedenen „Monster“ zu, wodurch auch der Schwierigkeitsgrad nach oben geht.

Inger will nach der Fertigstellung des Spiels an einer Variante mit größeren Motiven arbeiten. Vorher müssen jedoch noch einige Fehler im Skript behoben werden. Wer möchte kann sich gern an der Weiterentwicklung von BeSlimed beteiligen.

Und nun: Ab zum Spiel und viel Spaß.

Harald Kirschner veröffentlichte Version 2.0 seiner Multi-Uploadlösung FancyUpload, die den Flashuploader swiff und die Javascript-Bibliothek MooTools voraussetzt.

FancyUpload ist eine einfach zu handhabende Anwendung, die es ermöglicht mehrere Uploads nacheinander auszuführen und diesen Vorgang graphisch darzustellen. Es ist leicht einzurichten, serverunabhängig, lässt sich mit Hilfe von CSS und XHTML vollständig frei gestalten und basiert auf MooTools, um auf allen aktuellen Browsern (Internet Explorer 6+, Opera 9, Firefox 1.5+ und Safari 2+) zu laufen.

Die Featureliste liest sich wie folgt:

• Auswählen und Uploaden von mehreren Dateien
• Herausfiltern von Dateitypen durch einen Auswahldialog
• Optionale Events um eigene Ereignisfunktionen einzubinden
• Anzeigen von nützlichen Dateiinformationen noch vor Beginn des Uploadvorgangs
• Begrenzen der Uploads über die Dateigröße oder – anzahl
• plattform- und serverunabhängig, setzt nur Flash 9+ vorraus
• Abbrechen laufender Uploads, Hinzufügen neuer Uploads während eines laufenden Hochladevorgangs
• Alles ist optional, dokumentiert und lässt sich leicht anpassen
• Serverantwort nach dem Uploaden zum Anzeigen zusätzlicher Dateiinformationen oder einer Bildvorschau
• Angabe der aktuellen Uploadgeschwindigkeit und der verbleibenden Zeit
• Senden zusätzlicher Informationen über Variablen mittels GET und POST
• Bestimmen des Dateinamens nach dem Uploadvorgang

Vor kurzem wurde die Beta-Version des Javascript-Frameworks MooTools 1.2 veröffentlicht.

MooTools, das mit zu den umfangreichsten Javascript-Programmiergerüsten gehört, bietet – ähnlich wie jQuery – Möglichkeiten zum vereinfachten Ansprechen von Elementen samt Unterstützung einer Vielzahl an CSS-Selektoren und zur Erzeugung von Effekten.

Kernstück der MooTools ist sicherlich die sehr gut implementierte Unterstützung des objektorientierten Ansatzes von Javascript, die den Umgang mit Klassen für JS-Entwickler erheblich erleichtert. Eine Einführung in die Grundlagen der MooTools-API findet sich auf der Projekthomepage.

Folgende Neuerungen fanden in Version 1.2 Einzug:

• breitere Unterstützung erweiterter Selektoren, z.B. CSS 3-Pseudo-Selektoren wie var myElements = $$(‚div:disabled‘); oder verschachtelter Selektoren wie $$(‚div.class1.class2[id=“someid“][name=“somename“]‘);
• vollständige iFrame-Unterstützung
• vereinfachte Anwendung von „generics“ zum Hinzufügen vom prototype-Funktionen an ein Objekt
• konsistenter Class-Konstruktor, der es ermöglicht, die Klasse zu erfragen, von der ein Objekt erzeugt wurde
• eine Vielzahl weiterer kleiner Verbesserungen

Gesondert möchte ich eine weitere Neuerung eingehen, die das Speichern und Verwalten von Elementen betreffen.

Wie MooTools-Entwickler Tom in seinem Blog in englischer Sprache genauer erklärt, wurde es durch Probleme mit dem Internet Explorer notwendig, sich dem Verwalten von Objekten als Elementattribute zu beschäftigen.
Das Ergebnis ist ein Workaround, das jegliche Probleme beseitigt und den Entwicklern dadurch ermöglicht, an Elemente Objekte als Attribut anzuhängen – ohne sich um die Besonderheiten des IE zu kümmern.

Wie das nun konkret ausschaut, soll der nachfolgende, von mir kommentierte Beispielcode zeigen:

var element = $('myElement');
// greift auf Element "myElement" zu
var data = element.retrieve('galleryData', {});
// hängt an ein leeres Objekt mit dem Namen 'galleryData' an 'myElement' an
data.id = 16;/
/ hängt Attribut 'id' an 'galleryDate' an
data.source = '/images/16.jpg';
// setzt Attribut 'source' für 'galleryDate'
data.title = 'Some Title';
// Element 'galleryDate' bekommt 'title'-Attribut

Der Zugriff funktioniert genauso:

$('myElement').retrieve('galleryData');
// Rückgabewert: { id: 16, source: '/images/16.jpg', title: 'Some Title' }
$('myElement').retrieve('galleryData').id;
// Rückgabewert: 16

MooTools 1.2 beta 2 herunterladen

Dieser Beitrag richtet sich an alle, die ihre Webseiten mit einer eleganten, animierten Bildergalerie aufpeppen möchten.

Die Web2.0 Bildergalerie „slideshow“ von pathfusion bietet dafür einen nützlichen Funktionsumfang. Sie ermöglicht es, die Einzelbilder mit Effekten wie fade (überblenden), wipe (verschieben) und slide (überdecken) zu wechseln.

Die Integration und Konfiguration des Scripts ist sehr einfach.

Zuerst müssen die benötigten Javascript-Dateien im Header eingebunden werden.

<link rel="stylesheet" type="text/css" href="slideshow.css" media="screen" />
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="backgroundslider.js"></script>
<script type="text/javascript" src="slideshow.js"></script>

Konfiguriert wird das Script wie folgt:

var obj = {
	wait: 3000, /*Wartezeit bis zum Bildwechsel*/
	effect: 'fade', /*Effekt*/
	duration: 1000,
	loop: true, /*als Endlosschleife abspielen (ja / nein)*/
	thumbnails: true, /*Vorschaubilder nutzen (ja / nein)*/
	backgroundSlider: true, /*die bachgrundslider-Klasse für Vorschaubilder nutzen (ja / nein)*/
	onClick: function(i){alert(i)} /*Funktionsaufruf, wenn ein Bild angeklickt wird*/
}
/*ein neues Objekt der SlideShow-Klasse erstellen*/
show = new SlideShow('slideshowContainer','slideshowThumbnail',obj);

Den restlichen, zugehörigen HTML Code entnehmt ihr der slideshow Projektseite.

Die Galerie benötigt das Javascript Framework mootools und ist mit Firefox 2, IE 6, IE 7 und Safari kompatibel.

Ich habe eine Demoseite erstellt, auf der ihr euch den gesamten Funktionsumfang anschauen und testen könnte. Über die Formularelemente auf der rechen Seite können die Parameter der Galerie variiert werden.

Auf das Bild Klicken, um zur Demoseite zu gelangen: