Skip to content
Browse files

Added a development version of the router.

This one supports pagebeforechange, pagebeforeload and pageload events.
Added a couple of test files
  • Loading branch information...
1 parent cb8442f commit daa6a22a284f1935f1e950398d68e1d70c1b6f59 @azicchetti committed Feb 23, 2012
Showing with 182 additions and 24 deletions.
  1. +88 −0 examples/test-bC.html
  2. +48 −0 examples/test-bl.html
  3. +46 −24 js/{jquery.mobile.router.js → jquery.mobile.router-dev.js}
View
88 examples/test-bC.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Page Title</title>
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
+ <script type="text/javascript" src="../js/jquery.mobile.router-dev.js"></script>
+ <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
+ <script type="text/javascript">
+ var router=new $.mobile.Router([
+ { "#localpage2(?:[?/](.*))?": {handler: "localpage", events: "bc,c,i,bs,s,bh,h"} },
+ { "#index": {
+ handler: function(type){
+ console.log("Index has been "+(type=="pagehide"?"hidden":"shown"));
+ }, events: "h,s" }
+ },
+ { "#localpage4(?:[?/](.*))?": {handler: "testDocEvts", events: "bC" } }
+ ],{
+ localpage: function(type,match,ui){
+ console.log("localpage2: "+type);
+ console.log(match);
+ },
+ testDocEvts: function(type,match,data,scope,e){
+ console.log("document event! "+type);
+ e.preventDefault();
+ if (typeof(data.toPage)!=="string") return;
+ $.mobile.changePage( $('<div data-role="page" data-url="localpage4"><div data-role="header"><h1>title</h1></div><div data-role="content">page4content<a data-role="button" href="#index">back to index</a></div></div>').appendTo("body") );
+ }
+ });
+ </script>
+</head>
+
+<body>
+
+<div data-role="page" id="index">
+ <div data-role="header">
+ <h1>Index</h1>
+ </div>
+
+ <div data-role="content">
+ <p>Page 1</p>
+ <p>The output of this page can be seen in your javascript console.</p>
+ <p>
+ The following link will show how to inject a page using the pagebeforechange evt<br/>
+ <a href="#localpage4?uiuiuouo">#localpage4</a><br/>
+ </p>
+ </div>
+
+ <div data-role="footer">
+ <h4>Index footer</h4>
+ </div>
+</div>
+
+
+<div data-role="page" id="localpage2" data-add-back-btn="true">
+ <div data-role="header">
+ <h1>Localpage 2</h1>
+ </div>
+
+ <div data-role="content">
+ <p>This is the localpage 2 in the multipage template.</p>
+ <p><a href="#index">Back to index</a></p>
+ </div>
+
+ <div data-role="footer">
+ <h4>Localpage 2 Footer</h4>
+ </div>
+</div>
+
+<div data-role="page" id="localpage3" data-add-back-btn="true">
+ <div data-role="header">
+ <h1>Localpage 3</h1>
+ </div>
+
+ <div data-role="content">
+ <p>This is the localpage 3 in the multipage template.</p>
+ <p><a href="#index">Back to index</a></p>
+ </div>
+
+ <div data-role="footer">
+ <h4>Localpage 3 Footer</h4>
+ </div>
+</div>
+
+
+</body>
+
+</html>
View
48 examples/test-bl.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Page Title</title>
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
+ <script type="text/javascript" src="../js/jquery.mobile.router-dev.js"></script>
+ <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
+ <script type="text/javascript">
+ var router=new $.mobile.Router([
+ { "#index": {
+ handler: function(type){
+ console.log("Index has been "+(type=="pagehide"?"hidden":"shown"));
+ }, events: "h,s" }
+ },
+ { "externalUrl(?:[?/](.*))?": {handler: "testBL", events: "bl" } }
+ ],{
+ testBL: function(type,match,data,scope,e){
+ console.log("document event! "+type);
+ e.preventDefault();
+ var page=$('<div data-role="page"><div data-role="header"><h1>title</h1></div><div data-role="content">page4content<a data-role="button" href="#index">back to index</a></div></div>').appendTo("body");
+ data.deferred.resolve(data.absUrl, data.options, page );
+ }
+ }, { ajaxApp: true });
+ </script>
+</head>
+
+<body>
+
+<div data-role="page" id="index">
+ <div data-role="header">
+ <h1>Index</h1>
+ </div>
+
+ <div data-role="content">
+ <p>Page 1</p>
+ <p>The output of this page can be seen in your javascript console.</p>
+ <p>
+ The following link will show how to inject a page using the pagebeforeload evt<br/>
+ <a href="externalUrl?blablabl">external url</a><br/>
+ </p>
+ </div>
+
+ <div data-role="footer">
+ <h4>Index footer</h4>
+ </div>
+</div>
+</html>
View
70 js/jquery.mobile.router.js → js/jquery.mobile.router-dev.js
@@ -103,9 +103,13 @@ $(document).bind("mobileinit",function(){
pagebeforecreate: null, pagecreate: null,
pagebeforeshow: null, pageshow: null,
pagebeforehide: null, pagehide: null,
- pageinit: null, pageremove: null
+ pageinit: null, pageremove: null,
+ pagebeforechange: null, pagebeforeload: null,
+ pageload: null
};
this.evtLookup = {
+ bC: "pagebeforechange", bl: "pagebeforeload",
+ l: "pageload",
bc: "pagebeforecreate", c: "pagecreate",
bs: "pagebeforeshow", s: "pageshow",
bh: "pagebeforehide", h: "pagehide",
@@ -123,13 +127,15 @@ $(document).bind("mobileinit",function(){
this.add(userRoutes,userHandlers);
}
$.extend($.mobile.Router.prototype,{
- add: function(userRoutes,userHandlers){
+ documentEvts: { pagebeforechange:1, pagebeforeload:1, pageload:1 },
+
+ add: function(userRoutes,userHandlers,_skipAttach){
if (!userRoutes) return;
- var _self=this, evtList=[];
+ var _self=this, evtList=[], docEvtList=[];
if (userRoutes instanceof Array){
$.each(userRoutes,$.proxy(function(k,v){
- this.add(v,userHandlers);
+ this.add(v,userHandlers,true);
},this));
} else {
$.each(userRoutes,function(r,el){
@@ -159,28 +165,41 @@ $(document).bind("mobileinit",function(){
}
}
});
- $.each(_self.routes,function(evt,el){
- if (el!==null){
+ }
+ if (_skipAttach===true) return;
+ if (!this.userHandlers){
+ this.userHandlers=userHandlers||{};
+ } else {
+ $.extend(this.userHandlers,userHandlers||{});
+ }
+ $.each(_self.routes,function(evt,el){
+ if (el!==null){
+ if (!_self.documentEvts[evt]){
evtList.push(evt);
+ } else {
+ docEvtList.push(evt);
}
- });
- if (!this.userHandlers){
- this.userHandlers=userHandlers||{};
- } else {
- $.extend(this.userHandlers,userHandlers||{});
- }
- this._detachEvents();
- if (evtList.length>0){
- this._eventData={
- events: evtList.join(" "),
- selectors: ":jqmData(role='page'),:jqmData(role='dialog')",
- handler: function(e,ui){ _self._processRoutes(e,ui,this); }
- };
- $(document).delegate(
- this._eventData.selectors,
- this._eventData.events, this._eventData.handler
- );
}
+ });
+ this._detachEvents();
+ var routeHandler=function(e,ui){ _self._processRoutes(e,ui,this); };
+ if (evtList.length>0){
+ this._eventData={
+ events: evtList.join(" "),
+ selectors: ":jqmData(role='page'),:jqmData(role='dialog')",
+ handler: routeHandler
+ };
+ $(document).delegate(
+ this._eventData.selectors,
+ this._eventData.events, this._eventData.handler
+ );
+ }
+ if (docEvtList.length>0){
+ this._docEventData={
+ events: docEvtList.join(" "),
+ handler: routeHandler
+ };
+ $(document).bind(this._docEventData.events, this._docEventData.handler);
}
},
@@ -203,7 +222,7 @@ $(document).bind("mobileinit",function(){
refUrl=$.mobile.path.parseUrl(refUrl);
}
}
- } else if (page && !$(page).jqmData("url")){
+ } else if (!this.documentEvts[e.type] && page && !$(page).jqmData("url")){
return;
}
if (!refUrl) return;
@@ -252,6 +271,9 @@ $(document).bind("mobileinit",function(){
this._eventData.events, this._eventData.handler
);
}
+ if (this._docEventData){
+ $(document).unbind(this._eventData.events, this._eventData.handler);
+ }
} ,
destroy: function(){

0 comments on commit daa6a22

Please sign in to comment.
Something went wrong with that request. Please try again.