Touchscreen Toolkit - Default Use

Default Use

To simply use the default transformations that the toolkit provides, use the following steps:

1) Download the latest version of the toolkit from the Downloads page, and put the TouchscreenToolkit.js and TouchscreenToolkit.css files in the directory you have the HTML file you would like to load the toolkit into.

2) At the end of the <head> section of the HTML document you would like to load the toolkit into, insert the following lines of code:

<link rel="stylesheet" type="text/css" href="TouchscreenToolkit.css" />
<script type="text/javascript" src="TouchscreenToolkit.js"></script>
<script type="text/javascript">tsTouchscreen.tsInit(null);</script>

The first line loads the toolkit's CSS file, the second line loads the toolkit's JavaScripts, and the thrid line tells the toolkit to load the default toolkit. Optionally, you may put the CSS and JavaScript files into a separate directory, just be sure to update the href and src parameters above accordingly.

Example

The following is a simple example of how to load the toolkit in an HTML page with only two text inputs:

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="TouchscreenToolkit.css" />
        <script type="text/javascript" src="TouchscreenToolkit.js"></script>
        <script type="text/javascript">tsTouchscreen.tsInit(null);</script>
    </head>
    <body>
        <br />
        <input type="text" />
        <input type="text" />
    </body>
</html>

To download the complete working code for this example, click here.

If you would like to extend the toolkit's functionality as well as use its default functionality, see the Extended Use page.