Seiteninhalt

• Selektierte Einträge aus Liste entfernen (JS - jQuery)
• Beipiel
• Integration in die Seite
• Methoden des Objekts "qp_selectable_ext"
• HTML
• CSS
• Browserkompatibilität
• Anregungen und Verbesserungsvorschläge

Selektierte Einträge aus Liste entfernen (JS - jQuery)

jQuery bietet mit dem UI selectable eine einfache Möglichkeit, Elemente auszuwählen. Häufig sollen diese Elemente weiterverarbeitet werden. An dieser Stelle wird gezeigt, wie die selektierten Einträge aus der Kollektion entfernt werden können.

Um das zu realisieren, wurde ein Script erstellt, das ein Objekt mit den notwendigen Methoden zur Verfügung stellt.

• Script

Weiterhin ist die Liste sortierbar. D.h. die Einträge können per Drag 'n Drop in der Liste nach oben oder unten verschoben werden. Zur Realisierung dieses Features wurde das jQuery-UI sortable verwendet.

Beispiel

Es können mehr Einträge gewählt werden - entweder durch Ziehen mit der Maus mit gedrückter linker Maustaste oder durch Drücken der Strg-Taste und Anklicken des gewünschten Elements mit der Maus).

Wird die Fläche "up/down" angeklickt, kann mittels Drag 'n Drop die Reihenfolge der Einträge angepasst werden.

showSelected removeItems

Integration in die Seite

Neben den erforderlichen jQuery-Dateien (Demo selectable), muss das benötigte JavaScript im head-Bereich des Dokuments als externe JS eingebunden werden, um das neue Objekt und damit die zusätzlichen Funktionalitäten zur Verfügung zu stellen.

<script src="jquery.js" type="text/javascript"></script>
<script src="ui.core.js" type="text/javascript"></script>
<script src="ui.selectable.js" type="text/javascript"></script>
<script src="ui.sortable.js" type="text/javascript"></script>
<script src="qp_selectable_ext.js" type="text/javascript"></script>

Inline-JavaScript

Als erstes wird die Liste sortierbar gemacht. Hierfür wird das jQuery-UI sortable verwendet. Um mit der Selektion nicht zu kollidieren, wird das Verschieben nur bei Drag 'n Drop auf einem span in der Überschrift zugelassen. Das erfolgt über die Angabe der handle-Option bei der Initialisierung des sortable-Objekts.

Um das Objekt zum Entfernen von selektierten Einträgen mit seinen zusätzlichen Funktionalitäten nutzen zu können, muss es zunächst initialisiert werden. Dazu wird es mit einem Objekt im Argument aufgerufen, welches die ID des späteren selektierbaren Elements beinhaltet.

Gleichzeitig wird mit Hilfe der init-Methode das Objekt angelegt und eine Referenz darauf zurückgegeben.

Nachdem die Initialisierung abgeschlossen wurde, kann das selectable-Element angelegt werden. Um die Möglichkeit des Entfernens selektierter Elemente zu bieten, müssen die callback-Funktionen selected und unselected modifiziert werden.

In einem Script-Bereich, der im Dokument nach den extern eingebundenen JS stehen muss, wird folgendes notiert:

<script type="text/javascript">
$(document).ready(function(){
  // Liste sortierbar machen (über Handle)
  $('#mySel').sortable({handle: 'h2 span'});

  // Initialisieren des Objekts
  hSel = qp_selectable_ext({id: 'mySel'}).init();

  // Selektierbares Element
  $('#mySel').selectable({
    selected: function(event, ui){
      // selected-callback modifizieren
      hSel.selectItem(event, ui);
    },
    unselected: function(event, ui){
      // unselected-callback modifizieren
      hSel.unselectItem(event, ui);
    }
  });
});
</script>

Über die Referenz (hSel im Bsp) kann auf die erforderlichen Methoden des Objekts zugegriffen werden.

Methoden des Objekts "qp_selectable_ext"

Das Objekt stellt eine Reihe Methoden zur Verfügung, die zur Organisation und Manipulation der selektierten Elemente dienen.

• init
  Initialisiert das Objekt und liefert eine Referenz darauf zurück.
  hRef = qp_selectable_ext({id:'mySel'}).init();
  mySel ist die ID des Elements, das die selektierbaren Objekte enhält;
  hRef enthält anschliessend die zurückgelieferte Referenz
• selectItem
  Wird im selected-Event aufgerufen und fügt das aktuell selektierte Element der Menge der bereits gewählten Objekten zu.
  hRef.selectItem(event, ui);
  Die Parameter event und ui sind die Argumente, die dem selected-Event übergeben wurden.
• unselectItem
  Wird im unselected-Event aufgerufen und entfernt das aktuell deselektierte Element aus der Menge der bereits gewählten Objekten.
  hRef.unselectItem(event, ui);
  Die Parameter event und ui sind die Argumente, die dem selected-Event übergeben wurden.
• removeItems
  Der Aufruf dieser Methode entfernt alle selektierten Elemente.
  hRef.removeItems();
• showSelected
  Eigentlich nur zu Testzwecken und zeigt die aktuell in der Liste der selektierten Elemente befindlichen Objekte in einem Meldungsfenster an.
  hRef.showSelected();

HTML

Der zugehörige HTML-Bereich mit den selektierbaren Elementen könnte wie folgt aussehen:

<ul id="mySel">
  <li><h2><span>up/down</span>Eins</h2><p>Text 1</p></li>
  <li><h2><span>up/down</span>Zwei</h2><p>Text 2</p></li>
  <li><h2><span>up/down</span>Drei</h2><p>Text 3</p></li>
  <li><h2><span>up/down</span>Vier</h2><p>Text 4</p></li>
  <li><h2><span>up/down</span>Fünf</h2><p>Text 5</p></li>
</ul>
          

Beispielaufruf von "removeItems" über einen Button

Zum Entfernen der selektierten Elemente aus der Liste, kann die Methode removeItems über den onclick-Handler eines button-Elements aufgerufen werden.

<button onclick="hSel.removeItems();">removeItems</button>
          

CSS

Der Vollständigkeit wegen werden hier auch die CSS-Regeln angezeigt, die zur Auszeichnung für das obige Beispiel verwendet wurden.

#mySel .ui-selecting{
	background: #FECA40;
}
#mySel .ui-selected{
	background: #F39814;
  color: white;
  border: 1px solid #FECA40;
}
#mySel{
	list-style-type: none;
  margin: 0;
  padding: 0;
}
#mySel li{
	margin: 0 0 6px;
  padding: 0;
  border: 1px solid #ccc;
}
#mySel li h2{
	margin: 0;
  padding: 3px;
  font-size: 1.3em;
  background: #f7f7f7;
}
#mySel li h2 span{
  float: right;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  width: 60px;
  display: block;
  border: 1px solid #ccc;
}
#mySel li p{
	margin: 0;
  padding: 3px;
  font-size: 0.8em;
}

Browserkompatibilität

Das Script wurde in folgenden Browsern erfolgreich getestet.

• IE 6+
• Firefox 1.5+
• Opera 8.5+
• Netscape 7+
• Mozilla 1.5+
• Safari (Win) 3+

Anregungen und Verbesserungsvorschläge

Anregungen und Verbeserungsvorschläge können gerne hier gepostet werden. Selbstverständlich steht dafür auch das Kontaktformular zur Verfügung.

Foto: aboutpixel.de | smooch