1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>jQTouch β</title> <style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style> <style type="text/css" media="screen">@import "themes/jqt/theme.min.css";</style> <script src="jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script> <script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script> <script src="extensions/jqt.location.js" type="application/x-javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> var jQT = new $.jQTouch({ icon: 'jqtouch.png', addGlossToIcon: false, startupScreen: 'jqt_startup.png', statusBar: 'black', preloadImages: [ 'themes/jqt/img/back_button.png', 'themes/jqt/img/back_button_clicked.png', 'themes/jqt/img/button_clicked.png', 'themes/jqt/img/grayButton.png', 'themes/jqt/img/whiteButton.png', 'themes/jqt/img/loading.gif' ] }); $(function(){ function setDisplay(text) { $('.info').empty().append(text) } // We pass "updateLocation" a callback function, // to run once we have the coordinates. // We also set it to a variable, so we can know // right away if it's working or not var lookup = jQT.updateLocation(function(coords){ if (coords) { setDisplay('Latitude: ' + coords.latitude + '<br />Longitude: ' + coords.longitude); $('.nearby').empty().append('<a href="list.php?lat=' + coords.latitude + '&lng=' + coords.longitude + '">Nearby List</a>'); } else { setDisplay('Device not capable of geo-location.'); } }); if (lookup) { setDisplay('Looking up location…'); } }); // Some sample Javascript functions: $(function(){ $('a[target="_blank"]').click(function() { if (confirm('This link opens in a new window.')) { return true; } else { $(this).removeClass('active'); return false; } }); // Page animation callback events $('#pageevents'). bind('pageAnimationStart', function(e, info){ $(this).find('.info').append('Started animating ' + info.direction + '… '); }). bind('pageAnimationEnd', function(e, info){ $(this).find('.info').append(' finished animating ' + info.direction + '.<br /><br />'); }); // Page animations end with AJAX callback event, example 1 (load remote HTML only first time) $('#callback').bind('pageAnimationEnd', function(e, info){ if (!$(this).data('loaded')) { // Make sure the data hasn't already been loaded (we'll set 'loaded' to true a couple lines further down) $(this).append($('<div>Loading</div>'). // Append a placeholder in case the remote HTML takes its sweet time making it back load('ajax.html .info', function() { // Overwrite the "Loading" placeholder text with the remote HTML $(this).parent().data('loaded', true); // Set the 'loaded' var to true so we know not to re-load the HTML next time the #callback div animation ends })); } }); // Orientation callback event $('body').bind('turn', function(e, data){ $('#orient').html('Orientation: ' + data.orientation); }); }); </script> </head> <body> <div id="home" class="current"> <div class="toolbar"> <h1>jQTouch</h1> <a class="button slideup" id="infoButton" href="#about">About</a> </div> <ul class="rounded"> <li class="arrow"><a href="#ui">User Interface</a> <small class="counter">4</small></li> <li class="arrow"><a href="list.php">All stops List</a></li> <li class="arrow nearby">Nearby List</li> <li class="arrow"><a href="list.php">Favourites List</a></li> </ul> <div class="info"> <p>Add this page to your home screen to view the custom icon, startup screen, and full screen mode.</p> </div> </div> </body> </html> |