Lezione #id-jqmobile-2013-0007#
JQuery Mobile mette a disposizione differenti offetti di Popup, dal tooltip alla photo gallery lightbox.
Vediamo il seguente codice:
<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" /> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/jquery.mobile-1.3.2.min.js"></script> </head> <body> <div data-role="page" id="one"> <div data-role="header"> <h1>Page one</h1> </div><!-- /header --> <div data-role="content"> <a href="#popupBasic" data-rel="popup" data-role="button" data-inline="true" data-transition="pop">Basic Popup</a> <div data-role="popup" id="popupBasic"> <p>This is a completely basic popup, no options set.</p> </div> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
La parte che ci interessa è:
<a href="#popupBasic" data-rel="popup" data-role="button" data-inline="true" data-transition="pop">Basic Popup</a> <div data-role="popup" id="popupBasic"> <p>This is a completely basic popup, no options set.</p> </div>
Assegnamo al div l’attributo div data-role=”popup”
Possiamo assegnare ulteriori attributi:
data-dismissible=”false” il click al di fuori della finestra dipopup non la chiude come succede di default, costringe il navigatore ad interagire con la finestra
<div data-role="popup" id="popupUndismissible" class="ui-content" style="max-width:280px" data-dismissible="false">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-left">Close</a>
<p>I have the <code>data-dismissible</code> attribute set to <code>false</code>. I'm not closeable by clicking outside of me.</p>
</div>
href=”#positionWindow” -> posiziona al centro della finesta
href=”#positionOrigin” -> posiziona vicino all’origine
href=”#positionSelector” -> posiziona nel div dell’elemento con id=nome…
<a href="#positionWindow" data-role="button" data-inline="true" data-rel="popup" data-position-to="window">Position to window</a>
<a href="#positionOrigin" data-role="button" data-inline="true" data-rel="popup" data-position-to="origin">Position to origin</a>
<a href="#positionSelector" data-role="button" data-inline="true" data-rel="popup" data-position-to="#position-header">Position to #position-header</a>
<div data-role="popup" id="positionWindow" class="ui-content" data-theme="d">
<p>I am positioned to the window.</p>
</div>
<div data-role="popup" id="positionOrigin" class="ui-content" data-theme="d">
<p>I am positioned over the origin.</p>
</div>
<div data-role="popup" id="positionSelector" class="ui-content" data-theme="d">
<p>I am positioned over the header for this section via a selector. If the header isn't scrolled into view, collision detection will place the popup so it's in view.</p>
</div>
data-transition=”none” -> assegna una transizione
<a href="#transitionExample" data-transition="none" data-role="button" data-inline="true" data-rel="popup">No transition</a>
<a href="#transitionExample" data-transition="pop" data-role="button" data-inline="true" data-rel="popup">Pop</a>
<a href="#transitionExample" data-transition="fade" data-role="button" data-inline="true" data-rel="popup">Fade</a>
<a href="#transitionExample" data-transition="flip" data-role="button" data-inline="true" data-rel="popup">Flip</a>
<a href="#transitionExample" data-transition="turn" data-role="button" data-inline="true" data-rel="popup">Turn</a>
<a href="#transitionExample" data-transition="flow" data-role="button" data-inline="true" data-rel="popup">Flow</a>
<a href="#transitionExample" data-transition="slide" data-role="button" data-inline="true" data-rel="popup">Slide</a>
<a href="#transitionExample" data-transition="slidefade" data-role="button" data-inline="true" data-rel="popup">Slidefade</a>
<a href="#transitionExample" data-transition="slideup" data-role="button" data-inline="true" data-rel="popup">Slide up</a>
<a href="#transitionExample" data-transition="slidedown" data-role="button" data-inline="true" data-rel="popup">Slide down</a>
<div data-role="popup" id="transitionExample" class="ui-content" data-theme="d">
<p>I'm a simple popup.</p>
</div>
Temi
<a href="#theme" data-rel="popup" data-role="button" data-inline="true">Theme A</a>
<div id="theme" data-role="popup" data-theme="a" class="ui-content">
<p>I have <code>data-theme="a"</code> set on me</p>
</div>
<a href="#transparent" data-rel="popup" data-role="button" data-inline="true">Theme "none", no shadow</a>
<div id="transparent" data-role="popup" data-theme="none" data-shadow="false">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<img src="img/firefox-logo.png" class="popphoto" alt="firefox logo on a transparent popup">
</div>
<a href="#overlay" data-rel="popup" data-role="button" data-inline="true">Overlay theme A</a>
<div id="overlay" data-role="popup" data-overlay-theme="a" class="ui-content">
<p>I have a <code>data-overlay-theme="a"</code> set on me</p>
</div>
<a href="#both" data-rel="popup" data-role="button" data-inline="true">Theme E + overlay A</a>
<div id="both" data-role="popup" data-overlay-theme="a" data-theme="e" class="ui-content">
<p>I have <code>data-theme="e"</code> and <code>data-overlay-theme="a"</code> set on me</p>
</div>
Menu
<a href="#popupMenu" data-rel="popup" data-role="button" data-inline="true" data-transition="slideup" data-icon="gear" data-theme="e">Actions...</a>
<div data-role="popup" id="popupMenu" data-theme="d">
<ul data-role="listview" data-inset="true" style="min-width:210px;" data-theme="d">
<li data-role="divider" data-theme="e">Choose an action</li>
<li><a href="#">View details</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Disable</a></li>
<li><a href="#">Delete</a></li>
</ul>
</div>
E’ sufficiente annidare una lista all’interno del div div data-role=”popup”
Menu Accordion
<a href="#popupNested" data-rel="popup" data-role="button" data-inline="true" data-icon="bars" data-theme="b" data-transition="pop">Choose a creature...</a>
<div data-role="popup" id="popupNested" data-theme="none">
<div data-role="collapsible-set" data-theme="b" data-content-theme="c" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" style="margin:0; width:250px;">
<div data-role="collapsible" data-inset="false">
<h2>Farm animals</h2>
<ul data-role="listview">
<li><a href="#" data-rel="dialog">Chicken</a></li>
<li><a href="#" data-rel="dialog">Cow</a></li>
<li><a href="#" data-rel="dialog">Duck</a></li>
<li><a href="#" data-rel="dialog">Sheep</a></li>
</ul>
</div><!-- /collapsible -->
<div data-role="collapsible" data-inset="false">
<h2>Pets</h2>
<ul data-role="listview">
<li><a href="#" data-rel="dialog">Cat</a></li>
<li><a href="#" data-rel="dialog">Dog</a></li>
<li><a href="#" data-rel="dialog">Iguana</a></li>
<li><a href="#" data-rel="dialog">Mouse</a></li>
</ul>
</div><!-- /collapsible -->
<div data-role="collapsible" data-inset="false">
<h2>Ocean Creatures</h2>
<ul data-role="listview">
<li><a href="#" data-rel="dialog">Fish</a></li>
<li><a href="#" data-rel="dialog">Octopus</a></li>
<li><a href="#" data-rel="dialog">Shark</a></li>
<li><a href="#" data-rel="dialog">Starfish</a></li>
</ul>
</div><!-- /collapsible -->
<div data-role="collapsible" data-inset="false">
<h2>Wild Animals</h2>
<ul data-role="listview">
<li><a href="#" data-rel="dialog">Lion</a></li>
<li><a href="#" data-rel="dialog">Monkey</a></li>
<li><a href="#" data-rel="dialog">Tiger</a></li>
<li><a href="#" data-rel="dialog">Zebra</a></li>
</ul>
</div><!-- /collapsible -->
</div><!-- /collapsible set -->
Form:
<a href="#popupLogin" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="check" data-theme="a" data-transition="pop">Sign in</a>
<div data-role="popup" id="popupLogin" 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="pass" id="pw" value="" placeholder="password" data-theme="a">
<button type="submit" data-theme="b" data-icon="check">Sign in</button>
</div>
</form>
</div>
Very useful!