Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Examples were updated for jqm 1.3.0 and jquery 1.8

  • Loading branch information...
commit 3edaecc39c7498139fd566f590a792b441c6d6ca 1 parent b1e0065
@azicchetti authored
View
6 examples/__subTestAjax.html → examples/subdir/__subTestAjax.html
@@ -2,9 +2,9 @@
<html>
<head>
<title>Page Title</title>
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
- <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
- <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
+ <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
View
28 examples/subdir/__subTestAjax2.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Page Title</title>
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
+ <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
+</head>
+
+<body>
+<div data-role="page" data-add-back-btn="true">
+
+ <div data-role="header">
+ <h1>Ajax Page 2 header</h1>
+ </div>
+
+ <div data-role="content">
+ <p>Ajax Page</p>
+ <p><a href="#" data-rel="back">Back</a></p>
+ </div>
+
+ <div data-role="footer">
+ <h4>Ajax Page Footer</h4>
+ </div>
+</div>
+</body>
+
+</html>
View
8 examples/__subTestAjax3.html → examples/subdir/__subTestAjax3.html
@@ -2,16 +2,16 @@
<html>
<head>
<title>Page Title</title>
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
- <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
- <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
+ <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div data-role="page" data-add-back-btn="true">
<div data-role="header">
- <h1>Ajax Page header</h1>
+ <h1>Ajax Page 3 header</h1>
</div>
<div data-role="content">
View
88 examples/test-bC.html
@@ -1,88 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <title>Page Title</title>
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.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.js"></script>
- <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.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
36 examples/test-bl.html
@@ -2,26 +2,26 @@
<html>
<head>
<title>Page Title</title>
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
- <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.mobile.router.js"></script>
- <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
+ <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.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 });
+ 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>
View
78 examples/test.html
@@ -2,47 +2,47 @@
<html>
<head>
<title>Page Title</title>
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
- <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.mobile.router.js"></script>
- <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
+ <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.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" }
- },{
- localpage: function(type,match,ui){
- console.log("localpage2: "+type+" "+match[0]);
- var params=router.getParams(match[1]);
- console.log(params);
- }
- }, {
- defaultHandler: function(type, ui, page) {
- console.log("Default handler called due to unknown route ("
- + type + ", " + ui + ", " + page + ")"
- );
- },
- defaultHandlerEvents: "s"
- });
-
- setTimeout(function(){
- alert("adding a dynamic route to localpage3...");
- router.add({
- "#localpage3(?:[?/](.*))?": {handler: "localpage3", events: "s"}
- },{
- localpage3: function(type,match){
- console.log("localpage3: "+type);
- console.log(match);
- }
- });
- },20000);
-
- setTimeout(function(){
- alert("deactivating router...");
- router.destroy();
- },120000);
+ 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" }
+ },{
+ localpage: function(type,match,ui){
+ console.log("localpage2: "+type+" "+match[0]);
+ var params=router.getParams(match[1]);
+ console.log(params);
+ }
+ }, {
+ defaultHandler: function(type, ui, page) {
+ console.log("Default handler called due to unknown route ("
+ + type + ", " + ui + ", " + page + ")"
+ );
+ },
+ defaultHandlerEvents: "s"
+ });
+
+ setTimeout(function(){
+ alert("adding a dynamic route to localpage3...");
+ router.add({
+ "#localpage3(?:[?/](.*))?": {handler: "localpage3", events: "s"}
+ },{
+ localpage3: function(type,match){
+ console.log("localpage3: "+type);
+ console.log(match);
+ }
+ });
+ },20000);
+
+ setTimeout(function(){
+ alert("deactivating router...");
+ router.destroy();
+ },120000);
</script>
</head>
View
66 examples/testAjax.html
@@ -2,39 +2,35 @@
<html>
<head>
<title>Page Title</title>
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
- <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
+ <script type="text/javascript" src="../js/jquery.mobile.router.js"></script>
+ <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript">
- $(document).bind("mobileinit",function(){
- $.mobile.jqmRouter={
- ajaxApp: true
- };
- });
- </script>
- <script type="text/javascript" src="../js/jquery.mobile.router.js"></script>
- <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
- <script type="text/javascript">
- var router=new $.mobile.Router({
- "/testAjax.html(?:[?](.*))?": {handler: "ajaxPage", events: "bc,c,bs,s,h"},
- "/__subTestAjax.html(?:[?](.*))?": {handler: "ajaxPage", events: "bc,c,i,bs,s,bh,h"},
- "/__subTestAjax3.html": {handler: "ajaxPage", events: "rm"}
- },{
- ajaxPage: function(type,match,ui){
- console.log("ajaxPage: "+type+" "+match[0]);
- var params=router.getParams(match[1]);
- console.log(params);
- }
- }, {
- defaultHandler: function(type, ui, page) {
- console.log("Default handler called due to unknown route ("
- + type + ", " + ui + ", " + page + ")");
- },
- defaultHandlerEvents: "s"
- });
- setTimeout(function(){
- alert("deactivating router...");
- router.destroy();
- },120000);
+ var router=new $.mobile.Router({
+ "/testAjax.html(?:[?](.*))?": {
+ handler: "ajaxPage", events: "bc,c,bs,s,h"
+ },
+ "/subdir/__subTestAjax.html(?:[?](.*))?": {
+ handler: "ajaxPage", events: "bc,c,i,bs,s,bh,h"
+ },
+ "/subdir/__subTestAjax3.html": {
+ handler: "ajaxPage", events: "rm"
+ }
+ }, {
+ ajaxPage: function(type,match,ui){
+ console.log("ajaxPage: "+type+" "+match[0]);
+ var params=router.getParams(match[1]);
+ console.log(params);
+ }
+ }, {
+ ajaxApp: true,
+ defaultHandler: function(type, ui, page) {
+ console.log("Default handler called due to unknown route ("
+ + type + ", " + ui + ", " + page + ")");
+ },
+ defaultHandlerEvents: "s"
+ });
</script>
</head>
@@ -49,8 +45,10 @@
<p>Index Page</p>
<p>The output of this page can be seen in your javascript console.</p>
<p>
- <a href="__subTestAjax.html">Ajax Page</a><br/>
- <a href="__subTestAjax.html?foo=bar&bar=foo&testarray[]=foo&testarray[]=bar">
+ <a href="subdir/__subTestAjax.html">Ajax Page</a><br/>
+ <a href="subdir/__subTestAjax2.html">Ajax Page 2</a><br/>
+ <a href="subdir/__subTestAjaxNotExisting.html">Non existing Page</a><br/>
+ <a href="subdir/__subTestAjax.html?foo=bar&bar=foo&testarray[]=foo&testarray[]=bar">
Ajax Page with params
</a><br/>
</p>
View
109 examples/testArraySyntax.html
@@ -2,66 +2,63 @@
<html>
<head>
<title>Page Title</title>
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
- <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.mobile.router.js"></script>
- <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
+ <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript">
- var router=new $.mobile.Router([
- { "#localpage2(?:[?/](.*))?": {handler: "localpageA", events: "bc,c,i"} },
- { "#localpage2(?:[?/](.*))?": {handler: "localpageB", events: "bs,s"} },
- { "#localpage2(?:[?/](.*))?": {handler: "localpageC", events: "bh,h"} },
- { "#index": { handler: function(type){
- console.log("Index has been "+(type=="pagehide"?"hidden":"shown"));
- }, events: "h,s" }
- }
- ],{
- localpageA: function(type,match,ui){
- var params=router.getParams(match[1]);
- console.log("localpage function A: "+type);
- console.log(params);
- },
- localpageB: function(type,match,ui){
- var params=router.getParams(match[1]);
- console.log("localpage function B: "+type);
- console.log(params);
- },
- localpageC: function(type,match,ui){
- var params=router.getParams(match[1]);
- console.log("localpage function C: "+type);
- console.log(params);
- }
- },{
- defaultHandler: function(type, ui, page) {
- console.log("Default handler called due to unknown route ("
- + type + ", " + ui + ", " + page + ")");
- },
- defaultHandlerEvents: "s"
- });
+ var router=new $.mobile.Router([
+ { "#localpage2(?:[?/](.*))?": { handler: "localpageA", events: "bc,c,i" } },
+ { "#localpage2(?:[?/](.*))?": { handler: "localpageB", events: "bs,s" } },
+ { "#localpage2(?:[?/](.*))?": { handler: "localpageC", events: "bh,h" } },
+ { "#index": {
+ handler: function(type){
+ console.log("Index has been "+(type=="pagehide"?"hidden":"shown"));
+ },
+ events: "h,s" }
+ }
+ ], {
+ localpageA: function(type,match,ui){
+ var params=router.getParams(match[1]);
+ console.log("localpage function A: "+type);
+ console.log(params);
+ },
+ localpageB: function(type,match,ui){
+ var params=router.getParams(match[1]);
+ console.log("localpage function B: "+type);
+ console.log(params);
+ },
+ localpageC: function(type,match,ui){
+ var params=router.getParams(match[1]);
+ console.log("localpage function C: "+type);
+ console.log(params);
+ }
+ }, {
+ defaultHandler: function(type, ui, page) {
+ console.log("Default handler called due to unknown route ("
+ + type + ", " + ui + ", " + page + ")");
+ },
+ defaultHandlerEvents: "s"
+ });
setTimeout(function(){
- alert("adding a dynamic route to localpage3...");
- router.add([
- { "#localpage3(?:[?/](.*))?": {handler: "localpage3Shown", events: "s"} },
- { "#localpage3(?:[?/](.*))?": {handler: "localpage3Hidden", events: "h"} }
- ],{
- localpage3Shown: function(type,match){
- var params=router.getParams(match[1]);
- console.log("localpage3 shown");
- console.log(params);
- },
- localpage3Hidden: function(type,match){
- var params=router.getParams(match[1]);
- console.log("localpage3 hidden");
- console.log(params);
- }
- });
- },20000);
-
- setTimeout(function(){
- alert("deactivating router...");
- router.destroy();
- },120000);
+ alert("adding a dynamic route to localpage3...");
+ router.add([
+ { "#localpage3(?:[?/](.*))?": { handler: "localpage3Shown", events: "s" } },
+ { "#localpage3(?:[?/](.*))?": { handler: "localpage3Hidden", events: "h" } }
+ ],{
+ localpage3Shown: function(type,match){
+ var params=router.getParams(match[1]);
+ console.log("localpage3 shown");
+ console.log(params);
+ },
+ localpage3Hidden: function(type,match){
+ var params=router.getParams(match[1]);
+ console.log("localpage3 hidden");
+ console.log(params);
+ }
+ });
+ }, 20000);
</script>
</head>
View
21 examples/testNestedList.html
@@ -1,18 +1,21 @@
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
-<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
-<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
-<script src="../js/jquery.mobile.router-test.js"></script>
-<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
+<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
+<script src="../js/jquery.mobile.router.js"></script>
+<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
- var r=new $.mobile.Router({ "#index([?].*)?": {
- handler: function(e,params,ui,page){
- console.log(e);
- console.log(params);
- }, events: "bs,bh" }
+ var r=new $.mobile.Router({
+ "^#index$": function(){ console.log("index!"); },
+ "#index([&].*)": {
+ handler: function(e,params,ui,page){
+ console.log(e);
+ console.log(params);
+ }, events: "bs,bh"
+ }
});
</script>
</head>
Please sign in to comment.
Something went wrong with that request. Please try again.