OOUI/Elements/Groups/nl

Elke OOUI-widget die andere widgets bevat (knoppen, opties, invoervelden, tools, enz.) mixt in GroupElement. Het toevoegen, verwijderen en wissen van items gebeurt via de interface die GroupElement biedt.

SelectWidgets, die elkaar uitsluitende opties bevatten, zijn een veelgebruikt voorbeeld van een class die zich mengt in GroupElement. ButtonGroupWidgets, die worden gebruikt wanneer knoppen logisch zijn gegroepeerd, maar elkaar niet uitsluiten, zijn een ander voorbeeld. StackLayouts zijn nog een ander voorbeeld.

Alle items in een groep worden behandeld door een unieke referentie. Als een item wordt toegevoegd aan een groep die een item met dezelfde verwijzing bevat, wordt het bestaande item verwijderd en wordt het nieuwe item toegevoegd aan het einde van het array met items.

Het volgende voorbeeld illustreert een ButtonGroupWidget die twee knoppen bevat. De knoppen zijn gemaakt, maar zijn niet toegevoegd aan de DOM. In plaats daarvan worden ze toegevoegd aan de knoppengroep met behulp van de configuratieoptie items van de widget. Voor een volledige lijst met ondersteunde methoden en configuratieopties raadpleegt u de documentatie op codeniveau voor OO.ui.ButtonGroupWidget.

// Voorbeeld: een ButtonGroupWidget, die wordt gemengd in GroupElement. Andere classes
// die mix in GroupElement omvatten SelectWidgets en StackLayouts.

// Maak knoppen. De knoppen worden later aan de DOM toegevoegd,
// wanneer de groep wordt toegevoegd.
var button1 = new OO.ui.PopupButtonWidget( {
  label: 'Select a category',
  icon: 'menu',
  popup: {
    $content: $( '<p>List of categories...</p>' ),
    padded: true,
    align: 'left'
  }
} );
var button2 = new OO.ui.ButtonWidget( {
  label: 'Add item'
})

// Maak een nieuwe knoppengroep aan en voeg de knoppen eraan toe via de
// configuratie optie ButtonGroupWidget 'items'.
var buttonGroup = new OO.ui.ButtonGroupWidget( {
  items: [ button1, button2 ]
} );

// Voeg de knoppengroep toe aan de DOM.
$( 'body' ).append( buttonGroup.$element );

De mixin-class GroupElement biedt veel methoden die kunnen worden gebruikt om widgets uit een groep toe te voegen, te verwijderen of te wissen. Voor een volledige lijst met ondersteunde methoden, zie de OO.ui.mixin.GroupElement voor GroupElement.

Gebeurtenissen (Events) samenvoegen

U kunt de methode ̩1 van een GroupElement aanroepen om het te vertellen dat het moet luisteren naar alle items voor de gebeurtenis die u opgeeft, en als reactie emit een nieuwe gebeurtenis. De ToolGroup gebruikt dit bijvoorbeeld om zichzelf uit te schakelen wanneer alle ingesloten items zijn uitgeschakeld. Een versleepbaar groepselement luistert ook naar de slepen en neerzetten van de items (dragstart, dragend, drop) en zendt een synthetische gebeurtenis uit om de onderliggende gebeurtenissen opnieuw te ordenen.