Der RubberBandSelektor setzt Prototype 1.5.1 voraus.

Was kann der RubberBandSelector?

• Durch Ziehen der Maus Elemente auswählen
• Zusätzliches Auswählen mit SHIFT + KLICK
• Beim Auswählen scrollt der Viewport mit, falls der Mauszeiger den scrollempfindlichen Bereich berührt

Demo – Demo-Video

Welche Optionen gibt es?

• scrollSensitivity (Höhe des scrollempfindliche Bereich in Pixeln)
• elementsSelector (Elemente, die ausgewählt werden können, als CSS-Selektor)
• selectInSelector (Gesamte Aktionsfläche)

scrollSensitivity

Gibt die Höhe des scrollempfindliche Bereich eines Fensters in Pixeln an.

new RubberbandSelector({
     scrollSensitivity: 30,
});

(Standard: 1/4 des Browser-Fensters)

elementsSelector

Definiert mittels CSS-Selektor die auswählbaren Elemente.

new RubberbandSelector({
     elementsSelector: "#browser > *",
});

(Standard: “.selectable”)

selectInSelector

Legt die gesamte Aktionsfläche des RubberBandSelectors fest.

new RubberbandSelector({
     selectInSelector: "#browser"
});

Falls mehrere Elemente als Treffer übergeben werden, wird das erste Element als selectIn genommen.

(Standard: “.selectable”)

Welche Callbacks gibt es?

• beforeSelect
• afterSelectElement
• afterDeselectElement
• afterSelect

beforeSelect

Wird als erstes beim Mausklick aufgerufen und bekommt das Maus-Event als Argument.

afterSelectElement

Wird nach der Auswahl eines Elements aufgerufen und bekommt das ausgewählte Element als Argument.

afterDeselectElement

Wird nach der Aufhebung der Auswahl eines Elements aufgerufen und bekommt das Element als Argument.

afterSelect

Wird als letztes nach dem loslassen der Maustaste aufgerufen und bekommt das Maus-Event als Argument.

Weitere Möglichkeiten?

• enable
• disable
• getAllSelectedElements

enable

Schaltet den RubberBandSelector ein.

var rubberBand = new RubberBandSelector();
rubberBand.enable();

disable

Schaltet den RubberBandSelector aus.

var rubberBand = new RubberBandSelector();
rubberBand.disable();

getAllSelectedElements

Gibt alle ausgewählte DOM-Objekte zurück.

var rubberBand = new RubberBandSelector();
rubberBand.getAllSelectedElements();

Wo gibt’s das Ganze zum Download?

• RubberBandSelector.js (9,4 KB.)

Kommentare (4) 26.07.2007, Stanislav Müller