UI Additions are used to bind a specific behaviour to dom elements marked with a specific selector.
autosize addition for example is bound to all textareas with an
.autosize class attribute and enables an automatic resize of the textarea.
UI Additions are automatically applied on full or pjax page loads. In case you need to apply additions to other dom elements you can manually apply additions.
New additions can be registered by calling the
ui.additions.register() method as follows
In this example we added a
toggle addition which will be applied to all nodes with a
.toggle class selector.
Note: custom additions should be registered within your modules
initfunction, in this case your addition will be automatically be applied within the initialization phase.
Tip: You should only add new additions in case they are used regularly within your application, since each new addition will add an additional selector search to your initialization process.
Register Addition without selector (since v1.4)
It is also possible to register additions without a selector as in the following example:
The actual selector for such an addition would be
Note: This way of defining additions is preferred since we save additional addition queries.
register method also accepts an optional
options parameter after the handler function, which can be used to extend already registered additions.
The following options are available:
extendcan be used to extend an existing addition by either adding a handler or adding a selector, if this option is not set a registration call for an already registered addition will be ignored.
prependwill prepend the new handler to the addition handler chain in case of an
extendcall if set to true
Our previous toggle addition can be extended as follows
Manually apply Additions
By default the document
body will be parsed for additions within the humhub initialization phase. If you require to apply
additions to nodes inserted after the initialization phase e.g. nodes loaded by ajax, you'll either have to call the
applyTo() function on your new nodes as
or add a
MutationObserver to your container as follows
Info: You won't have to worry about the applying of additions when using the
You can also just apply specific additions by using the apply options filter:
- autosize -
.autosize: adds the autosize behaviour to textarea fields
- select2 -
[data-ui-select2]: transforms a dropdown to a select2 dropdown
- tooltip -
.tt: adds an jQuery tooltip to the element on hover
- popover -
.po: adds the bootstrap popover behaviour to the given elements
:checkbox, :radio: renders styled radiobuttons and checkboxes
[data-ui-show-more]: used for cutting long texts (e.g in stream entries)
[data-ui-init]: used for widgets with eager initialization
Further Addition Features
switchButtonscan be called to switch to buttons with a
highlightadds an background highlight animation to a node