QtWebKit - Step 7: Adding jQuery

English
- English
- 中文
- Français
- Español
- Português
- Türkiye

Home

Hello Qt

Qt Everywhere

Qt for Maemo

QtWebKit

Introduction

IDE walkthrough

Programming guide

Hands-on introduction

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Summary

Qt Mobility: Location

Qt Mobility: Contacts

Qt Mobility: Messaging

Qt Mobility: Sensors

Qt Mobility: System Info

Qt Mobility: MM Audio

Qt Quick

Web

Java

Step 7: Adding jQuery

In this step, we will add some functionality into the Check results button. This is implemented by adding the jQuery JavaScript library into the HTML page, and using its methods to manipulate and animate the HTML page so that the results are shown when the button is pressed.

The minified version of the jQuery Library, which is needed in this step, is available in the html directory of the project. A small tweak has been made into the file: by default, the animation functionality has been implemented in jQuery with timer intervals having a constant 13 millisecond delay. We have changed the delay to 50, which allows also mobile devices to render the page fully before the next animation frame without affecting the animation noticeably. This was done by replacing the setInterval(c.fx.tick,13) string with setInterval(c.fx.tick,50) in the jQuery file.

Edit the resource file pluginexample.qrc and add the html/jquery-1.4.2.js file as was done with the other files of the HTML page in Step 2.

Always remember to also add the new HTML source files into the resource file, when adding them into your project.
Include the jQuery library file in the head section of the HTML page before including the html/javascript.js file by modifying the head section of the html/index.html file as follows:

<head> <title>Plugin example page</title> <link rel="stylesheet" href="style.css" type="text/css" />  <script type="text/javascript" src="jquery-1.4.2.min.js"> </script>  <script type="text/javascript" src="javascript.js"> </script> </head>
Select All
Edit the end of the html/javascript.js file so that the required code is added for the lines starting with the line '@TODO STEP 7.3 STARTS' and ending with the line '@TODO STEP 7.3 ENDS', according to the code comments between these lines.

The resulting lines should look as follows. The documentation for the jQuery API used here can be found on the http://docs.jquery.com site. The $(document).ready() function is documented here.

// Functionality to check results and show result correctness. // The parameter for the ready() function is called when the body // element is loaded, possibly before the 'onload' event. $(document).ready(function() { try { // attach an onclick event handler for #checkButton $("#checkButton").click(function () { // for each form of the describeform class: $(".describeform").each(function(index, element) { // get the given and the correct value, var correctValue = $(this).find("input[type=hidden]").val(); var givenValue = $(this).find("input[type=text]").val(); // then get the next p element with the result class, // change its class and contents according to the // correctness, and hide them. if (correctValue == givenValue) { $(this).next(".result").html("Correct!").hide() .removeClass("not-ok").addClass("ok"); } else { $(this).next(".result").html("Incorrect!").hide() .removeClass("ok").addClass("not-ok"); } }); // Finally, slide all the handled result elements down // with a minor delay. $(".result").delay(250).slideDown(1000); }); } catch (e) { alert(e); } });
Select All

When you build and run the application, you will see that when the Check results! button is clicked, result boxes are shown with a sliding down animation. If the application is not working properly, download and use the files in this zip file.