Adding jQuery UI Widget to drupal 8 | Drupal 8

Adding jQuery UI Widget to drupal 8

Submitted by editor on Thu, 12/08/2016 - 16:05
Question

How to Add a jQuery ui Widget to drupal 8 page / module ?

Example :

Step 1 : Add libraries. Example: (With theme / or module : mytheme)

On : mytheme.libraries.yml file

mylibrary:
  version: 1.x
  js:
    js/script.js: {}
  dependencies:
    - core/drupal
    - core/jquery
    - core/jquery.ui.tabs

    
Step 2 : Attache this mylibrary
Methode 1. On a theme: Add to mytheme.info.yml file
libraries:
  - mytheme/mylibrary

 
Methode 2. On a custom page or block
$output['#attached']['library'][] = 'mytheme/mylibrary';

Step 3 : Create js/script.js file (Here an example of Tabs)

(function ($, Drupal, window, document) {
  Drupal.behaviors.basic = {
    attach: function (context, settings) {
      $(window).load(function () {
        $("#tabs").tabs();
      });
    }
  };

}(jQuery, Drupal, this, this.document));

Step 4 : Insert your jQuery UI codes to the appropriated page.

Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.