mobile: Dissecting a JQTouch app

1) By default, it runs in full iphone screen mode, and adding an icon and styling the top nav bar is a breeze:

<script type=”text/javascript”> var jQT = $.jQTouch({ icon: ‘kilo.png’, statusBar: ‘black’ }); </script>

2) <ul class=”edgetoedge”> does the magic of creating the iphone tab-like system with the li’s

3) Notice how the href links point to the divs with the respective ids, when you click on the links, those divs show up

4) href=”#” usually means just go back to the prior panel where you were before. Class “toolbar” will do the magic of putting the header HTML for you:

<div> <h1>New Entry</h1> <a href=”#”>Cancel</a> </div>

5) Check how attributes like placeholder=”Food” Put “Food” as the default value in certain input fields

6) Notice how we can add the flip effect to a button just by adding a class: <a href=”#settings” class=”button flip”>Settings</a>

Other useful stuff about JQTouch:

jQT.goBack(); // Go back in history one panel

$(‘#settings’).bind(‘pageAnimationStart’, loadSettings); // Binds to the panel when page animation starts, calls function loadSettings in this case

Leave a Reply

Your email address will not be published. Required fields are marked *