jQuery http://drupal8.ovh/en/tags/jquery en Adding jQuery UI Widget to drupal 8 http://drupal8.ovh/en/tutoriels/271/adding-jquery-ui-widget-to-drupal-8 <span class="field field--name-title field--type-string field--label-hidden">Adding jQuery UI Widget to drupal 8</span> <div class="clearfix text-formatted field field--name-field-question field--type-text-long field--label-above"> <div class="field__label">Question</div> <div class="field__item"><p>How to Add a jQuery ui Widget to drupal 8 page / module ?</p> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/en/users/editor" typeof="schema:Person" property="schema:name" datatype="">editor</span></span> <span class="field field--name-created field--type-created field--label-hidden">Thu, 12/08/2016 - 16:05</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Example :</p> <p>Step 1 : Add libraries. Example: (With theme / or module : mytheme)</p> <p>On : <strong>mytheme.libraries.yml </strong>file</p> <p><code>mylibrary:<br />   version: 1.x<br />   js:<br />     js/script.js: {}<br />   dependencies:<br />     - core/drupal<br />     - core/jquery<br />     - core/jquery.ui.tabs</code><br />     <br /> Step 2 : Attache this mylibrary<br /> Methode 1. On a theme: Add to<strong> mytheme.info.yml</strong> file<br /><code>libraries:<br />   - mytheme/mylibrary</code><br />  <br /> Methode 2. On a custom page or block<br /><code>$output['#attached']['library'][] = 'mytheme/mylibrary';</code></p> <p>Step 3 : Create js/script.js file (Here an example of Tabs)</p> <p><code>(function ($, Drupal, window, document) {<br />   Drupal.behaviors.basic = {<br />     attach: function (context, settings) {<br />       $(window).load(function () {<br />         $("#tabs").tabs();<br />       });<br />     }<br />   };</code></p> <p><code>}(jQuery, Drupal, this, this.document));</code></p> <p>Step 4 : Insert your jQuery UI codes to the appropriated page.</p> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-inline clearfix"> <h3 class="field__label inline">Tags</h3> <ul class="links field__items"> <li><a href="/en/tags/drupal-8" hreflang="en">Drupal 8</a></li> <li><a href="/en/tags/code" hreflang="en">Code</a></li> <li><a href="/en/tags/jquery" hreflang="en">jQuery</a></li> </ul> </div> <div class="field field--name-field-related-contents field--type-entity-reference field--label-hidden field__items"> <div class="field__item"><a href="/en/tutoriels/70/add-javascript-to-a-module" hreflang="en">Add JavaScript to a module</a></div> </div> <section class="field field--name-comment field--type-comment field--label-above comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=271&amp;2=comment&amp;3=comment" token="21d6c9cd"></drupal-render-placeholder> </section> Thu, 08 Dec 2016 15:05:25 +0000 editor 271 at http://drupal8.ovh http://drupal8.ovh/en/tutoriels/271/adding-jquery-ui-widget-to-drupal-8#comments Run a JavaScript for selected pages (using body class) http://drupal8.ovh/en/tutoriels/152/run-a-javascript-for-selected-pages-using-body-class <span class="field field--name-title field--type-string field--label-hidden">Run a JavaScript for selected pages (using body class)</span> <div class="clearfix text-formatted field field--name-field-question field--type-text-long field--label-above"> <div class="field__label">Question</div> <div class="field__item"><p>How to execute JS codes on selected Pages, using drupal body class ? </p> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/en/users/editor" typeof="schema:Person" property="schema:name" datatype="">editor</span></span> <span class="field field--name-created field--type-created field--label-hidden">Thu, 06/02/2016 - 10:07</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Example : Execute JS only in the front page.<br /> This Script run whin the <code>body</code> tag contains<code> class='front'</code></p> <p><code>(function ($) {<br />     $(document).ready(function () {<br />         if ($('body').hasClass('front')) {<br />             alert('Hello');<br />         }<br />     });<br /> })(jQuery);</code></p> <p> </p> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-inline clearfix"> <h3 class="field__label inline">Tags</h3> <ul class="links field__items"> <li><a href="/en/tags/drupal-8" hreflang="en">Drupal 8</a></li> <li><a href="/en/tags/drupal-7" hreflang="en">Drupal 7</a></li> <li><a href="/en/tags/javascript" hreflang="en">JavaScript</a></li> <li><a href="/en/tags/jquery" hreflang="en">jQuery</a></li> </ul> </div> <section class="field field--name-comment field--type-comment field--label-above comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=152&amp;2=comment&amp;3=comment" token="e9b2e7ee"></drupal-render-placeholder> </section> Thu, 02 Jun 2016 08:07:44 +0000 editor 152 at http://drupal8.ovh http://drupal8.ovh/en/tutoriels/152/run-a-javascript-for-selected-pages-using-body-class#comments