< OOUI

The most basic component of the OOUI[1] library is called an element (OO.ui.Element), which is an object that represents a rendering in the DOM[2] — a button or an icon, for example, or anything that is visible to a user. Unlike widgets, plain elements usually do not have events connected to them and can't be interacted with.

Every OOUI element has an $element property, which is a jQuery selection of its rendered contents. Note that OOUI uses the $ prefix for the names of all variables and properties that refer to jQuery selections of DOM elements. The $element property is extremely useful, and is used, for example, when creating OOUI widgets and appending them to the DOM.

Example

// <translate nowrap><!--T:9--> Create a <tvar name=1><div></div></tvar> element object with the text “<tvar name=2>Sample Text</tvar>“ and CSS class `<tvar name=3>sample</tvar>`.</translate>
var e = new OO.ui.Element( {
	text: 'Sample Text',
	classes: [ 'sample' ]
} );

// <translate nowrap><!--T:10--> Append the element to the DOM.</translate>
$( 'body' ).append( e.$element );

The resulting HTML will look like this:

<body>
	<div class="sample">Sample Text</div>
</body>

Elements

Special:Prefixindex

References

  1. ↑ OOUI (Object-Oriented User Interface)
  2. ↑ DOM (Document Object Model)


This article is issued from Mediawiki. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.