panel demo

by Prasad

HTML

<div data-role="page" id="page1">
<div data-role="header">
<h1>jQuery Mobile Example</h1>
</div>
<div data-role="content">
<a href="#defaultpanel" data-role="button" data-inline="true" data-icon="bars">Default panel</a>
</div>
<!-- defaultpanel -->
<div data-role="panel" id="defaultpanel" data-theme="b">	
<div class="panel-content ui-responsive" data-display="push">
<h3>Default panel options</h3>
<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>
<p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p>
<a href="#demo-links" data-rel="close" data-role="button" data-theme="c" data-icon="delete" data-inline="true">Close panel</a>
</div><!-- /content wrapper for padding -->
</div><!-- /defaultpanel -->
</div>

CSS

.panel-content {
padding:15px;
}