If you are using phoneGap inside dreamweaver, and setup a mobile site, but don’t use Jquery library to make the UI, don’t forget to remove the CSS and JS references to the mobile library that dreamweaver puts there by default, because if you don’t, your document will not show any HTML at all, confusing the heck out of you for awhile…
Tag: Jquery mobile
Categories
mobile: Dissecting a JQTouch app
http://onsubject.com/mobile_examples/JQTouch_example/
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