jQuery Mobile on the PlayBook WebWorks SDK


/ Published in: HTML
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Landmark Finder</title>
  6. <link rel="stylesheet" href="jquery.mobile-1.0a3.min.css" />
  7. <script src="jquery-1.5.min.js"></script>
  8. <script src="jquery.mobile-1.0a3.min.js"></script>
  9. <script type="application/javascript">
  10. $(document).ready(function(){
  11. // Add a click listener on the button to get the location data
  12. $('#getLocation').click(function(){
  13. if (navigator.geolocation) {
  14. navigator.geolocation.getCurrentPosition(onSuccess, onError);
  15. } else {
  16. // If location is not supported on this platform, disable it
  17. $('#getLocation').value = "Geolocation not supported";
  18. $('#getLocation').unbind('click');
  19. }
  20. });
  21. });
  22.  
  23. // create the geonames namespace for calling the API
  24. var geonames = {};
  25. geonames.baseURL = "http://ws.geonames.org/";
  26. geonames.method = "findNearbyWikipediaJSON";
  27. geonames.search = function(lat,lng){
  28.  
  29. // get the data in JSON format from Geonames
  30. $.getJSON(geonames.baseURL + geonames.method + '?formatted=true&lat=' + lat +
  31. '&lng=' + lng + '&style=full&radius=10&maxRows=25&username=ryanstewart',function(data){
  32.  
  33. // Loop through each item in the result and add it to the DOM
  34. $.each(data.geonames, function() {
  35. $('<li></li>')
  36. .hide()
  37. .append('<a href="http://'+this.wikipediaUrl+'">
  38. <h2>'+this.title+'</h2></a><br /><p>'+ this.summary + '</p><span class="ui-li-aside">
  39. <h5>'+this.distance+' (km)</h5></span>')
  40. .appendTo('#wikiList')
  41. .show();
  42. });
  43. // Once the data is added to the DOM, make the transition
  44. $.mobile.changePage('#dashboard',"slide",false,true);
  45.  
  46. // refresh the list to make sure the theme applies properly
  47. $('#wikiList').listview('refresh');
  48.  
  49.  
  50. });
  51. };
  52.  
  53. // Success function for Geolocation call
  54. function onSuccess(position)
  55. {
  56. alert('getting position');
  57. geonames.search(position.coords.latitude,position.coords.longitude);
  58. }
  59.  
  60. // Error function for Geolocation call
  61. function onError(msg)
  62. {
  63. geonames.search(47.667622,-122.384946);
  64. }
  65.  
  66. </head>
  67.  
  68. <div data-role="page">
  69. <div data-role="header">
  70. <h1>Find Location</h1>
  71. </div>
  72. <div data-role="content">
  73. <p>This application will use the <a href="http://geonames.org">Geonames</a> API and
  74. your location to bring back a list of Wikipedia articles about features that are near you.
  75. To get started, click the button below and allow the application to read your geolocation
  76. information.</p>
  77. <input type="button" value="Get My Location" id="getLocation" />
  78. </div>
  79. <div data-role="footer">
  80. <h4>By <a href="http://blog.digitalbackcountry.com">Ryan Stewart</a></h4>
  81. </div>
  82. </div>
  83. <div data-role="page" id="dashboard">
  84. <div data-role="header">
  85. <h1>Data List</h1>
  86. </div>
  87. <div data-role="content">
  88. <ul id="wikiList" data-role="listview" data-theme="c">
  89. </ul>
  90. </div>
  91. <div data-role="footer">
  92. <h4>By <a href="http://blog.digitalbackcountry.com">Ryan Stewart</a></h4>
  93. </div>
  94. </div>
  95. </body>
  96. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.