Mise en surbrillance de texte

But

Le composant de mise en subrillance de texte met en surbrillance n'importe quel texte dans un secteur pré-défini qui satisfait des critères de recherche. Les critères de recherche sont insensibles à la casse et sont spécifiés par la chaîne d'interrogation d'une addresse URL. Les chaînes avec plusieurs mots sont supportées, y compris les espaces et la ponctuation fondamentale.

Nota : Les critères de recherche regroupant des caractères spéciaux d'expression régulière (« regex », p.ex., « " », « | », « ? », « + », « ( » ou « ) ») peuvent être partiellement ou entièrement exclus des résultats.

Utiliser lorsque

Mettre en surbrillance les termes de recherche dans une page de résultats de recherche
Mettre en surbrillance des mots clés dans une page Web
Aider l'utilisateur à retrouver toutes les occurrences d'un ou de plusieurs mots dans une page Web

Non-text contrast

According to Understanding Success Criterion 1.4.11: Non-text Contrast, the contrast ratio is required to be at least 3:1.

The background color used for highlight is #ffff00 and the font color is #000000, resulting in ratio of 19.55:1

Exemple pratique

Critères de recherche - Exemple

influenza aviaire
monde
suffis
symptômes semblables à ceux de l'influenza
À titre de rappel
À de rares occasions, des humains ont été infectés par ce virus.

La chaîne d'interrogation : ?txthl=influenza%20aviaire+monde+suffis+symptômes%20semblables%20à%20ceux%20de%20l'influenza +À%20titre%20de%20rappel...+À%20de%20rares%20occasions,%20des%20humains%20ont%20été%20infectés%20par%20ce%20virus.

Mise en surbrillance le texte qui satisfait les critères de recherche

Needs translation

How to implement

Step 1
Step 2
```
Example code
```

Step 3

Example of multi-line code
Example of multi-line code
Example of multi-line code

Step 4

Configuration options

Option	Description	How to configure	Values
`txthl`	Query string parameter that specifies the search criteria for the text to highlight.	Add `txthl=<text_1>+<text_2>+<text_3>` to the query string. Note: HTML markup validation requires all spaces in links to be replaced by `%20`.	Strings separated by + characters.

Events

Document the public events that can be used by implementers or developers.

Event Trigger What it does

wb-init.wb-txthl Triggered manually (e.g., $( ".wb-txthl" ).trigger( "wb-init.wb-txthl" );). Used to manually enhance an element with the Text highlighting plugin. Note: The Text highlighting plugin will be initialized automatically unless the element is added after the page has already loaded.

Event	Trigger	What it does
`wb-init.wb-txthl`	Triggered manually (e.g., `$( ".wb-txthl" ).trigger( "wb-init.wb-txthl" );`).	Used to manually enhance an element with the Text highlighting plugin. Note: The Text highlighting plugin will be initialized automatically unless the element is added after the page has already loaded.
`wb-ready.wb-txthl` (v4.0.5+)	Triggered automatically after the Text highlight plugin initializes.	Used to identify where the Text highlight plugin was initialized (target of the event). `$( document ).on( "wb-ready.wb-txthl", ".wb-txthl", function( event ) { });` `$( ".wb-txthl" ).on( "wb-ready.wb-txthl", function( event ) { });`
`wb-ready.wb` (v4.0.5+)	Triggered automatically when WET has finished loading and executing.	Used to identify when all WET plugins and polyfills have finished loading and executing. `$( document ).on( "wb-ready.wb", function( event ) { });`

wb-ready.wb-txthl (v4.0.5+)

Triggered automatically after the Text highlight plugin initializes.

Used to identify where the Text highlight plugin was initialized (target of the event).

$( document ).on( "wb-ready.wb-txthl", ".wb-txthl", function( event ) {
});

$( ".wb-txthl" ).on( "wb-ready.wb-txthl", function( event ) {
});

wb-ready.wb (v4.0.5+)

Triggered automatically when WET has finished loading and executing.

Used to identify when all WET plugins and polyfills have finished loading and executing.

$( document ).on( "wb-ready.wb", function( event ) {
});

Source code

Text highlighting source code on GitHub

Date de modification :: 2014-08-04

Sélection de la langue

Recherche et menus

Recherche