Tutorial

Step 1

When you start a new application and use Web 2.0 Touch as a starting point. Generally, the first step is to delete all files inside /pages/* directory and modify index.php. Below is the minimum example of index.php file Important things here are
  • include css/core.css
  • include of of the following for different themes (1) css/apple.css (2) css/ipad-light.css (3) css/ipad-dark.css
  • make sure you include jquery.js, jsTouch.js and iscroll.js (latest code might not require iscroll due to native support) libraries
  • initialize jsTouch with the following - myTouch = jsTouch.init('myTouch', { width: 320, page: 'pages/home.php' } ); this will make width of the box to be 320px and will load first page pages/home.php into the main control. Make sure there is a div with id myTouch inside body element.

Step 2

Create custom pages. In the example above, it assumes you already have pages/home.php page. This page will be loaded on initialization. This page is dynamicly loaded through $.post() and inserted into the view. This page can be any HTML markup. However, to take advantange of CSS themeing it can be as follows: Important things here are
  • There are two main div, top one has class=toolbar and bottom one class=content (you can also have third one class=footer). This is important because proper styles will be applied only if you have these divs.
  • Inside class=content div there is another empty div - don't remove it, it needed for iScroll.
  • Pay attention how new page is loaded with jsTouch.loadPage('pages/page1.php', { transition: 'slide-left' }); The page must exists. Also, you can use a number of transition styles: slide-left, slide-right, slide-up, slide-down, flip-left, flip-right, flip-up, flip-down, pop-in, pop-out

Step 3

To learn how to use other UI controls, you can open files inside /pages folder and use them as examples. The files are small and self explanatory. All pages are dynamicly loaded into the view. Each time a page is transitioned, previous page is deleted to make it easier for the mobile processor to operate. Mobile processors are slow, as you might have noticed already.

Thank you for using Web 2.0 Touch. I hope it helps you. If you are interesed in participating, fork me on github.