Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Commit

Permalink
Demos: Added external fixed toolbars to panel test pages.
Browse files Browse the repository at this point in the history
  • Loading branch information
jaspermdegroot committed Jul 17, 2013
1 parent e454ce1 commit edcd958
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 47 deletions.
41 changes: 26 additions & 15 deletions demos/test/panels/index.html
Expand Up @@ -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">

Expand All @@ -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 -->
Expand All @@ -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>
Expand Down
41 changes: 25 additions & 16 deletions demos/test/panels/page-b.html
Expand Up @@ -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>
Expand All @@ -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 -->
Expand All @@ -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>
Expand Down
41 changes: 25 additions & 16 deletions demos/test/panels/page-c.html
Expand Up @@ -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>
Expand All @@ -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">
Expand All @@ -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>
Expand All @@ -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 -->
Expand Down

0 comments on commit edcd958

Please sign in to comment.