The jQuery library is a JavaScript library. IBM® WebSphere® Portal includes a jQuery
module for the jQuery core so you can use jQuery in a theme.
About this task
This jQuery module is not turned on by default. jQuery
is an open framework and is not supported by IBM. The module makes
it quick and easy to use jQuery and any of its plug-ins in a theme.
Procedure
- To turn on jQuery, copy the jquery1.10.2.json module
definition file into your theme's contributions folder in WebDAV fs-type1.
This jquery1.10.2.json file can be found at PortalServer\theme\wp.theme.jquery\installedApps\wp.theme.jquery.ear\wp.theme.jquery.war\v1.10.2.
- Optional: To enable plug-ins with the jQuery
core, download the jQuery plug-in from the jQuery website For more
information, see jQuery plug-in download in the related
links. In this example, use the PowerTip plug-in. The jquery.powertip-1.2.0.zip file.
To download the plug-in, see jQuery PowerTip plug-in download in
the related links.
- Extract the contents of your plug-in file to any location.
- Create a subfolder in your theme's modules folder for
the plug-in, such as jquery_powertip in this
example.
- The PowerTip plug-in has two files that must be head
contributions of your module, so create a head subfolder in your jquery_powertip folder.
- Copy the needed resource files from your extracted plug-in
location into your head folder. The needed resource files in this
case are:
jquery.powertip.min.js
jquery.powertip.js
jquery.powertip.min.css
jquery.powertip.css
- Copy both the min and non-min versions of the files.
The min version is used automatically by default for performance and
the non-min version is used automatically when debug mode is on.
- This example uses the default color scheme for the tips.
But, PowerTip comes with multiple color schemes as defined in separate
css files in its CSS folder. You can change to one of the other color
schemes or create one of your own by placing the different css files
into your head folder. For example, to get the light
color scheme, you can instead copy the css files into your head folder.
jquery.powertip-light.min.css
jquery.powertip-light.css
- Your jquery_powertip module prereqs the jQuery module, so create a file
that is named prereqs.properties in your
modules\jquery_powertip folder with the following
content:
jquery
- If you have more plug-ins, similar module definition
folders can be defined for them in your theme's modules folder. For
each module definition, give the module a folder name that starts
with
jquery_, such as jquery_powertip in
this example. Prereq the jquery module.
- Add the module jquery to
the module listings in one of your theme's profiles. Rather than modify
one of the existing profile files, it is best to copy one of them
and modify the copy. Copy the base profile file that you want to be
similar to, such as
profile_deferred.json, rename it to something
such as
profile_jquery_deferred.json and add the module jquery. When you create a profile file, adjust
the titles and descriptions so that your profile has a unique and
recognizable title and description. For example, change
the titles and descriptions to
"titles": [
{
"value": "jQuery Deferred",
"lang": "en"
}
],
"descriptions": [
{
"value": "This profile has jQuery plus the full set of modules for the theme, but defers loading most of these modules unless actually needed. This profile balances function and performance.",
"lang": "en"
}
]
- Optional: Add the plug-in modules to the module
listings in your profile, such as add the module jquery_powertip in
this example.
- Invalidate the cache so that your profile and module changes
are picked up by the Portal server. Click the Administration menu icon. Then, click . Then,
click . Auto invalidation
recognizes your changes automatically for WebDAV based themes. No further
action is required. For more information, see Utilities.
- Apply your profile to a page. In ,
select your Profile: jQuery Deferred.
- To verify that jQuery is loaded on a page and what version
it is, you can run $().jquery in the
console of your browser's developer tools. It echoes
the jQuery version number.
Results
Now the jQuery core and your plug-ins are ready and available
for use. To learn the basics about jQuery core usage, see jQuery
basics in the related links. You can learn the usage of your
plug-ins at the same site where you downloaded the plug-in. For more
information, see PowerTip download.