3.3.2.7. Implementing a global jQuery plugin

There are a few ways to implement the usage of a global jQuery plugin. However, make sure that the global jQuery is available before the global jQuery plugin is loaded.

As you have seen before how you can scope a module to a portlet, the module will be loaded when the portlet is on a page using the PORTLET scope. Accordingly, use the PORTAL scrope instead of PORTLET. The main difference is that the loading of your plugin will be triggered on a specific site instead of a specific portlet.

  1. Create the jQuery plugin as a script named myPlugin.js and integrate it to your plugin:

    require(["SHARED/jquery"], function($) {
      $.fn.myPluginFunction = function() {
        // Your work here;
      };
    });
    
  2. Bind the script in the site and reuse the immediatejs script seen before:

    
    <portal>
      <name>classic</name>
      <scripts>
        <script>
          <name>myPlugin</name>
          <path>/myfolder/myPlugin.js</path>
        </script>
        <script>
          <name>imediatejs</name>
          <path>/myfolder/imediateJScript.js</path>
        </script>
      </scripts>
    </portal>

    Now, your plugin is globally available and you can use it:

    <script type="text/javascript">
    $('#foo').myPluginFunction();
    </script>
    
Copyright ©. All rights reserved. eXo Platform SAS
blog comments powered byDisqus