mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-05-12 16:43:10 +00:00
242 lines
12 KiB
HTML
242 lines
12 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>jQuery Mobile Docs - Popup</title>
|
|
<link rel="stylesheet" href="../../../css/themes/default/" />
|
|
<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
|
|
<script src="../../../js/jquery.js"></script>
|
|
<script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
|
|
<script src="../../_assets/js/jqm-docs.js"></script>
|
|
<script src="../../../js/"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div data-role="page" class="type-interior">
|
|
|
|
<div data-role="header" data-theme="f">
|
|
<h1>Popup</h1>
|
|
<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
|
|
</div><!-- /header -->
|
|
|
|
<div data-role="content">
|
|
<div class="content-primary">
|
|
|
|
<form action="#" method="get">
|
|
<h2>Popup</h2>
|
|
|
|
<ul data-role="controlgroup" data-type="horizontal" class="localnav">
|
|
<li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
|
|
<li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
|
|
<li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
|
|
<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
|
|
</ul>
|
|
|
|
<p>To turn any div into a popup, add the <code>data-role="popup"</code> attribute to the div. If you would like the popup to appear when the user clicks on a link, create a link such that its <code>href</code> attribute is set to the id of the popup, and the link has the attribute <code>data-rel="popup"</code>. </p>
|
|
|
|
<pre><code>
|
|
<a href="#popupBasic" data-rel="popup">Tooltip</a>
|
|
|
|
<div data-role="popup" id="popupBasic">
|
|
This is a completely basic popup, no options set.
|
|
</div>
|
|
</code></pre>
|
|
|
|
<p>This will result in the following <a href="#popupBasic" data-rel="popup">popup</a>. Note that we shouldn't set any padding on the popup so widgets will fit cleanly inside.</p>
|
|
<div data-role="popup" id="popupBasic">
|
|
<p>This is a completely basic popup, no options set.</p>
|
|
</div>
|
|
|
|
<p>There seems to be some inheritance going on with buttons: <a href="#popupBasicBtn" data-rel="popup" data-role="button" data-inline="true">popup</a></p>
|
|
<div data-role="popup" id="popupBasicBtn">
|
|
<p>This is a completely basic popup, no options set.</p>
|
|
</div>
|
|
|
|
<p>Now on to some cool examples</p>
|
|
<a href="#popupInfo" data-rel="popup" data-role="button" data-inline="true">Tooltip</a>
|
|
<a href="#popupMenu" data-rel="popup" data-role="button" data-inline="true" data-transition="fade">Menu</a>
|
|
<a href="#popupLogin" data-rel="popup" data-role="button" data-inline="true">Form</a>
|
|
<a href="#popupPhoto" data-rel="popup" data-role="button" data-inline="true">Photo</a>
|
|
<a href="#popupDialog" data-rel="popup" data-role="button" data-inline="true">Dialog</a>
|
|
<a href="#popupAccordion" data-rel="popup" data-role="button" data-inline="true">Accordion</a>
|
|
|
|
|
|
<div data-role="popup" id="popupInfo" data-overlay-theme="b">
|
|
<div class="ui-corner-all ui-body-e" style="padding:5px 15px;">
|
|
<p>Here is a <strong>tiny popup</strong> being used like a <a href="#popupPhoto" data-rel="popup">tooltip</a>.</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div data-role="popup" id="popupMenu" data-overlay-theme="b">
|
|
<ul data-role="listview" data-inset="true" style="width:180px;" data-theme="b">
|
|
<li><a href="index.html">Add</a></li>
|
|
<li><a href="index.html">Edit</a></li>
|
|
<li><a href="index.html">Manage</a></li>
|
|
<li><a href="index.html">Delete</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<div data-role="popup" id="popupLogin" data-overlay-theme="b" data-theme="a" class="ui-corner-all">
|
|
<form>
|
|
<div style="padding:10px 20px;">
|
|
<h3>Please sign in</h3>
|
|
<label for="un" class="ui-hidden-accessible">Username:</label>
|
|
<input type="text" name="user" id="un" value="" placeholder="username" data-theme="a" />
|
|
|
|
<label for="pw" class="ui-hidden-accessible">Password:</label>
|
|
<input type="password" name="pw" id="pass" value="" placeholder="password" data-theme="a" />
|
|
|
|
<button type="submit" data-theme="b">Sign in</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
|
|
<div data-role="popup" id="popupPhoto" data-overlay-theme="a">
|
|
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-popup-btn-close">Close</a><img src="../../toolbars/images/photo-run.jpeg" alt="Photo Run">
|
|
</div>
|
|
|
|
|
|
<div data-role="popup" id="popupDialog" data-overlay-theme="d" data-theme="c" style="max-width:500px;" class="ui-corner-all">
|
|
<div data-role="header" data-theme="d" class="ui-corner-top">
|
|
<h1>Dialog</h1>
|
|
</div>
|
|
<div data-role="content" data-theme="d" style="padding:15px;" class="ui-corner-bottom">
|
|
<h1>Delete page?</h1>
|
|
<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
|
|
<a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="b">Sounds good</a>
|
|
<a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="c">Cancel</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-role="popup" id="popupAccordion" data-overlay-theme="a" data-theme="c" style="width:300px;">
|
|
<div data-role="collapsible-set" data-theme="c" data-content-theme="d" style="margin:0;">
|
|
<div data-role="collapsible">
|
|
<h3>Section 1</h3>
|
|
<p>Collapsible content</p>
|
|
</div>
|
|
<div data-role="collapsible">
|
|
<h3>Section 2</h3>
|
|
<p>Collapsible content</p>
|
|
|
|
</div>
|
|
<div data-role="collapsible">
|
|
<h3>Section 3</h3>
|
|
<p>Collapsible content</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p>Popup windows can have various transitions:
|
|
<a href="#transitionExample-pop" data-role="button" data-inline="true" data-rel="popup">Pop</a>
|
|
<a href="#transitionExample-slideup" data-role="button" data-inline="true" data-rel="popup">Slide up</a>
|
|
<a href="#transitionExample-slidedown" data-role="button" data-inline="true" data-rel="popup">Slide down</a>
|
|
</p>
|
|
<!-- The following div will be ripped out of here and placed into a popup -->
|
|
<div id="transitionExample-pop" data-role="popup" data-transition="pop">
|
|
<p>This is some text for the transition example: Pop!</p>
|
|
</div>
|
|
<div id="transitionExample-slideup" data-role="popup" data-transition="slideup">
|
|
<p>This is some text for the transition example: Slide up!</p>
|
|
</div>
|
|
<div id="transitionExample-slidedown" data-role="popup" data-transition="slidedown">
|
|
<p>This is some text for the transition example: Slide down!</p>
|
|
</div>
|
|
|
|
|
|
<h2>Calling the popup plugin</h2>
|
|
|
|
<p>This plugin will auto initialize on any page that contains a div with the attribute <code>data-role="popup"</code>. However, if needed you can directly call the <code>popup</code> plugin on any selector, just like any jQuery plugin:</p>
|
|
<pre><code>
|
|
$('#myPopupDiv').popup();
|
|
</code></pre>
|
|
|
|
<div data-role="popup" id="popupTester">
|
|
<p>This popup assumes the theme of the button that launches it.</p>
|
|
<p>Thus, it supports the idea that it is connected to the button.</p>
|
|
</div>
|
|
|
|
<h2>Theming the popup</h2>
|
|
<p>Normally, the popup's theme will be set to align with the theme of the link that launches it. The above popup can be shown in multiple places. Each time, upon appearing, the popup's theme is set to match that of the link that launches it:</p>
|
|
<pre><code>
|
|
<a href="#popupTester" data-rel="popup" data-role="button" data-inline="true" data-theme="a">Pop</a>
|
|
<a href="#popupTester" data-rel="popup" data-role="button" data-inline="true" data-theme="b">Pop</a>
|
|
<a href="#popupTester" data-rel="popup" data-role="button" data-inline="true" data-theme="e">Pop</a>
|
|
</code></pre>
|
|
<p>
|
|
The result:
|
|
<a href="#popupTester" data-rel="popup" data-role="button" data-inline="true" data-theme="a">Pop</a>
|
|
<a href="#popupTester" data-rel="popup" data-role="button" data-inline="true" data-theme="b">Pop</a>
|
|
<a href="#popupTester" data-rel="popup" data-role="button" data-inline="true" data-theme="e">Pop</a>
|
|
</p>
|
|
<p>However, you can override this by setting the theme yourself. You can apply a theme separately to the popup itself and to its contents. To apply a theme to the popup itself, set the <code>data-overlay-theme</code> attribute to one of the swatches. For example, <code>data-overlay-theme="a"</code>. To apply a theme to the contents of the popup, add the swatch of your choice via the <code>data-theme</code> attribute to the popup div. For example, <code>data-theme="a"</code>. Here is an example of an explicitly themed popup:</p>
|
|
|
|
<pre><code>
|
|
<div data-role="popup" id="popupTesterThemed" data-overlay-theme="e" data-theme="a">
|
|
<table>
|
|
<tr><td>Mary</td><td>had-a</td><td>little</td><td>lamb</td></tr>
|
|
<tr><td>And</td><td>it-was</td><td>white-as</td><td>snow</td></tr>
|
|
<tr><td>Everywhere</td><td>that</td><td>Mary</td><td>went</td></tr>
|
|
<tr><td>It</td><td>was</td><td>sure</td><td>to-go</td></tr>
|
|
</table>
|
|
</div>
|
|
<a href="#popupTesterThemed" data-rel="popup" data-role="button" data-inline="true">Pop</a>
|
|
</code></pre>
|
|
|
|
<p> This is the result:</p>
|
|
|
|
<div data-role="popup" id="popupTesterThemed" data-overlay-theme="e" data-theme="a">
|
|
<table>
|
|
<tr><td>Mary</td><td>had-a</td><td>little</td><td>lamb</td></tr>
|
|
<tr><td>And</td><td>it-was</td><td>white-as</td><td>snow</td></tr>
|
|
<tr><td>Everywhere</td><td>that</td><td>Mary</td><td>went</td></tr>
|
|
<tr><td>It</td><td>was</td><td>sure</td><td>to-go</td></tr>
|
|
</table>
|
|
</div>
|
|
<a href="#popupTesterThemed" data-rel="popup" data-role="button" data-inline="true">Pop</a>
|
|
|
|
|
|
</div><!--/content-primary -->
|
|
|
|
<div class="content-secondary">
|
|
|
|
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
|
|
|
|
<h3>More in this section</h3>
|
|
|
|
<ul data-role="listview" data-theme="c" data-dividertheme="d">
|
|
|
|
<li data-role="list-divider">Pages & Dialogs</li>
|
|
<li><a href="../page-anatomy.html">Anatomy of a page</a></li>
|
|
<li><a href="../page-template.html" data-ajax="false">Single page template</a></li>
|
|
<li><a href="../multipage-template.html" data-ajax="false">Multi-page template</a></li>
|
|
<li><a href="../page-titles.html">Page titles</a></li>
|
|
<li><a href="../page-links.html">Linking pages</a></li>
|
|
<li><a href="../page-transitions.html" data-ajax="false">Page transitions</a></li>
|
|
<li><a href="../page-dialogs.html">Dialogs</a></li>
|
|
<li data-theme="a"><a href="popup/index.html">Popups</a></li>
|
|
<li><a href="../page-cache.html">Prefetching & caching pages</a></li>
|
|
<li><a href="../page-navmodel.html">Ajax, hashes & history</a></li>
|
|
<li><a href="../page-dynamic.html">Dynamically Injecting Pages</a></li>
|
|
<li><a href="../page-scripting.html">Scripting pages</a></li>
|
|
<li><a href="../pages-themes.html">Theming pages</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /content -->
|
|
|
|
<div data-role="footer" class="footer-docs" data-theme="c">
|
|
<p>© 2011 The jQuery Project</p>
|
|
</div>
|
|
|
|
</div><!-- /page -->
|
|
|
|
</body>
|
|
</html>
|
|
|