Permalink
Browse files

Demos: Added external fixed toolbars to panel test pages.

  • Loading branch information...
jaspermdegroot committed Jul 17, 2013
1 parent e454ce1 commit edcd95806faca220be30f1023beaba5add814f19
Showing with 76 additions and 47 deletions.
  1. +26 −15 demos/test/panels/index.html
  2. +25 −16 demos/test/panels/page-b.html
  3. +25 −16 demos/test/panels/page-c.html
@@ -11,25 +11,29 @@
<script>
$( document ).on( "pagecreate", function() {
$( "body > [data-role='panel']" ).panel();
- $( "#outside [data-role='listview']" ).listview();
+ $( "body > [data-role='panel'] [data-role='listview']" ).listview();
+ $( "body > [data-role='header']" ).toolbar();
+ $( "body > [data-role='header'] [data-role='navbar']" ).navbar();
});
</script>
</head>
<body>
+
+ <div data-role="header" data-position="fixed" data-theme="a">
+ <h1>Header index.html</h1>
+ <a href="#outside" data-icon="bars" data-iconpos="notext">Menu</a>
+ <a href="#inside-a" data-icon="bars" data-iconpos="notext">Menu</a>
+ <div data-role="navbar">
+ <ul>
+ <li><a href="index.html">Page A</a></li>
+ <li><a href="page-b.html">Page B</a></li>
+ <li><a href="page-c.html">Page C</a></li>
+ </ul>
+ </div>
+ </div><!-- /header -->
+
<div data-role="page" id="a">
- <div data-role="header" data-position="fixed">
- <h1>Header</h1>
- <a href="#outside" data-icon="bars" data-iconpos="notext">Menu</a>
- <a href="#inside-a" data-icon="bars" data-iconpos="notext">Menu</a>
- <div data-role="navbar">
- <ul>
- <li><a href="index.html" class="ui-btn-active ui-state-persist">Page A</a></li>
- <li><a href="page-b.html">Page B</a></li>
- <li><a href="page-c.html">Page C</a></li>
- </ul>
- </div>
- </div><!-- /header -->
<div data-role="content">
@@ -48,7 +52,13 @@ <h2>Page A</h2>
</div>
<div data-role="footer" data-position="fixed">
- <h4>Footer</h4>
+ <div data-role="navbar">
+ <ul>
+ <li><a href="index.html" class="ui-btn-active ui-state-persist">Page A</a></li>
+ <li><a href="page-b.html">Page B</a></li>
+ <li><a href="page-c.html">Page C</a></li>
+ </ul>
+ </div>
</div><!-- /header -->
</div><!-- /page -->
@@ -59,7 +69,8 @@ <h4>Footer</h4>
<li>List item</li>
<li>List item</li>
</ul>
- <p>sibling page A</p>
+ <br><br>
+ <p>index.html</p>
</div>
</body>
@@ -11,27 +11,29 @@
<script>
$( document ).on( "pagecreate", function() {
$( "body > [data-role='panel']" ).panel();
- $( "#outside [data-role='listview']" ).listview();
+ $( "body > [data-role='panel'] [data-role='listview']" ).listview();
+ $( "body > [data-role='header']" ).toolbar();
+ $( "body > [data-role='header'] [data-role='navbar']" ).navbar();
});
</script>
</head>
<body>
+ <div data-role="header" data-position="fixed" data-theme="a">
+ <h1>Header page-b.html</h1>
+ <a href="#outside" data-icon="bars" data-iconpos="notext">Menu</a>
+ <a href="#inside-b" data-icon="bars" data-iconpos="notext">Menu</a>
+ <div data-role="navbar">
+ <ul>
+ <li><a href="./">Page A</a></li>
+ <li><a href="page-b.html">Page B</a></li>
+ <li><a href="page-c.html">Page C</a></li>
+ </ul>
+ </div>
+ </div><!-- /header -->
+
<div data-role="page" id="b">
- <div data-role="header" data-position="fixed">
- <h1>Header</h1>
- <a href="#outside" data-icon="bars" data-iconpos="notext">Menu</a>
- <a href="#inside-b" data-icon="bars" data-iconpos="notext">Menu</a>
- <div data-role="navbar">
- <ul>
- <li><a href="./">Page A</a></li>
- <li><a href="page-b.html" class="ui-btn-active ui-state-persist">Page B</a></li>
- <li><a href="page-c.html">Page C</a></li>
- </ul>
- </div>
- </div><!-- /header -->
-
<div data-role="content">
<h2>Page B</h2>
@@ -49,7 +51,13 @@ <h2>Page B</h2>
</div>
<div data-role="footer" data-position="fixed">
- <h4>Footer</h4>
+ <div data-role="navbar">
+ <ul>
+ <li><a href="./">Page A</a></li>
+ <li><a href="page-b.html" class="ui-btn-active ui-state-persist">Page B</a></li>
+ <li><a href="page-c.html">Page C</a></li>
+ </ul>
+ </div>
</div><!-- /header -->
</div><!-- /page -->
@@ -60,7 +68,8 @@ <h4>Footer</h4>
<li>List item</li>
<li>List item</li>
</ul>
- <p>sibling page B</p>
+ <br><br>
+ <p>page-b.html</p>
</div>
</body>
@@ -11,7 +11,9 @@
<script>
$( document ).on( "pagecreate", function() {
$( "body > [data-role='panel']" ).panel();
- $( "#outside [data-role='listview']" ).listview();
+ $( "body > [data-role='panel'] [data-role='listview']" ).listview();
+ $( "body > [data-role='header']" ).toolbar();
+ $( "body > [data-role='header'] [data-role='navbar']" ).navbar();
});
</script>
</head>
@@ -23,9 +25,23 @@
<li>List item</li>
<li>List item</li>
</ul>
- <p>sibling page C</p>
+ <br><br>
+ <p>page-c.html</p>
</div>
+ <div data-role="header" data-position="fixed" data-theme="a">
+ <h1>Header page-c.html</h1>
+ <a href="#outside" data-icon="bars" data-iconpos="notext">Menu</a>
+ <a href="#inside-c" data-icon="bars" data-iconpos="notext">Menu</a>
+ <div data-role="navbar">
+ <ul>
+ <li><a href="./">Page A</a></li>
+ <li><a href="page-b.html">Page B</a></li>
+ <li><a href="page-c.html">Page C</a></li>
+ </ul>
+ </div>
+ </div><!-- /header -->
+
<div data-role="page" id="c">
<div data-role="panel" id="inside-c" data-position="right" data-theme="b">
@@ -36,19 +52,6 @@
</ul>
</div>
- <div data-role="header" data-position="fixed">
- <h1>Header</h1>
- <a href="#outside" data-icon="bars" data-iconpos="notext">Menu</a>
- <a href="#inside-c" data-icon="bars" data-iconpos="notext">Menu</a>
- <div data-role="navbar">
- <ul>
- <li><a href="./">Page A</a></li>
- <li><a href="page-b.html">Page B</a></li>
- <li><a href="page-c.html" class="ui-btn-active ui-state-persists">Page C</a></li>
- </ul>
- </div>
- </div><!-- /header -->
-
<div data-role="content">
<h2>Page C</h2>
@@ -58,7 +61,13 @@ <h2>Page C</h2>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
- <h4>Footer</h4>
+ <div data-role="navbar">
+ <ul>
+ <li><a href="./">Page A</a></li>
+ <li><a href="page-b.html">Page B</a></li>
+ <li><a href="page-c.html" class="ui-btn-active ui-state-persists">Page C</a></li>
+ </ul>
+ </div>
</div><!-- /header -->
</div><!-- /page -->

0 comments on commit edcd958

Please sign in to comment.