JQuery - the JS library of choice for Integra

WordFrame Integra uses in many places the JQuery functionality and plugins. This requires some higher level, if integration. To achieve that the system loads the JQuery library automatically on all pages and distributes it and some of its plugins, as part of the Integra Core package. The library is constantly updated to its latest, with each Core update.

Files path

The JQuery JS files, like the system CSS files, are part of the /wfrx/repository shared folder, and you can access them on the following paths. The currently distributed files are:

• wfrx
  • repository
    • js
      • jquery-latest.min.js
      • jquery-latest.pack.js
      • jquery.autocomplete.js
      • jquery.bigframe.min.js
      • jquery.canvasloader.js

How to use the files

jquery-latest.min.js

This file will be automatically available to all pages of Integra.

In a single page

To use one of the JS files only on a single page, you need to manage its meta data setting, and insert in the page header a line similar to:

<script type="text/javascript" src="{{url: site-root}}wfrx/resources/js/jquery-latest.pack.js" > </script>

The "{{url: site-root}}" will be replaced on page render, with the relative URL to the site's root including the application path if there is one.

In all child pages of a master page

To use one of the JS files only on all pages that inherit a selected master page, you need to manage its meta data setting, and insert in the page header a line similar to:

<script type="text/javascript" src="{{url: site-root}}wfrx/resources/js/jquery-latest.pack.js" > </script>

The "{{url: site-root}}" will be replaced on page render, with the relative URL to the site's root including the application path if there is one.

In all pages of a web site

To use one of the JS files only on all pages of your website, you need to manage the site's global meta tags, and insert in the page header a line similar to:

<script type="text/javascript" src="{{url: site-root}}wfrx/resources/js/jquery-latest.pack.js" > </script>

The "{{url: site-root}}" will be replaced on page render, with the relative URL to the site's root including the application path if there is one.

In your UI package

For implementing a layout or a skin you may need to load CSS and JS files. You can define them by defining the meta tags that should be embedded in each page which uses the skin or the layout, which holds the head.meta file. All skin files have their own head.meta files as they need to embed their own CSS or JS scripts. In the normal case a layout folder contains a head.meta file too but it is empty. In our experience, we use it for embedding custom JS scripts for automatically generate columns heights or widths, but this is rarely needed.

<script type="text/javascript" src="$APP_PATH$/wfrx/resources/js/jquery-latest.pack.js" > </script>

The $APP_PATH$ will be replaced on page render, with the relative URL to the site's root including the application path if there is one.