3.3.2.5. Configuring jQuery plugins

This section shows you how to configure a jQuery plugin and how to use it in the jQueryPluginPortlet portlet.

Use the jQuery plugin as a minimal one:

(function($) {
 $.fn.doesPluginWork = function() {
    alert('YES, it works!');
 };
})(jQuery);

Declare it as a module:


<module>

  <name>jquery-plugin</name>

  <as>jqPlugin</as>

  <script>

    <path>/jqueryPlugin/jquery-plugin.js</path>

  </script>

  <depends>

    <module>jquery</module>

    <as>jQuery</as>

  </depends>

</module>

Use this plugin in your portlet:


<portlet>

  <name>jQueryPluginPortlet</name>

  <module>

    <script>

      <path>/jqueryPlugin/jqueryPluginPortlet.js</path>

    </script>

    <depends>

      <module>jquery</module>

      <as>$</as>

    </depends>

    <depends>

      <module>jquery-plugin</module>

    </depends>

  </module>

</portlet>

Note

Your portlet module should depend on the jquery and you need to declare:

The dependency on jquery that allows using the jQuery object.
The dependency on jquery-plugin that ensures the plugin to be loaded in the jquery dependency before it is injected in the portlet module.