Permalink
Browse files

switched to having a bootstrap for the loading page,

  • Loading branch information...
1 parent 968fffc commit 7b7dfcdf53b1b23a2f8ceb2134a840918b82de27 Jonathan Fielding committed Feb 27, 2012
Showing with 71 additions and 37 deletions.
  1. +8 −4 assets/js/core.js
  2. +16 −0 bootstrap.js
  3. +5 −15 index.html
  4. +27 −0 modules/sample/index.html
  5. +15 −0 modules/sample/sample.js
  6. +0 −18 modules/sample/sample.module.js
View
@@ -1,7 +1,11 @@
-$('[data-role=page]').live('pageshow', function () {
- var module_name = this.id;
+$(document.body).live('pagechange', function(event, eventData) {
+ var app = {'eventData': eventData};
+ var module_name = $(eventData.toPage).attr('data-module');
+ var javascript_required = module_name +'.js'
//Each module should have a javascript file, we pull this in here
- require(['modules/'+module_name+'/'+ module_name +'.module.js']);
-
+ require([javascript_required],function(){
+ window[module_name].init(app);
+ });
+
});
View
@@ -0,0 +1,16 @@
+var bootstrap = function(){
+ var privateProperties = {
+
+ };
+
+ return {
+ init: function(app){
+ //The bootstrap is what runs if the user goes to the root of your web application, you can use the bootstrap to send them to whichever module you want.
+ $.mobile.changePage("modules/sample/index.html", {
+ data: 'Send message to bootstrap from the sample page'
+ });
+
+ }
+ };
+
+}();
View
@@ -1,30 +1,20 @@
<!DOCTYPE html>
<html>
<head>
- <title>My Page</title>
+ <title>App Name</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/css/jquery.mobile-1.0.1.min.css" />
</head>
<body>
-
- <div data-role="page" id="sample">
+
+ <div data-role="page" data-module="bootstrap">
<div data-role="header">
- <h1>My Title</h1>
+ <h1>Loading</h1>
</div><!-- /header -->
<div data-role="content">
- <p>Hello world</p>
- </div><!-- /content -->
-
- <div data-role="footer" data-position="fixed">
- <div data-role="navbar">
- <ul>
- <li><a href="#" data-transition="none" data-icon="custom">Button 1</a></li>
- <li><a href="#" data-transition="none" data-icon="custom">Button 2</a></li>
- <li><a href="#" data-transition="none" data-icon="custom">Button 3</a></li>
- </ul>
- </div><!-- /navbar -->
+ <p>Loading...</p>
</div><!-- /content -->
</div><!-- /page -->
View
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>App Name</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="../../assets/css/jquery.mobile-1.0.1.min.css" />
+ </head>
+<body>
+
+ <div data-role="page" data-module="sample">
+
+ <div data-role="header">
+ <h1>Sample page</h1>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <p>You are now in the sample page</p>
+ </div><!-- /content -->
+
+ </div><!-- /page -->
+
+ <script src="../../assets/js/libs/jquery-1.7.1.min.js"></script>
+ <script src="../../assets/js/libs/jquery.mobile-1.0.1.min.js"></script>
+ <script src="../../assets/js/libs/require.js"></script>
+ <script src="../../assets/js/core.js"></script>
+</body>
+</html>
View
@@ -0,0 +1,15 @@
+var sample = function(){
+ var privateProperties = {
+
+ };
+
+ return {
+ init: function(app){
+ //Handle receiving messages from the previous page
+ if(app.eventData.options.data){
+ alert(app.eventData.options.data);
+ }
+ }
+ }
+
+}();
@@ -1,18 +0,0 @@
-var loading = function(){
- var privateProperties = {
- "propertyName": "data"
- };
-
- return {
- init: function(){
- alert(privateProperties.propertyName);
- },
-
- function2: function(){
-
- }
- }
-
-}();
-
-loading.init();

0 comments on commit 7b7dfcd

Please sign in to comment.