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 dynamically loaded through $.post() and inserted into the view. This page can be any HTML markup. However,
to take advantage 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 dynamically 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 interested in participating, fork me on github.