jQuery mobile framework allows you to design a single highly-branded web site or application that will work on all popular smartphone, tablet and desktop platforms. You can download and find more about jQuery mobile here
For jQuery mobile to run properly you need a jQuery library which can be downloaded from here
To use a jquery mobile in Worklight project you need to follow the steps below;
1. First Create Worklight project in Eclipse as shown
2. Type Application name and add jQuery mobile library folder by checking "Add jQuery Mobile" checkbox as shown
3. Open your application.html file and add reference to the following files in <head>
<link rel="stylesheet" href="css/jquery.mobile-1.3.0.min.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.3.0.min.js"></script>
We are all set. Now add following few markup to the html to see the jQuery mobile in action
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
<h3>jQuery Mobile Header</h3>
</div>
<div data-role="content">
Content goes here!
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>Copyright stuff</h3>
</div>
</div>
right click the application and "Build All and Deploy". Open Worklight Console and under application name click "Preview as Common Resources" to see the page in a browser.
