jQuery Mobile Skeleton App
 |
| The skeleton on Windows Phone 7, iOS, and Android |
Most modern IDEs include templates, a way to begin a new project without having to write all of the code from scratch. In order to speed up and standardize my jQuery Mobile development, I created a skeleton. The skeleton serves the same purpose as a template for my own projects.
There isn't anything difficult going on with the skeleton, but I will walk you through the application anyways to make sure that you understand everything.
The Files
First, I should explain the files which are included in the project. At the base of things are jQuery and jQuery Mobile core files. In a production app, I would normally get these files from a content delivery network CDN, but during development it helps to have the files local.
Next, we have the app.js file. This is my application's core file. It contains the Kernel, which sends page events to their handler. And Events, which hooks all of the page events and feeds them to the Kernel. The last part of the file are the two page handler functions.
 |
| The skeleton app's files |
The final JavaScript file is the hideAddressBar.js. I am not completely in love with this solution the Android address bar problem, but it mostly works. Every time we receive a "pageinit" event we call the hideAddressBar function.
The HTML files should be nothing surprising so there is no real need to explain them except for the attribute, data-rockncoder-jspage="page2". This attribute is used to join the HTML to its corresponding JavaScript object. The Kernel uses it to determine the name of the JavaScript object and call the appropriate page event handler if it exists.
I hope this code helps you to write something cool. If it does drop me a line and an URL.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var RocknCoder = RocknCoder || {}; | |
| RocknCoder.Pages = RocknCoder.Pages || {}; | |
| RocknCoder.Pages.Kernel = function (event) { | |
| var that = this, | |
| eventType = event.type, | |
| pageName = $(this).attr("data-rockncoder-jspage"); | |
| if (RocknCoder && RocknCoder.Pages && pageName && RocknCoder.Pages[pageName] && RocknCoder.Pages[pageName][eventType]) { | |
| RocknCoder.Pages[pageName][eventType].call(that); | |
| } | |
| }; | |
| RocknCoder.Pages.Events = function () { | |
| $("div[data-rockncoder-jspage]").live( | |
| 'pagebeforecreate pagecreate pagebeforeload pagebeforeshow pageshow pagebeforechange pagechange pagebeforehide pagehide pageinit', | |
| RocknCoder.Pages.Kernel).live( | |
| "pageinit", RocknCoder.hideAddressBar); | |
| } (); | |
| RocknCoder.Pages.page1 = function () { | |
| var pageinit = function(){ | |
| }, | |
| pageshow = function () { | |
| }, | |
| pagehide = function () { | |
| }; | |
| return { | |
| pageinit: pageinit, | |
| pageshow: pageshow, | |
| pagehide: pagehide | |
| } | |
| }(); | |
| RocknCoder.Pages.page2 = function () { | |
| var pageinit = function(){ | |
| }, | |
| pageshow = function () { | |
| }, | |
| pagehide = function () { | |
| }; | |
| return { | |
| pageinit: pageinit, | |
| pageshow: pageshow, | |
| pagehide: pagehide | |
| } | |
| }(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var RocknCoder = RocknCoder || {}; | |
| RocknCoder.hideAddressBar = function() { | |
| if (navigator.userAgent.match(/Android/i)) { | |
| window.scrollTo(0, 0); // reset in case prev not scrolled | |
| var nPageH = $(document).height(); | |
| var nViewH = window.outerHeight; | |
| if (nViewH > nPageH) { | |
| nViewH = nViewH / window.devicePixelRatio; | |
| $('BODY').css('height', nViewH + 'px'); | |
| } | |
| window.scrollTo(0, 1); | |
| addEventListener("resize", function () { | |
| setTimeout(hideUrlBar, 0); | |
| setTimeout(hideUrlBar, 500); | |
| }, false); | |
| function hideUrlBar() { | |
| if (!pageYOffset) { | |
| window.scrollTo(0, 1); | |
| } | |
| } | |
| } | |
| return this; | |
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title></title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <meta name="apple-mobile-web-app-capable" content="yes"/> | |
| <link href="content/jquery.mobile-1.1.0.min.css" rel="stylesheet" type="text/css" /> | |
| <script src="scripts/jquery-1.7.1.min.js" type="text/javascript"></script> | |
| <script src="scripts/jquery.mobile-1.1.0.min.js" type="text/javascript"></script> | |
| <script src="scripts/hideAddressBar.js" type="text/javascript"></script> | |
| </head> | |
| <body> | |
| <div id="page1" data-role="page" data-rockncoder-jspage="page1"> | |
| <header data-role="header" data-position="fixed"> | |
| <h1>Index</h1> | |
| </header> | |
| <section data-role="content"> | |
| <a href="./page2.htm" data-role="button" data-transition="slide">to Page 2</a> | |
| </section> | |
| <footer data-role="footer" data-position="fixed"> | |
| <h1>footer</h1> | |
| </footer> | |
| </div> | |
| <script src="scripts/app.js" type="text/javascript"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title></title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <meta name="apple-mobile-web-app-capable" content="yes"/> | |
| <link href="content/jquery.mobile-1.1.0.min.css" rel="stylesheet" type="text/css" /> | |
| <script src="scripts/jquery-1.7.1.min.js" type="text/javascript"></script> | |
| <script src="scripts/jquery.mobile-1.1.0.min.js" type="text/javascript"></script> | |
| </head> | |
| <body> | |
| <div id="page2" data-role="page" data-rockncoder-jspage="page2" > | |
| <header data-role="header" data-position="fixed"> | |
| <h1>Page 2</h1> | |
| </header> | |
| <section data-role="content"> | |
| <a href="./index.htm" data-role="button" data-transition="slide" data-direction="reverse">to the Index page</a> | |
| </section> | |
| <footer data-role="footer" data-position="fixed"> | |
| <h1></h1> | |
| </footer> | |
| </div> | |
| <script src="scripts/hideAddressBar.js" type="text/javascript"></script> | |
| <script src="scripts/app.js" type="text/javascript"></script> | |
| </body> | |
| </html> |
