|
| 1 | +<!DOCTYPE html> |
| 2 | +<html> |
| 3 | + <head> |
| 4 | + <meta charset="utf-8"> |
| 5 | + <meta name="viewport" content="width=device-width, initial-scale=1"> |
| 6 | + <title>Panels - jQuery Mobile Demos</title> |
| 7 | + <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"> |
| 8 | + <link rel="stylesheet" href="../../_assets/css/jqm-demos.css"> |
| 9 | + <link rel="shortcut icon" href="../../favicon.ico"> |
| 10 | + <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700"> |
| 11 | + <script src="../../../js/jquery.js"></script> |
| 12 | + <script src="../../_assets/js/"></script> |
| 13 | + <script src="../../../js/"></script> |
| 14 | + <script> |
| 15 | + $(function(){ |
| 16 | + $("body>[data-role='panel']").panel() |
| 17 | + |
| 18 | + }); |
| 19 | + </script> |
| 20 | +</head> |
| 21 | +<body> |
| 22 | +<div data-role="page" class="jqm-demos" data-quicklinks="true"> |
| 23 | + |
| 24 | + <!-- default panel --> |
| 25 | + <div data-role="panel" id="defaultpanel"> |
| 26 | + |
| 27 | + <h3>Default panel options</h3> |
| 28 | + <p>This panel has all the default options: positioned on the left with the reveal display mode. The panel markup is <em>before</em> the header, content and footer in the source order.</p> |
| 29 | + <p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p> |
| 30 | + <a href="#demo-links" data-rel="close" data-role="button" data-theme="c" data-icon="delete" data-inline="true">Close panel</a> |
| 31 | + |
| 32 | + </div><!-- /default panel --> |
| 33 | + |
| 34 | + <!-- Note: all other panels are at the end of the page, scroll down --> |
| 35 | + |
| 36 | + <div data-role="header" class="jqm-header"> |
| 37 | + <h1 class="jqm-logo"><a href="../../"><img src="../../_assets/img/jquery-logo.png" alt="jQuery Mobile Framework"></a></h1> |
| 38 | + <a href="#" class="jqm-navmenu-link" data-icon="bars" data-iconpos="notext">Navigation</a> |
| 39 | + <a href="#" class="jqm-search-link" data-icon="search" data-iconpos="notext">Search</a> |
| 40 | + <?php include( '../../search.php' ); ?> |
| 41 | + </div><!-- /header --> |
| 42 | + |
| 43 | + <div data-role="content" class="jqm-content"> |
| 44 | + |
| 45 | + <h1>External Panels Page 2<a href="http://api.jquerymobile.com/panel/" data-ajax="false" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-r" data-iconpos="right" class="jqm-api-link">API</a></h1> |
| 46 | + |
| 47 | + <p class="jqm-intro">Flexible by design, panels can be used for navigation, forms, inspectors and more.</p> |
| 48 | + |
| 49 | + <h2 id="panel-examples">External Panels - These panels only exist if you navigated here from page 1. to try this refresh the page and try the links they will not work.</h2> |
| 50 | + |
| 51 | + <p>The panels below are all located outside the page</p> |
| 52 | + |
| 53 | + <p><strong>Left</strong> panel examples</p> |
| 54 | + <a href="#leftpanel3" data-role="button" data-inline="true" data-mini="true">Overlay</a> |
| 55 | + <a href="#leftpanel1" data-role="button" data-inline="true" data-mini="true">Reveal</a> |
| 56 | + <a href="#leftpanel2" data-role="button" data-inline="true" data-mini="true">Push</a> |
| 57 | + |
| 58 | + <p><strong>Right</strong> panel examples</p> |
| 59 | + <a href="#rightpanel3" data-role="button" data-inline="true" data-mini="true">Overlay</a> |
| 60 | + <a href="#rightpanel1" data-role="button" data-inline="true" data-mini="true">Reveal</a> |
| 61 | + <a href="#rightpanel2" data-role="button" data-inline="true" data-mini="true">Push</a> |
| 62 | + |
| 63 | + </div><!-- /content --> |
| 64 | + |
| 65 | + <div data-role="footer" class="jqm-footer"> |
| 66 | + <p class="jqm-version"></p> |
| 67 | + <p>Copyright 2013 The jQuery Foundation</p> |
| 68 | + </div><!-- /footer --> |
| 69 | + |
| 70 | + <!-- Here are a bunch of panels at the end, just before the close page tag --> |
| 71 | + |
| 72 | + <!-- leftpanel1 --> |
| 73 | + |
| 74 | + |
| 75 | +<?php include( '../../global-nav.php' ); ?> |
| 76 | + |
| 77 | +</div><!-- /page --> |
| 78 | +</body> |
| 79 | +</html> |
0 commit comments