Dynamic Word Definition Plugin With jQuery - Underlined Definitions

Dynamic Word Definition Plugin With jQuery - Underlined Definitions

The Underlined Definitions jQuery plugin automatically adds underlines to matched words within the document and displays pre-defined definitions in a tooltip (using title attribute) when hovering on.

Click on the word to search the keyword on Google, Wiki, or Yandex.

1. Add jQuery library and the jQuery Underlined Definitions plugin to the html page.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="js/jquery.underline-def.min.js"></script>

2. Define you own words and Definitions in the JavaScript as follows:

let words = ["JavaScript", "AJAX"],
    definitions = ["JavaScript is a high-level, interpreted programming language.", "Ajax is a set of Web development techniques using many Web technologies on the client side to create asynchronous Web applications."];

3. Initialize the plugin by calling the function underlineDef on the target text conent.

<div class="text">
  <p>JavaScript is an event-based imperative programming language (as opposed to HTML's declarative language model) that is used to transform a static HTML page into a dynamic interface. JavaScript code can use the Document Object Model (DOM), provided by the HTML standard, to manipulate a web page in response to events, like user input.</p>
  <p>Using a technique called AJAX, JavaScript code can also actively retrieve content from the web (independent of the original HTML page retrieval), and also react to server-side events as well, adding a truly dynamic nature to the web page experience.</p>
</div>
$(".text").underlineDef({
  words: words,
  definitions: definitions
});

4. Apply your own CSS styles to the underlines.

.customUnderline {
  border-bottom: 1px dashed #333;
  cursor: help;
}

5. Specify the wrapper element for the matched words..

$(".text").underlineDef({
  words: words,
  definitions: definitions,
  tagName: 'span'
});

6. Specify the HTML attribute to hold the definition.

$(".text").underlineDef({
  words: words,
  definitions: definitions,
  attr: 'title'
});

7. Specify the search engine you want to use. Default: false.

$(".text").underlineDef({
  words: words,
  definitions: definitions,
  search: 'wiki' // or 'google', 'yandex'
});

8. Change the default class of the matched words.

$(".text").underlineDef({
  words: words,
  definitions: definitions,
  underlineClass: 'underline-definitions'
});

9. Decide whether to stop the default action.

$(".text").underlineDef({
  words: words,
  definitions: definitions,
  preventDefault: true
});

This awesome jQuery plugin is developed by ckkz-it. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 15.06.2018
  • Source