<js> Element - Schema Reference

Definition

Parent element(s): <schema>.

The <js> element can be used to include and merge additional .js (JavaScript) files to execute JavaScript instructions in Highstage in order to add, modify or restructure existing functions, behaviors and elements.

Content model

The specification of what elements, attributes and data that are available and allowed within the <js> element.

Attributes

This section introduces you to the XML attributes and values that are available and can be included within the <js> element.

Elements

Special elements

Samples

Including libraries

This sample (bundled and shipped with Highstage by default) shows how the JQuery JavaScript library is included in Highstage using the <js> element:

xxxxxxxxxx
<js name="jquery" src="ts/js/vendor/jquery/core/jquery-3.1.0.min.js"/>

JavaScript instructions as direct values within the <js> element

This sample illustrates how you are able to add JavaScript instructions directly within the <js> element in data characters [CDATA] to avoid creating a separate .JS file and an associated url attribute on the <js> element:

xxxxxxxxxx
<js name="jquerybuttons">
<![CDATA[ $(document).on('T_onload', function(event, target){ $(function () { $(target).find('button') .click(function( event ) { event.preventDefault(); });//.attr('tabindex',-1); }); }); ]]>
</js>

Note: This sample is to illustrate how you can add JavaScript code directly within the <js> element. The purpose and contents of the JavaScript function is not relevant.

Including custom .JS file to Highstage

This sample provides you with an example of how you can include your own custom .JS files to be executed in Highstage by placing the file directly within the Tweak folder:

x
<js name="JavaScriptSample" src="tweak/jsInstructions.js"/>

Relevant tools and utilities