libs/js/jquery-mobile-1.2.0/docs/pages/popup/popup-panels.html

   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>jQuery Mobile Docs - Popup panels</title>
   7         <link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile.css" />
   8         <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
   9
  10         <script src="../../../js/jquery.js"></script>
  11         <script src="../../../docs/_assets/js/jqm-docs.js"></script>
  12         <script src="../../../js/"></script>
  13
  14         <script src="popup-examples.js"></script>
  15         <link rel="stylesheet" href="popup-examples.css" />
  16
  17 </head>
  18 <body>
  19
  20         <div data-role="page" class="type-interior">
  21
  22                 <div data-role="header" data-theme="f">
  23                 <h1>Popup panels</h1>
  24                 <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
  25                 <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
  26         </div><!-- /header -->
  27
  28         <div data-role="content" class="ui-body">
  29                 <div class="content-primary">
  30
  31                         <a href="index.html" data-role="button" data-transition="fade" data-icon="arrow-l" data-inline="true" data-mini="true">Back to Popups</a>
  32                         <h2>Overlay panels</h2>
  33
  34                         <p>Taking customization further, here is an example of a popup that has been customized to look like a vertical panel with three mini buttons:</p>
  35
  36                         <a href="#popupPanel" data-rel="popup" data-transition="slide" data-position-to="window" data-role="button" data-theme="b" data-inline="true">Open panel</a>
  37
  38                         <div data-role="popup" id="popupPanel" data-corners="false" data-theme="none" data-shadow="false" data-tolerance="0,0">
  39                                 <button data-theme="a" data-icon="back" data-mini="true">Back</button>
  40                                 <button data-theme="a" data-icon="grid" data-mini="true">Menu</button>
  41                                 <button data-theme="a" data-icon="search" data-mini="true">Search</button>
  42                         </div>
  43
  44                         <p>Here is the HTML markup for the button and panel:</p>
  45 <pre><code>
  46 &lt;a href="#popupPanel" data-rel="popup" data-transition="slide" data-position-to="window" data-role="button"&gt;Open panel&lt;/a&gt;
  47
  48 &lt;div data-role="popup" id="popupPanel" data-corners="false" data-theme="none" data-shadow="false" data-tolerance="0,0"&gt;
  49
  50     &lt;button data-theme="a" data-icon="back" data-mini="true"&gt;Back&lt;/button&gt;
  51     &lt;button data-theme="a" data-icon="grid" data-mini="true"&gt;Menu&lt;/button&gt;
  52     &lt;button data-theme="a" data-icon="search" data-mini="true"&gt;Search&lt;/button&gt;
  53
  54 &lt;/div&gt;
  55 </code></pre>
  56
  57                         <p>To style the panel, and attach it to the right edge, the following CSS is used. Note that <code>#popupPanel-popup</code> is the ID of the container div generated by the framework.</p>
  58 <pre><code>
  59 #popupPanel-popup {
  60     right: 0 !important;
  61     left: auto !important;
  62 }
  63 #popupPanel {
  64     width: 200px;
  65     border: 1px solid #000;
  66     border-right: none;
  67     background: rgba(0,0,0,.5);
  68     margin: -1px 0;
  69 }
  70 #popupPanel .ui-btn {
  71     margin: 2em 15px;
  72 }
  73 </code></pre>
  74
  75                         <p>Because the popup container is positioned absolute, you can't make the panel full height with <code>height:100%;</code>. This small script sets the height of the popup to the actual screen height.</p>
  76 <pre><code>
  77 $( "#popupPanel" ).on({
  78     popupbeforeposition: function() {
  79         var h = $( window ).height();
  80
  81         $( "#popupPanel" ).css( "height", h );
  82     }
  83 });
  84 </code></pre>
  85
  86
  87                 </div><!--/content-primary -->
  88
  89                                 <div class="content-secondary">
  90
  91                                         <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
  92
  93                                                         <h3>More in this section</h3>
  94
  95                                                         <ul data-role="listview" data-theme="c" data-dividertheme="d">
  96
  97                                                                 <li data-role="list-divider">Pages &amp; Dialogs</li>
  98                                                                 <li><a href="../page-anatomy.html">Anatomy of a page</a></li>
  99                                                                 <li><a href="../page-template.html" data-ajax="false">Single page template</a></li>
 100                                                                 <li><a href="../multipage-template.html" data-ajax="false">Multi-page template</a></li>
 101                                                                 <li><a href="../page-titles.html">Page titles</a></li>
 102                                                                 <li><a href="../page-links.html">Linking pages</a></li>
 103                                                                 <li><a href="../page-transitions.html" data-ajax="false">Page transitions</a></li>
 104                                                                 <li><a href="../loader.html">Page loading widget</a></li>
 105                                                                 <li><a href="../dialog/index.html">Dialogs</a></li>
 106                                                                 <li data-theme="a"><a href="index.html">Popups</a></li>
 107                                                                 <li><a href="../page-cache.html">Prefetching &amp; caching pages</a></li>
 108                                                                 <li><a href="../page-navmodel.html">Ajax, hashes &amp; history</a></li>
 109                                                                 <li><a href="../page-dynamic.html">Dynamically Injecting Pages</a></li>
 110                                                                 <li><a href="../page-scripting.html">Scripting pages</a></li>
 111                                                                 <li><a href="../phonegap.html">PhoneGap apps</a></li>
 112                                                                 <li><a href="../touchoverflow.html">touchOverflow feature</a></li>
 113                                                                 <li><a href="../pages-themes.html">Theming pages</a></li>
 114
 115                                                         </ul>
 116                                         </div>
 117                                 </div>
 118
 119 </div><!-- /content -->
 120
 121 <div data-role="footer" class="footer-docs" data-theme="c">
 122                 <p class="jqm-version"></p>
 123                 <p>&copy; 2012 jQuery Foundation and other contributors</p>
 124 </div>
 125
 126 </div><!-- /page -->
 127
 128 </body>
 129 </html>