Archiv

TechInfo

Portal und Personalisierung mit jQuery

By Hermann Schweers

Aus einer Kundenanforderung heraus entstand auf jQuery basierend ein personalisierter Bereich auf der Startseite des Intranets. In diesem Können die Nutzer eine Reihe von Boxen frei verschieben, diese auf- und zuklappen und das ganze speichern. So lässt sich in einem vorgegebenn Rahmen eine Personalisierung ermöglichen. Umsetzbar ist das mit dem jQuery UI Plugin Draggable und zusätzlich noch mit dem Befehl slideToggle, der ein schick aussehendes auf- und zuklappen der Boxen ermöglicht. Um dies nun zu ermöglichen, sind folgende Schritte nötig:
Alle Boxen, die frei verschiebbar sein sollen bekommen eine Klasse, in diesem Fall "block-1" und sollten absolut positioniert werden.

Desweiteren befinden sich die Boxen innerhalb eines größeren Containers, in dem sie später verschoben werden dürfen.
Die eigentlich Funktionen des Verschiebens wird nun folgendermaßen hinzugefügt:

$('.block-1').draggable({
handle: 'h2',

containment: '.movement-container',
stack: {group: '.block-1', min:1},
stop : function(e, ui) {
var top = ui.position.top;
var left = ui.position.left;
var boxid = $(this).attr("id");
var id = boxid.substr(8);
addPositiontoArray(id,top,left);
}

})//end of draggable

Hier passiert nun folgendes: draggable fügt die eigentliche Funktion des verschiebens hinzu.
Dann habe ich noch die Option "handle" benutzt, damit ist es nur möglich die Box zu verschieben indem man sie im <h2> Element, das sich in jeder Box im oberen Bereich befindet zu verschieben. Da die Boxen nur in einem vorgegebenen Bereich bewegt werden dürfen, gibt man mit "containment" an welcher Bereich das ist. Die Box die gerade verschoben wird sollte sich immer im Vordergrund befinden, hier hilft die Option "stack", indem alle Boxen mit der Klasse "block-1" gruppiert werden und das aktuelle Element einen höheren z-index bekommt und sich so im Vordergrund befindet.
Wichtig für die spätere Personalisierung ist die "stop" Option, sobald die Bewegung beendet ist, wird diese Funktion ausgeführt, in meinem Fall wird die aktuelle Position mit ui.position.top und ui.position.left ausgelesen und zur weiteren Verarbeitung an die Funktion addPositiontoArray übergeben. Dort wird dann später das Abspeichern der Boxzustände übernommen.
Hinweis: Anscheinend funktioniert die stop Option nicht mit der aktuelle jQuery Version 1.3.1 sondern mit Version 1.2.6.

Damit die Boxen nun noch auf- und zugeklappt werden können wird der Befehl slideToggle verwendet.
Zum Verständnis sei kurz der HTML Code gezeigt auf den die Funktion angewendet wird.
<div class="block-1" id="move-box1">
<div class="block-1-header">
<h2>Headline</h2>
<ul class="arrow-nav">
<li>
<img class="openbox" src="../files/layout/$file/open-arrow.gif" alt="">
</li>
</ul>
</div>
<div class="block-1-content">
Content....
<div class="alle">
<a href="#">Footer</a>
</div>
</div>
</div>
Alle Boxen sind so aufgebaut.

$(" .block-1 >.block-1-header > ul > li > img.openbox").click(function(){
$(this).parent().parent().parent().nextAll(":not(.arrow-nav)").slideToggle();

.....
});

Bei einen Klick auf das Bildchen mit der Klasse "openbox" geht man von dem Element mit parent() vier Elemente nach oben und gibt von dort aus allen folgenden Elemente außer dem Element mit der Klasse .arrow-nav den Befehl slideToggle.

Um nun später die Boxzustände abzuspeichern, wird ein Array mit den Initialwerten beschrieben und bei jedem Klick wird der entsprechende Wert neu geschrieben, abhängig von dem Wert der sich im Array befand kann man dann sagen ob eine Box auf- oder zugeklappt ist.

Damit ist es nun möglich die Boxen frei zu verschieben, auf- und zuzuklappen. Durch die entsprechende Funktionen kann man diese Werte dann an die Datenbank überliefern und somit eine Personalisierung erlauben.

Einen Kommentar erstellen

Tags:
Alle Tags