Dieses JavaScript-Skript ermöglicht es euch, einen Schritt in eine neue UI-Richtung im Browser zu machen. RubberBandSelector ermöglicht das massenhafte grafische Selektieren von DOM-Objekten, wie man es beispielsweise vom Finder in Mac OS X gewohnt ist – durch “Maus-Ziehen” und zusätzlich mit SHIFT + KLICK.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

Flash herunterladen

Welche Optionen gibt es?

scrollSensitivity

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

<div class="geshifilter"><div class="html4strict geshifilter-html4strict"><pre class="de1">new RubberbandSelector({
	scrollSensitivity: 30,
});

(Standard: 1/4 des Browser-Fensters)

elementsSelector

Definiert mittels CSS-Selektor die auswählbaren Elemente.

<div class="geshifilter"><div class="html4strict geshifilter-html4strict"><pre class="de1">new RubberbandSelector({
	elementsSelector: &quot;#browser &gt; *&quot;,
});

(Standard: “.selectable”)

selectInSelector

Legt die gesamte Aktionsfläche des RubberBandSelectors fest.

<div class="geshifilter"><div class="html4strict geshifilter-html4strict"><pre class="de1">new RubberbandSelector({
	selectInSelector: &quot;#browser&quot;
});

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

(Standard: “.selectable”)

Welche Callbacks gibt es?

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

Schaltet den RubberBandSelector ein.

<div class="geshifilter"><div class="html4strict geshifilter-html4strict"><pre class="de1">var rubberBand = new RubberBandSelector();
rubberBand.enable();

disable

Schaltet den RubberBandSelector aus.

<div class="geshifilter"><div class="html4strict geshifilter-html4strict"><pre class="de1">var rubberBand = new RubberBandSelector();
rubberBand.disable();

getAllSelectedElements

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

<div class="geshifilter"><div class="html4strict geshifilter-html4strict"><pre class="de1">var rubberBand = new RubberBandSelector();
rubberBand.getAllSelectedElements();

Wo gibt’s das Ganze zum Download?

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.