MediaWiki includes the jQuery library. This is extended by a series of plugins.
This page documents the list of jQuery plugins that can be used on a jQuery object. When using them please pay attention to their installation instructions.
- Source:
Methods
byteLimit(limitopt, filterFunctionopt) → {jQuery}static
#
Enforces a byte limit on an input field, assuming UTF-8 encoding, for situations when, for example, a database field has a byte limit rather than a character limit. Plugin rationale: Browser has native maxlength for number of characters (technically, UTF-16 code units), this plugin exists to limit number of bytes instead.
Can be called with a custom limit (to use that limit instead of the maxlength attribute value), a filter function (in case the limit should apply to something other than the exact input value), or both. Order of parameters is important!
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
limit |
number |
<optional> |
Limit to enforce, fallsback to maxLength-attribute, called with fetched value as argument. |
filterFunction |
function |
<optional> |
Function to call on the string before assessing the length. |
- Source:
Returns:
- Type
- jQuery
Enforces a byte limit on an input field, assuming UTF-8 encoding, for situations when, for example, a database field has a byte limit rather than a character limit.
codePointLimit(limitopt, filterFunctionopt) → {jQuery}static
#
Enforces a codepoint (character) limit on an input field.
For unfortunate historical reasons, browsers' native maxlength counts [the number of UTF-16 code units rather than Unicode codepoints] 1, which means that codepoints outside the Basic Multilingual Plane (e.g. many emojis) count as 2 characters each. This plugin exists to correct this.
Can be called with a custom limit (to use that limit instead of the maxlength attribute value), a filter function (in case the limit should apply to something other than the exact input value), or both. Order of parameters is important!
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
limit |
number |
<optional> |
Limit to enforce, fallsback to maxLength-attribute, called with fetched value as argument. |
filterFunction |
function |
<optional> |
Function to call on the string before assessing the length. |
- Source:
Returns:
- Type
- jQuery
confirmable(optionsopt)static
#
Enable inline confirmation for given clickable element (like <a />
or <button />
).
Provided by the jquery.confirmable ResourceLoader module.
An additional inline confirmation step being shown before the default action is carried out on click.
Calling .confirmable( { handler: function () { … } } )
will fire the handler only after the
confirmation step.
The element will have the jquery-confirmable-element
class added to it when it's clicked for
the first time, which has white-space: nowrap;
and display: inline-block;
defined in CSS.
If the computed values for the element are different when you make it confirmable, you might
encounter unexpected behavior.
Example
mw.loader.using( 'jquery.confirmable' ).then( () => {
$( 'button' ).confirmable();
} );
Parameters:
Name | Type | Attributes | Description | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
options |
Object |
<optional> |
Properties
|
- Source:
<a />
or <button />
).
goIn(instantToggleopt) → {jQuery}static
#
jQuery plugin to fade or snap to visible state.
Parameters:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
instantToggle |
boolean |
<optional> |
false |
Returns:
- Type
- jQuery
goOut(instantToggleopt) → {jQuery}static
#
jQuery plugin to fade or snap to hiding state.
Parameters:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
instantToggle |
boolean |
<optional> |
false |
Returns:
- Type
- jQuery
highlightText(matchString, optionsopt) → {jQuery}static
#
Highlight certain text in current nodes (by wrapping it in <span class="highlight">...</span>
).
Provided by the jquery.highlightText ResourceLoader module.
Example
mw.loader.using( 'jquery.highlightText' ).then( () => {
// no styling is provided by default.
mw.util.addCSS( `.highlight { background: yellow; }` )
$( '#bodyContent' ).highlightText( 'bear' );
} );
Parameters:
Name | Type | Attributes | Description | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
matchString |
string | String to match |
|||||||||||
options |
Object |
<optional> |
Properties
|
- Source:
Returns:
- Type
- jQuery
<span class="highlight">...</span>
).
injectSpinner(optsopt) → {jQuery}static
#
Inject a spinner after each element in the collection. Provided by the jquery.spinner ResourceLoader module.
Inserts spinner as siblings (not children) of the target elements. Collection contents remain unchanged.
Example
mw.loader.using( 'jquery.spinner' ).then( () => {
$( '#bodyContent' ).injectSpinner();
} );
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
opts |
Object | string |
<optional> |
See #createSpinner |
- Source:
Returns:
- Type
- jQuery
makeCollapsible(optionsopt) → {jQuery}static
#
Enable collapsible-functionality on all elements in the collection. Provided by the jquery.makeCollapsible ResourceLoader module.
- Will prevent binding twice to the same element.
- Initial state is expanded by default, this can be overridden by adding class "mw-collapsed" to the "mw-collapsible" element.
- Elements made collapsible have jQuery data "mw-made-collapsible" set to true.
- The inner content is wrapped in a "div.mw-collapsible-content" (except for tables and lists).
Example
mw.loader.using( 'jquery.makeCollapsible' ).then( () => {
$( 'table' ).makeCollapsible();
} );
Parameters:
Name | Type | Attributes | Description | ||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
options |
Object |
<optional> |
Properties
|
- Source:
Returns:
- Type
- jQuery
msg(message, …arguments)static
#
Parses the message in the message key, doing replacements optionally, and appends the nodes to the current selector. Bindings to passed-in jquery elements are preserved. Functions become click handlers for [$1 linktext] links.
Example
mw.loader.using('mediawiki.jqueryMsg' ).then(() => {
var $userlink = $( '<a>' ).click( function () { alert( "hello!!" ) } );
$( 'p#headline' ).msg( 'hello-user', $userlink );
} );
// N.B. replacements are variadic arguments or an array in second parameter. In other words:
somefunction( a, b, c, d )
// is equivalent to
somefunction( a, [b, c, d] )
// Note: We append to 'this', which in a jQuery plugin context will be the selected elements.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
message |
string | key |
|
arguments |
Array.<string> |
<repeatable> |
Parses the message in the message key, doing replacements optionally, and appends the nodes to the current selector.
removeCookie(key, options) → {boolean}static
#
Remove a cookie by key.
Example
mw.loader.using( 'mediawiki.cookie' ).then( () => {
$.removeCookie( 'name', {} );
} );
Parameters:
Name | Type | Description |
---|---|---|
key |
string | |
options |
mw.cookie.CookieOptions |
- Source:
Returns:
True if the cookie previously existed
- Type
- boolean
suggestions(options) → {jQuery}static
#
This plugin provides a generic way to add suggestions to a text box. Provided by the jquery.suggestions ResourceLoader module.
Set options:
$( '#textbox' ).suggestions( { option1: value1, option2: value2 } ); $( '#textbox' ).suggestions( option, value );
Example
// Initialize:
mw.loader.using( 'jquery.suggestions' ).then(()=> {
$( '#textbox' ).suggestions();
});
Parameters:
Name | Type | Description | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
options |
Object |
Properties
|
- Source:
Returns:
- Type
- jQuery
tablesorter(settings) → {jQuery}static
#
Create a sortable table with multi-column sorting capabilities. Provided by jquery.tablesorter ResourceLoader module.
Example
mw.loader.using( 'jquery.tablesorter' ).then( () => {
// Create a simple tablesorter interface
$( 'table' ).tablesorter();
// Create a tablesorter interface, initially sorting on the first and second column
$( 'table' ).tablesorter( { sortList: [ { 0: 'desc' }, { 1: 'asc' } ] } )
.on( 'sortEnd.tablesorter', () => console.log( 'Triggered as soon as any sorting has been applied.' ) );
} );
Parameters:
Name | Type | Description |
---|---|---|
settings |
jQueryPlugins~TableSorterOptions |
Returns:
- Type
- jQuery
textSelection(command, commandOptionsopt) → {any}static
#
Do things to the selection in a <textarea>
, or a textarea-like editable element.
Provided by the jquery.textSelection ResourceLoader module.
var $textbox = $( '#wpTextbox1' );
$textbox.textSelection( 'setContents', 'This is bold!' );
$textbox.textSelection( 'setSelection', { start: 8, end: 12 } );
$textbox.textSelection( 'encapsulateSelection', { pre: '<b>', post: '</b>' } );
// Result: Textbox contains 'This is <b>bold</b>!', with cursor before the '!'
Example
mw.loader.using( 'jquery.textSelection' ).then( () => {
const contents = $( 'textarea' ).textSelection( 'getContents' );
} );
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
command |
string | Command to execute, one of:
|
|
commandOptions |
any |
<optional> |
Options to pass to the command |
- Source:
Returns:
Depending on the command
- Type
- any
<textarea>
, or a textarea-like editable element.
trimByteLength(safeVal, newVal, byteLimit, filterFunctionopt) → {Object|string|boolean}static
#
Utility function to trim down a string, based on byteLimit and given a safe start position.
It supports insertion anywhere in the string, so "foo" to "fobaro" if limit is 4 will result in "fobo", not "foba". Basically emulating the native maxlength by reconstructing where the insertion occurred.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
safeVal |
string | Known value that was previously returned by this function, if none, pass empty string. |
|
newVal |
string | New value that may have to be trimmed down. |
|
byteLimit |
number | Number of bytes the value may be in size. |
|
filterFunction |
function |
<optional> |
See jQuery#byteLimit. |
- Deprecated:
- Use `require( 'mediawiki.String' ).trimByteLength` instead.
- Source:
Returns:
-
- Type
- Object
-
return.newVal
- Type
- string
-
return.trimmed
- Type
- boolean
Utility function to trim down a string, based on byteLimit and given a safe start position.
updateTooltipAccessKeys() → {jQuery}static
#
Update the titles for all elements in a jQuery selection.
Installed by mediawiki.util
module.
Example
// Converts tooltip "[z]" to associated browser shortcut key e.g. "[ctrl-option-z]"
mw.loader.using( 'mediawiki.util' ).then( () => {
var $a = $('<a href="/wiki/Main_Page" title="Visit the main page [z]" accesskey="z"><span>Main page</span></a>');
$a.updateTooltipAccessKeys();
} );
Returns:
- Type
- jQuery
Type Definitions
TableSorterOptions
#
Type:
- Object
Properties:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
cssHeader |
string |
<optional> |
"headerSort" | A string of the class name to be appended to sortable tr elements in the thead of the table. |
cssAsc |
string |
<optional> |
"headerSortUp" | A string of the class name to be appended to sortable tr elements in the thead on a ascending sort. |
cssDesc |
string |
<optional> |
"headerSortDown" | A string of the class name to be appended to sortable tr elements in the thead on a descending sort. |
sortMultisortKey |
string |
<optional> |
"shiftKey" | A string of the multi-column sort key. |
cancelSelection |
boolean |
<optional> |
true | Boolean flag indicating iftablesorter should cancel selection of the table headers text. |
sortList |
Array |
<optional> |
An array containing objects specifying sorting. By passing more
than one object, multi-sorting will be applied. Object structure:
{ |