| @@ -0,0 +1,96 @@ | ||
| <?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest' || isset( $_GET['source'])) { ?> | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <!-- This is an example of an HTML document equipped to handle the startup of an application. It | ||
| contains a <head> section common to all documents of the application, and its body contains | ||
| the markup for all widgets that will be shared across pages. The body for each document of the | ||
| application contains such markup. --> | ||
| <head> | ||
|
|
||
| <!-- The various documents reachable from within your navigation system must all have the | ||
| necessary header information to be able to launch your application. Nevertheless, the | ||
| server only needs to send this header information with the first request by the user. On | ||
| Ajax requests by the application, this information can be discarded server-side in order | ||
| to save bandwidth and to improve the time it takes to display a page. --> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>Ajax optimized persistent toolbars - jQuery Mobile Demos</title> | ||
| <link rel="shortcut icon" href="../favicon.ico"> | ||
| <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700"> | ||
| <link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.5.0-rc1.min.css"> | ||
| <link rel="stylesheet" href="../_assets/css/jqm-demos.css"> | ||
| <script src="../js/jquery.js"></script> | ||
| <script src="../_assets/js/index.js"></script> | ||
| <script src="../js/jquery.mobile-1.5.0-rc1.min.js"></script> | ||
|
|
||
| <!-- This script contains the code that is shared between all the documents of your | ||
| application. It is responsible for enhancing the shared widgets during your application's | ||
| startup. --> | ||
| <script id="shared-widget-init" src="shared-widget-init.js"></script> | ||
| </head> | ||
| <body> | ||
| <!-- The following panel is shared across all pages of the application, and must therefore be | ||
| copied to all the documents containing the application's pages. It will only be loaded | ||
| once with the first page. On subsequent page loads the existing widget will be reused. --> | ||
| <div id="shared-panel" data-role="panel" data-theme="a" data-position="right"> | ||
| <ul id="nav-menu-links" data-role="listview"> | ||
| <li data-icon="lock"><a href="#nav-menu" data-rel="popup">Login</a></li> | ||
| <li><a href="info.html" data-prefetch="true" data-transition="none">Info</a></li> | ||
| <li><a href="page-b.html" data-prefetch="true" data-transition="flip">Friends</a></li> | ||
| <li><a href="page-c.html" data-prefetch="true" data-transition="turn">Albums</a></li> | ||
| <li><a href="page-d.html" data-prefetch="true" data-transition="slide">Emails</a></li> | ||
| </ul> | ||
| </div> | ||
| <div id="shared-header" data-role="toolbar" data-type="header" data-position="fixed" data-theme="a"> | ||
| <!-- Shared header markup must be added to all documents of the application to ensure any | ||
| of them can serve as the start page. The server can be instructed to omit sending | ||
| this portion of the data whenever the request for the document is made via Ajax. --> | ||
| <a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-caret-l">Back</a> | ||
| <a href="#shared-panel" data-rel="panel" class="ui-btn ui-btn-right ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-right ui-icon-navigation">Navigation</a> | ||
| <div data-role="popup" id="nav-menu" data-theme="a"> | ||
| <form class="ui-content"> | ||
| <label for="login-field">Login:</label> | ||
| <input id="login-field" name="login"> | ||
| <label for="password-field">Password:</label> | ||
| <input type="password" id="password-field" name="password"> | ||
| </form> | ||
| </div> | ||
| <h1>Fixed external header</h1> | ||
| </div><!-- /header --> | ||
| <?php } ?> | ||
| <!-- This is the actual page. It will always be sent to the client. --> | ||
| <div data-role="page" class="jqm-demos"> | ||
|
|
||
| <div data-role="panel" id="local-panel" data-position="right"> | ||
| <p>This is an example of a panel that is not shared across pages.</p> | ||
| </div> | ||
|
|
||
| <div class="ui-content jqm-content jqm-fullwidth" role="main"> | ||
|
|
||
| <h1>External Widgets Demo</h1> | ||
| <p>This demo illustrates the use of widgets outside the page in an application consisting of multiple documents linked to each other via Ajax.</p> | ||
| <p>As you navigate from page to page using the navbar below or the popup opening via the button at the top right, the various pages of the demo are retrieved and displayed via Ajax, but the navigational elements which are outside the page, such as the header, the footer, the login panel, and the popup remain in the DOM.</p> | ||
| <p>There is a <a href="#local-panel">second panel</a> on this page which is not shared across pages.</p> | ||
|
|
||
| </div><!-- /content --> | ||
|
|
||
| </div><!-- /page --> | ||
|
|
||
| <?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest' || isset( $_GET['source'])) { ?> | ||
| <div id="shared-navbar" data-role="toolbar" data-type="footer" data-position="fixed" data-theme="a"> | ||
| <!-- Shared navbar markup must be added to all documents of the application to ensure any | ||
| of them can serve as the start page. The server can be instructed to omit sending | ||
| this portion of the data whenever the request for the document is made via Ajax. --> | ||
| <div data-role="navbar"> | ||
| <ul> | ||
| <li><a href="info.html" data-prefetch="true" data-transition="none">Info</a></li> | ||
| <li><a href="page-b.html" data-prefetch="true" data-transition="flip">Friends</a></li> | ||
| <li><a href="page-c.html" data-prefetch="true" data-transition="turn">Albums</a></li> | ||
| <li><a href="page-d.html" data-prefetch="true" data-transition="slide">Emails</a></li> | ||
| </ul> | ||
| </div><!-- /navbar --> | ||
| </div><!-- /footer --> | ||
|
|
||
| </body> | ||
| </html> | ||
| <?php } ?> |
| @@ -0,0 +1,126 @@ | ||
| <?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest' || isset( $_GET['source'])) { ?> | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <!-- This is an example of an HTML document equipped to handle the startup of an application. It | ||
| contains a <head> section common to all documents of the application, and its body contains | ||
| the markup for all widgets that will be shared across pages. The body for each document of the | ||
| application contains such markup. --> | ||
| <head> | ||
|
|
||
| <!-- The various documents reachable from within your navigation system must all have the | ||
| necessary header information to be able to launch your application. Nevertheless, the | ||
| server only needs to send this header information with the first request by the user. On | ||
| Ajax requests by the application, this information can be discarded server-side in order | ||
| to save bandwidth and to improve the time it takes to display a page. --> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>Ajax optimized persistent toolbars - jQuery Mobile Demos</title> | ||
| <link rel="shortcut icon" href="../favicon.ico"> | ||
| <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700"> | ||
| <link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.5.0-rc1.min.css"> | ||
| <link rel="stylesheet" href="../_assets/css/jqm-demos.css"> | ||
| <script src="../js/jquery.js"></script> | ||
| <script src="../_assets/js/index.js"></script> | ||
| <script src="../js/jquery.mobile-1.5.0-rc1.min.js"></script> | ||
|
|
||
| <!-- This script contains the code that is shared between all the documents of your | ||
| application. It is responsible for enhancing the shared widgets during your application's | ||
| startup. --> | ||
| <script id="shared-widget-init" src="shared-widget-init.js"></script> | ||
| </head> | ||
| <body> | ||
| <!-- The following panel is shared across all pages of the application, and must therefore be | ||
| copied to all the documents containing the application's pages. It will only be loaded | ||
| once with the first page. On subsequent page loads the existing widget will be reused. --> | ||
| <div id="shared-panel" data-role="panel" data-theme="a" data-position="right"> | ||
| <ul id="nav-menu-links" data-role="listview"> | ||
| <li data-icon="lock"><a href="#nav-menu" data-rel="popup">Login</a></li> | ||
| <li><a href="info.html" data-prefetch="true" data-transition="none">Info</a></li> | ||
| <li><a href="page-b.html" data-prefetch="true" data-transition="flip">Friends</a></li> | ||
| <li><a href="page-c.html" data-prefetch="true" data-transition="turn">Albums</a></li> | ||
| <li><a href="page-d.html" data-prefetch="true" data-transition="slide">Emails</a></li> | ||
| </ul> | ||
| </div> | ||
| <div id="shared-header" data-role="toolbar" data-type="header" data-position="fixed" data-theme="a"> | ||
| <!-- Shared header markup must be added to all documents of the application to ensure any | ||
| of them can serve as the start page. The server can be instructed to omit sending | ||
| this portion of the data whenever the request for the document is made via Ajax. --> | ||
| <a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-caret-l">Back</a> | ||
| <a href="#shared-panel" data-rel="panel" class="ui-btn ui-btn-right ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-right ui-icon-navigation">Navigation</a> | ||
| <div data-role="popup" id="nav-menu" data-theme="a"> | ||
| <form class="ui-content"> | ||
| <label for="login-field">Login:</label> | ||
| <input id="login-field" name="login"> | ||
| <label for="password-field">Password:</label> | ||
| <input type="password" id="password-field" name="password"> | ||
| </form> | ||
| </div> | ||
| <h1>Fixed external header</h1> | ||
| </div><!-- /header --> | ||
| <?php } ?> | ||
| <!-- This is the actual page. It will always be sent to the client. --> | ||
| <div data-role="page"> | ||
|
|
||
| <div class="ui-content" role="main"> | ||
|
|
||
| <ul data-role="listview" data-theme="a" data-dividertheme="b" data-filter="true" data-filter-theme="a" data-filter-placeholder="Search friends..."> | ||
| <li data-role="list-divider">A</li> | ||
| <li><a href="#">Adam Kinkaid</a></li> | ||
| <li><a href="#">Alex Wickerham</a></li> | ||
| <li><a href="#">Avery Johnson</a></li> | ||
| <li data-role="list-divider">B</li> | ||
| <li><a href="#">Bob Cabot</a></li> | ||
| <li data-role="list-divider">C</li> | ||
| <li><a href="#">Caleb Booth</a></li> | ||
| <li><a href="#">Christopher Adams</a></li> | ||
| <li><a href="#">Culver James</a></li> | ||
| <li data-role="list-divider">D</li> | ||
| <li><a href="#">David Walsh</a></li> | ||
| <li><a href="#">Drake Alfred</a></li> | ||
| <li data-role="list-divider">E</li> | ||
| <li><a href="#">Elizabeth Bacon</a></li> | ||
| <li><a href="#">Emery Parker</a></li> | ||
| <li><a href="#">Enid Voldon</a></li> | ||
| <li data-role="list-divider">F</li> | ||
| <li><a href="#">Francis Wall</a></li> | ||
| <li data-role="list-divider">G</li> | ||
| <li><a href="#">Graham Smith</a></li> | ||
| <li><a href="#">Greta Peete</a></li> | ||
| <li data-role="list-divider">H</li> | ||
| <li><a href="#">Harvey Walls</a></li> | ||
| <li data-role="list-divider">M</li> | ||
| <li><a href="#">Mike Farnsworth</a></li> | ||
| <li><a href="#">Murray Vanderbuilt</a></li> | ||
| <li data-role="list-divider">N</li> | ||
| <li><a href="#">Nathan Williams</a></li> | ||
| <li data-role="list-divider">P</li> | ||
| <li><a href="#">Paul Baker</a></li> | ||
| <li><a href="#">Pete Mason</a></li> | ||
| <li data-role="list-divider">R</li> | ||
| <li><a href="#">Rod Tarker</a></li> | ||
| <li data-role="list-divider">S</li> | ||
| <li><a href="#">Sawyer Wakefield</a></li> | ||
| </ul> | ||
|
|
||
| </div><!-- /content --> | ||
|
|
||
| </div><!-- /page --> | ||
|
|
||
| <?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest' || isset( $_GET['source'])) { ?> | ||
| <div id="shared-navbar" data-role="toolbar" data-type="footer" data-position="fixed" data-theme="a"> | ||
| <!-- Shared navbar markup must be added to all documents of the application to ensure any | ||
| of them can serve as the start page. The server can be instructed to omit sending | ||
| this portion of the data whenever the request for the document is made via Ajax. --> | ||
| <div data-role="navbar"> | ||
| <ul> | ||
| <li><a href="info.html" data-prefetch="true" data-transition="none">Info</a></li> | ||
| <li><a href="page-b.html" data-prefetch="true" data-transition="flip">Friends</a></li> | ||
| <li><a href="page-c.html" data-prefetch="true" data-transition="turn">Albums</a></li> | ||
| <li><a href="page-d.html" data-prefetch="true" data-transition="slide">Emails</a></li> | ||
| </ul> | ||
| </div><!-- /navbar --> | ||
| </div><!-- /footer --> | ||
|
|
||
| </body> | ||
| </html> | ||
| <?php } ?> |
| @@ -0,0 +1,128 @@ | ||
| <?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') { ?> | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>Ajax optimized persistent toolbars - jQuery Mobile Demos</title> | ||
| <link rel="shortcut icon" href="../favicon.ico"> | ||
| <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700"> | ||
| <link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.5.0-rc1.min.css"> | ||
| <link rel="stylesheet" href="../_assets/css/jqm-demos.css"> | ||
| <script src="../js/jquery.js"></script> | ||
| <script src="../_assets/js/index.js"></script> | ||
| <script src="../js/jquery.mobile-1.5.0-rc1.min.js"></script> | ||
| <script> | ||
| $(function(){ | ||
| $("[data-role='navbar']").navbar(); | ||
| $("[data-role='header'], [data-role='footer']").toolbar(); | ||
| }); | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <div data-role="toolbar" data-type="header" data-position="fixed" data-theme="a"> | ||
| <a href="../toolbar/" data-rel="back" class="ui-button ui-toolbar-header-button-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-button-icon-only">Back <span class="ui-icon ui-icon-caret-l"></span></a> | ||
| <h1>Fixed external header</h1> | ||
| </div><!-- /header --> | ||
| <?php } ?> | ||
|
|
||
| <div data-role="page"> | ||
|
|
||
| <div class="ui-content" role="main"> | ||
|
|
||
| <ul data-role="listview" data-split-icon="gear" data-split-theme="a" data-inset="false"> | ||
| <li><a href="#"> | ||
| <img src="../_assets/img/album-bb.jpg"> | ||
| <h2>Broken Bells</h2> | ||
| <p>Broken Bells</p></a> | ||
| <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a> | ||
| </li> | ||
| <li><a href="#"> | ||
| <img src="../_assets/img/album-hc.jpg"> | ||
| <h2>Warning</h2> | ||
| <p>Hot Chip</p></a> | ||
| <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a> | ||
| </li> | ||
| <li><a href="#"> | ||
| <img src="../_assets/img/album-p.jpg"> | ||
| <h2>Wolfgang Amadeus Phoenix</h2> | ||
| <p>Phoenix</p></a> | ||
| <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a> | ||
| </li> | ||
| <li><a href="#"> | ||
| <img src="../_assets/img/album-ok.jpg"> | ||
| <h3>Of The Blue Colour Of The Sky</h3> | ||
| <p>Ok Go</p> | ||
| <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a> | ||
| </a></li> | ||
| <li><a href="#"> | ||
| <img src="../_assets/img/album-ws.jpg"> | ||
| <h3>Elephant</h3> | ||
| <p>The White Stripes</p> | ||
| <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a> | ||
| </a></li> | ||
| <li><a href="#"> | ||
| <img src="../_assets/img/album-rh.jpg"> | ||
| <h3>Kid A</h3> | ||
| <p>Radiohead</p> | ||
| <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a> | ||
| </a></li> | ||
| <li><a href="#"> | ||
| <img src="../_assets/img/album-xx.jpg"> | ||
| <h3>XX</h3> | ||
| <p>XX</p> | ||
| <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a> | ||
| </a></li> | ||
| <li><a href="#"> | ||
| <img src="../_assets/img/album-mg.jpg"> | ||
| <h3>Congratulations</h3> | ||
| <p>MGMT</p> | ||
| <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a> | ||
| </a></li> | ||
| <li><a href="#"> | ||
| <img src="../_assets/img/album-ag.jpg"> | ||
| <h3>Ashes Grammar</h3> | ||
| <p>A Sunny Day in Glasgow</p> | ||
| <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a> | ||
| </a></li> | ||
|
|
||
| <li><a href="index.html"> | ||
| <img src="../_assets/img/album-k.jpg"> | ||
| <h3>Hot Fuss</h3> | ||
| <p>Killers</p> | ||
| <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a> | ||
| </a></li> | ||
| <li><a href="#"> | ||
| <img src="../_assets/img/album-af.jpg"> | ||
| <h3>The Suburbs</h3> | ||
| <p>Arcade Fire</p> | ||
| <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a> | ||
| </a></li> | ||
| </ul> | ||
|
|
||
| <div data-role="popup" id="purchase" data-overlay-theme="b" class="ui-content" style="max-width:340px; padding-bottom:2em;"> | ||
| <h3>Purchase Album?</h3> | ||
| <p>Your download will begin immediately on your mobile device when you purchase.</p> | ||
| <a href="#" class="ui-button ui-button-b ui-button-inline ui-mini ui-corner-all ui-shadow" data-rel="back">Buy: $10.99 <span class="ui-icon ui-icon-check"></span></a> | ||
| <a href="#" class="ui-button ui-button-inline ui-mini ui-corner-all ui-shadow" data-rel="back">Cancel</a> | ||
| </div> | ||
|
|
||
| </div><!-- /content --> | ||
|
|
||
| </div><!-- /page --> | ||
|
|
||
| <?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') { ?> | ||
| <div data-role="toolbar" data-type="footer" data-position="fixed" data-theme="a"> | ||
| <div data-role="navbar"> | ||
| <ul> | ||
| <li><a href="index.html" data-prefetch="true" data-transition="none">Info</a></li> | ||
| <li><a href="page-b.html" data-prefetch="true" data-transition="flip">Friends</a></li> | ||
| <li><a href="page-c.html" data-prefetch="true" data-transition="turn">Albums</a></li> | ||
| <li><a href="page-d.html" data-prefetch="true" data-transition="slide">Emails</a></li> | ||
| </ul> | ||
| </div><!-- /navbar --> | ||
| </div><!-- /footer --> | ||
|
|
||
| </body> | ||
| </html> | ||
| <?php } ?> |
| @@ -0,0 +1,106 @@ | ||
| <?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') { ?> | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>Ajax optimized persistent toolbars - jQuery Mobile Demos</title> | ||
| <link rel="shortcut icon" href="../favicon.ico"> | ||
| <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700"> | ||
| <link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.5.0-rc1.min.css"> | ||
| <link rel="stylesheet" href="../_assets/css/jqm-demos.css"> | ||
| <script src="../js/jquery.js"></script> | ||
| <script src="../_assets/js/index.js"></script> | ||
| <script src="../js/jquery.mobile-1.5.0-rc1.min.js"></script> | ||
| <script> | ||
| $(function(){ | ||
| $("[data-role='navbar']").navbar(); | ||
| $("[data-role='header'], [data-role='footer']").toolbar(); | ||
| }); | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <div data-role="toolbar" data-type="header" data-position="fixed" data-theme="a"> | ||
| <a href="../toolbar/" data-rel="back" class="ui-button ui-toolbar-header-button-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-button-icon-only">Back <span class="ui-icon ui-icon-caret-l"></span></a> | ||
| <h1>Fixed external header</h1> | ||
| </div><!-- /header --> | ||
| <?php } ?> | ||
|
|
||
| <div data-role="page"> | ||
|
|
||
| <div class="ui-content" role="main"> | ||
|
|
||
| <ul data-role="listview" data-theme="a" data-dividertheme="b" data-filter="true" data-filter-theme="a" data-filter-placeholder="Search messages..."> | ||
| <li data-role="list-divider">Friday, October 8, 2010 <span class="ui-listview-item-count-bubble">2</span></li> | ||
| <li><a href="#"> | ||
| <h3>Stephen Weber</h3> | ||
| <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p> | ||
| <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p> | ||
| <p class="ui-listview-item-aside"><strong>6:24</strong>PM</p> | ||
| </a></li> | ||
| <li><a href="#"> | ||
| <h3>jQuery Team</h3> | ||
| <p><strong>Boston Conference Planning</strong></p> | ||
| <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p> | ||
| <p class="ui-listview-item-aside"><strong>9:18</strong>AM</p> | ||
| </a></li> | ||
| <li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-listview-item-count-bubble">1</span></li> | ||
| <li><a href="#"> | ||
| <h3>Avery Walker</h3> | ||
| <p><strong>Re: Dinner Tonight</strong></p> | ||
| <p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p> | ||
| <p class="ui-listview-item-aside"><strong>4:48</strong>PM</p> | ||
| </a></li> | ||
| <li data-role="list-divider">Wednesday, October 6, 2010 <span class="ui-listview-item-count-bubble">3</span></li> | ||
| <li><a href="#"> | ||
| <h3>Amazon.com</h3> | ||
| <p><strong>4-for-3 Books for Kids</strong></p> | ||
| <p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p> | ||
| <p class="ui-listview-item-aside"><strong>12:47</strong>PM</p> | ||
| </a></li> | ||
| <li><a href="#"> | ||
| <h3>Mike Taylor</h3> | ||
| <p><strong>Re: This weekend in Maine</strong></p> | ||
| <p>Hey little buddy, sorry but I can't make it up to vacationland this weekend. Maybe next weekend?</p> | ||
| <p class="ui-listview-item-aside"><strong>6:24</strong>AM</p> | ||
| </a></li> | ||
| <li><a href="#"> | ||
| <h3>Redfin</h3> | ||
| <p><strong>Redfin listing updates for today</strong></p> | ||
| <p>There are 3 updates for the home on your watchlist: 1 updated MLS listing and 2 homes under contract.</p> | ||
| <p class="ui-listview-item-aside"><strong>5:52</strong>AM</p> | ||
| </a></li> | ||
| <li data-role="list-divider">Tuesday, October 5, 2010 <span class="ui-listview-item-count-bubble">3</span></li> | ||
| <li><a href="index.html"> | ||
| <h3>Angela Smith</h3> | ||
| <p><strong>Link Request</strong></p> | ||
| <p>My name is Angela Smith, SEO Consultant. I've greatly enjoyed looking through your site and I was wondering if you'd be interested in providing a link</p> | ||
| <p class="ui-listview-item-aside"><strong>6:24</strong>AM</p> | ||
| </a></li> | ||
| <li><a href="index.html"> | ||
| <h3>Mike Taylor</h3> | ||
| <p><strong>This weekend in Maine</strong></p> | ||
| <p>Sounds good, let me check into our plans.</p> | ||
| <p class="ui-listview-item-aside"><strong>6:24</strong>AM</p> | ||
| </a></li> | ||
| </ul> | ||
|
|
||
| </div><!-- /content --> | ||
|
|
||
| </div><!-- /page --> | ||
|
|
||
| <?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') { ?> | ||
| <div data-role="toolbar" data-type="footer" data-position="fixed" data-theme="a"> | ||
| <div data-role="navbar"> | ||
| <ul> | ||
| <li><a href="index.html" data-prefetch="true" data-transition="none">Info</a></li> | ||
| <li><a href="page-b.html" data-prefetch="true" data-transition="flip">Friends</a></li> | ||
| <li><a href="page-c.html" data-prefetch="true" data-transition="turn">Albums</a></li> | ||
| <li><a href="page-d.html" data-prefetch="true" data-transition="slide">Emails</a></li> | ||
| </ul> | ||
| </div><!-- /navbar --> | ||
| </div><!-- /footer --> | ||
|
|
||
| </body> | ||
| </html> | ||
| <?php } ?> |
| @@ -0,0 +1,27 @@ | ||
| /* You can place the code for initializing widgets that are shared by the various pages of your | ||
| application and which reside outside your application's jQuery Mobile pages into an external | ||
| script which you can then reference from all your application's documents. This way, no matter | ||
| which document ends up being your application's startup page, the shared widgets will always be | ||
| functional and correctly enhanced. */ | ||
| $( function() { | ||
| function updateActivePage( href ) { | ||
| $( "a.ui-btn" ) | ||
| .removeClass( "ui-btn-active" ) | ||
| .filter( "[href='" + href + "']" ) | ||
| .addClass( "ui-btn-active" ); | ||
| } | ||
|
|
||
| $( "[data-role='navbar']" ).navbar(); | ||
| $( "[data-role='header'], [data-role='footer']" ).toolbar(); | ||
| $( "#nav-menu" ).popup(); | ||
| $( "#nav-menu-links" ).listview(); | ||
| $( "#shared-panel" ).panel(); | ||
|
|
||
| /* Since the navbar we use is outside the page, it does not update itself to indicate the currently | ||
| active page. We manually update the navbar whenever the page changes. */ | ||
| $( document ).on( "pagecontainerchange", function( event, data ) { | ||
| updateActivePage( $.mobile.path.parseUrl( data.toPage.jqmData( "url" ) ).filename ); | ||
| }); | ||
|
|
||
| updateActivePage( $.mobile.path.parseLocation().filename ); | ||
| }); |
| @@ -0,0 +1,159 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>Listview Autodivider Linkbar - jQuery Mobile Demos</title> | ||
| <link rel="shortcut icon" href="../favicon.ico"> | ||
| <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700"> | ||
| <link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.5.0-rc1.min.css"> | ||
| <link rel="stylesheet" href="../_assets/css/jqm-demos.css"> | ||
| <link rel="stylesheet" href="autodividers-linkbar.css"> | ||
| <script src="../js/jquery.js"></script> | ||
| <script src="../_assets/js/index.js"></script> | ||
| <script src="../js/jquery.mobile-1.5.0-rc1.min.js"></script> | ||
| <script src="autodividers-linkbar.js"></script> | ||
| </head> | ||
| <body> | ||
| <div data-role="page" id="demo-page"> | ||
|
|
||
| <div data-role="toolbar" data-type="header"> | ||
| <h1>Listview Autodivider Linkbar</h1> | ||
| <a href="../" data-rel="back" data-icon="arrow-l" data-iconpos="notext" data-ajax="false">Back</a> | ||
| </div><!-- /header --> | ||
|
|
||
| <div role="main" class="ui-content"> | ||
|
|
||
| <div id="sorter"> | ||
|
|
||
| <ul data-role="listview"> | ||
| <li><span>A</span></li> | ||
| <li><span>B</span></li> | ||
| <li><span>C</span></li> | ||
| <li><span>D</span></li> | ||
| <li><span>E</span></li> | ||
| <li><span>F</span></li> | ||
| <li><span>G</span></li> | ||
| <li><span>H</span></li> | ||
| <li><span>I</span></li> | ||
| <li><span>J</span></li> | ||
| <li><span>K</span></li> | ||
| <li><span>L</span></li> | ||
| <li><span>M</span></li> | ||
| <li><span>N</span></li> | ||
| <li><span>O</span></li> | ||
| <li><span>P</span></li> | ||
| <li><span>Q</span></li> | ||
| <li><span>R</span></li> | ||
| <li><span>S</span></li> | ||
| <li><span>T</span></li> | ||
| <li><span>U</span></li> | ||
| <li><span>V</span></li> | ||
| <li><span>W</span></li> | ||
| <li><span>X</span></li> | ||
| <li><span>Y</span></li> | ||
| <li><span>Z</span></li> | ||
| </ul> | ||
| </div><!-- /sorter --> | ||
|
|
||
| <ul data-role="listview" data-autodividers="true" id="sortedList"> | ||
| <li><a href="#">Aaron</a></li> | ||
| <li><a href="#">Adam</a></li> | ||
| <li><a href="#">Alexander</a></li> | ||
| <li><a href="#">Alice</a></li> | ||
| <li><a href="#">Andrew</a></li> | ||
| <li><a href="#">Anna</a></li> | ||
| <li><a href="#">Anthony</a></li> | ||
| <li><a href="#">Audrey</a></li> | ||
| <li><a href="#">Benjamin</a></li> | ||
| <li><a href="#">Brandon</a></li> | ||
| <li><a href="#">Brody</a></li> | ||
| <li><a href="#">Caleb</a></li> | ||
| <li><a href="#">Cameron</a></li> | ||
| <li><a href="#">Charlotte</a></li> | ||
| <li><a href="#">Chloe</a></li> | ||
| <li><a href="#">Christopher</a></li> | ||
| <li><a href="#">Claire</a></li> | ||
| <li><a href="#">Colin</a></li> | ||
| <li><a href="#">Damien</a></li> | ||
| <li><a href="#">Daniel</a></li> | ||
| <li><a href="#">David</a></li> | ||
| <li><a href="#">Dominic</a></li> | ||
| <li><a href="#">Dylan</a></li> | ||
| <li><a href="#">Edward</a></li> | ||
| <li><a href="#">Elizabeth</a></li> | ||
| <li><a href="#">Elliot</a></li> | ||
| <li><a href="#">Emily</a></li> | ||
| <li><a href="#">Emma</a></li> | ||
| <li><a href="#">Ethan</a></li> | ||
| <li><a href="#">Eva</a></li> | ||
| <li><a href="#">Finn</a></li> | ||
| <li><a href="#">Gabriel</a></li> | ||
| <li><a href="#">Gavin</a></li> | ||
| <li><a href="#">Grace</a></li> | ||
| <li><a href="#">Hannah</a></li> | ||
| <li><a href="#">Harry</a></li> | ||
| <li><a href="#">Henry</a></li> | ||
| <li><a href="#">Ian</a></li> | ||
| <li><a href="#">Isaac</a></li> | ||
| <li><a href="#">Isabel</a></li> | ||
| <li><a href="#">Jack</a></li> | ||
| <li><a href="#">Jackson</a></li> | ||
| <li><a href="#">Jacob</a></li> | ||
| <li><a href="#">James</a></li> | ||
| <li><a href="#">Jason</a></li> | ||
| <li><a href="#">John</a></li> | ||
| <li><a href="#">Jonah</a></li> | ||
| <li><a href="#">Jonathan</a></li> | ||
| <li><a href="#">Julia</a></li> | ||
| <li><a href="#">Kylie</a></li> | ||
| <li><a href="#">Lauren</a></li> | ||
| <li><a href="#">Leah</a></li> | ||
| <li><a href="#">Liam</a></li> | ||
| <li><a href="#">Lillian</a></li> | ||
| <li><a href="#">Lucy</a></li> | ||
| <li><a href="#">Luke</a></li> | ||
| <li><a href="#">Lydia</a></li> | ||
| <li><a href="#">Madeline</a></li> | ||
| <li><a href="#">Mason</a></li> | ||
| <li><a href="#">Matthew</a></li> | ||
| <li><a href="#">Megan</a></li> | ||
| <li><a href="#">Michael</a></li> | ||
| <li><a href="#">Natalie</a></li> | ||
| <li><a href="#">Nathan</a></li> | ||
| <li><a href="#">Nicholas</a></li> | ||
| <li><a href="#">Noah</a></li> | ||
| <li><a href="#">Norah</a></li> | ||
| <li><a href="#">Oliver</a></li> | ||
| <li><a href="#">Olivia</a></li> | ||
| <li><a href="#">Owen</a></li> | ||
| <li><a href="#">Paige</a></li> | ||
| <li><a href="#">Ruby</a></li> | ||
| <li><a href="#">Ryan</a></li> | ||
| <li><a href="#">Samuel</a></li> | ||
| <li><a href="#">Sarah</a></li> | ||
| <li><a href="#">Scarlett</a></li> | ||
| <li><a href="#">Sebastian</a></li> | ||
| <li><a href="#">Seth</a></li> | ||
| <li><a href="#">Sophie</a></li> | ||
| <li><a href="#">Thomas</a></li> | ||
| <li><a href="#">Tristan</a></li> | ||
| <li><a href="#">Tyler</a></li> | ||
| <li><a href="#">Violet</a></li> | ||
| <li><a href="#">Vivienne</a></li> | ||
| <li><a href="#">William</a></li> | ||
| <li><a href="#">Xavier</a></li> | ||
| <li><a href="#">Zachary</a></li> | ||
| <li><a href="#">Zoe</a></li> | ||
| </ul><!-- /listview --> | ||
|
|
||
| </div><!-- /content --> | ||
|
|
||
| <div data-role="toolbar" data-type="footer"> | ||
| <h4>Footer</h4> | ||
| </div><!-- /footer --> | ||
|
|
||
| </div><!-- /page --> | ||
|
|
||
| </body> | ||
| </html> |
| @@ -0,0 +1,25 @@ | ||
| #sorter li { | ||
| height: 3.8%; | ||
| padding: 0; | ||
| font-size: 8px; | ||
| padding-left: 5px; | ||
| line-height: 1.8em; | ||
| text-align: left; | ||
| } | ||
| #sorter li span { | ||
| margin-top: 8%; | ||
| display: block; | ||
| } | ||
| #sorter{ | ||
| position: fixed; | ||
| top: 60px; | ||
| right: 0; | ||
| width: 20px; | ||
| z-index: 1; | ||
| } | ||
| #sorter ul{ | ||
| height: 100%; | ||
| } | ||
| #sortedList{ | ||
| padding-right: 35px; | ||
| } |
| @@ -0,0 +1,69 @@ | ||
| $.mobile.document.on( "pagecreate", "#demo-page", function(){ | ||
| var head = $( ".ui-page-active [data-role='header']" ); | ||
|
|
||
| $.mobile.document.on( "click", "#sorter li", function() { | ||
| var top, | ||
| letter = $( this ).text(), | ||
| divider = $( "#sortedList" ) | ||
| .find( "li.ui-listview-item-divider:contains(" + letter + ")" ); | ||
|
|
||
| if ( divider.length > 0 ) { | ||
| top = divider.offset().top; | ||
| $.mobile.silentScroll( top ); | ||
| } else { | ||
| return false; | ||
| } | ||
| }); | ||
| $( "#sorter li" ).hover(function() { | ||
| $( this ).addClass( "ui-button" ).removeClass( "ui-listview-item-static" ); | ||
| }, function() { | ||
| $( this ).removeClass( "ui-button" ).addClass( "ui-listview-item-static" ); | ||
| }); | ||
| }); | ||
| $( function(){ | ||
| $.mobile.window.on( "scroll", function( e ) { | ||
| var headTop = $(window).scrollTop(), | ||
| foot = $( ".ui-page-active .ui-toolbar-header" ), | ||
| head = $( ".ui-page-active .ui-toolbar-footer" ), | ||
| headerheight = head.outerHeight(); | ||
|
|
||
| if( headTop < headerheight && headTop > 0 ) { | ||
| $( "#sorter" ).css({ | ||
| "top": headerheight + 15 - headTop, | ||
| "height": window.innerHeight - head[ 0 ].offsetHeight + window.pageYOffset - 10 | ||
| }); | ||
| $("#sorter li").height( "3.7%" ); | ||
| } else if ( headTop >= headerheight && headTop > 0 && parseInt( headTop + | ||
| $.mobile.window.height( )) < parseInt( foot.offset().top ) ) { | ||
|
|
||
| $( "#sorter" ).css({ | ||
| "top": "15px", | ||
| "height": window.innerHeight - 8 | ||
| }); | ||
| $("#sorter li").height( "3.7%" ); | ||
| } else if ( parseInt( headTop + window.innerHeight ) >= parseInt( foot.offset().top ) && | ||
| parseInt( headTop + window.innerHeight ) <= parseInt( foot.offset().top ) + | ||
| foot.height() ) { | ||
|
|
||
| $( "#sorter" ).css({ | ||
| "top": "15px", | ||
| "height": window.innerHeight - ( parseInt( headTop + window.innerHeight ) - | ||
| parseInt( foot.offset().top ) + 8 ) | ||
| }); | ||
| } else if( parseInt( headTop + window.innerHeight ) >= parseInt( foot.offset().top ) ) { | ||
| $( "#sorter" ).css({ | ||
| "top": "15px" | ||
| }); | ||
| } else { | ||
| $( "#sorter" ).css( "top", headerheight + 15 ); | ||
| } | ||
| }); | ||
| }); | ||
| $.mobile.window.on( "throttledresize", function() { | ||
| $( "#sorter" ).height( window.innerHeight - headerheight - 20 ).css( "top", headerheight + 18 ); | ||
| }); | ||
| $.mobile.document.on( "pageshow", "#demo-page", function() { | ||
| var headerheight = $( ".ui-page-active [data-role='header']" ).outerHeight(); | ||
|
|
||
| $( "#sorter" ).height( window.innerHeight - headerheight - 20 ).css( "top", headerheight + 18 ); | ||
| }); |
| @@ -0,0 +1,137 @@ | ||
| /* A bit custom styling */ | ||
| .my-page .ui-listview li .ui-button p { | ||
| color: #c0c0c0; | ||
| } | ||
| .my-page .ui-listview li .ui-button .ui-listview-item-aside { | ||
| color: #eee; | ||
| } | ||
|
|
||
| /* First breakpoint is 48em (768px). 3 column layout. Tiles 250x250 pixels incl. margin at the breakpoint. */ | ||
| @media ( min-width: 48em ) { | ||
| .my-page .ui-content { | ||
| padding: .5625em; /* 9px */ | ||
| } | ||
| .my-page .ui-listview li { | ||
| float: left; | ||
| width: 30.9333%; /* 33.3333% incl. 2 x 1.2% margin */ | ||
| height: 14.5em; /* 232p */ | ||
| margin: .5625em 1.2%; | ||
| } | ||
| .my-page .ui-listview li > .ui-button { | ||
| -webkit-box-sizing: border-box; /* include padding and border in height so we can set it to 100% */ | ||
| -moz-box-sizing: border-box; | ||
| box-sizing: border-box; | ||
| height: 100%; | ||
| } | ||
| .my-page .ui-listview li.ui-listview-item-has-thumbnail .ui-listview-item-thumbnail { | ||
| height: auto; /* To keep aspect ratio. */ | ||
| max-width: 100%; | ||
| max-height: none; | ||
| } | ||
| /* Make all list items and anchors inherit the border-radius from the UL. */ | ||
| .my-page .ui-listview li, | ||
| .my-page .ui-listview li .ui-button, | ||
| .my-page .ui-listview .ui-listview-item-thumbnail { | ||
| -webkit-border-radius: inherit; | ||
| border-radius: inherit; | ||
| } | ||
| /* Hide the icon */ | ||
| .my-page .ui-listview .ui-icon-end:after { | ||
| display: none; | ||
| } | ||
| /* Make text wrap. */ | ||
| .my-page .ui-listview h2, | ||
| .my-page .ui-listview p { | ||
| white-space: normal; | ||
| overflow: visible; | ||
| position: absolute; | ||
| left: 0; | ||
| right: 0; | ||
| } | ||
| /* Text position */ | ||
| .my-page .ui-listview h2 { | ||
| font-size: 1.25em; | ||
| margin: 0; | ||
| padding: .125em 1em; | ||
| bottom: 50%; | ||
| } | ||
| .my-page .ui-listview p { | ||
| font-size: 1em; | ||
| margin: 0; | ||
| padding: 0 1.25em; | ||
| min-height: 50%; | ||
| bottom: 0; | ||
| } | ||
| /* Semi transparent background and different position if there is a thumb. The button has overflow hidden so we don't need to set border-radius. */ | ||
| .ui-listview .ui-listview-item-has-thumbnail h2, | ||
| .ui-listview .ui-listview-item-has-thumbnail p { | ||
| background: #111; | ||
| background: rgba(0,0,0,.8); | ||
| } | ||
| .ui-listview .ui-listview-item-has-thumbnail h2 { | ||
| bottom: 35%; | ||
| } | ||
| .ui-listview .ui-listview-item-has-thumbnail p { | ||
| min-height: 35%; | ||
| } | ||
| .my-page .ui-listview .ui-listview-item-aside { | ||
| padding: .125em .625em; | ||
| width: auto; | ||
| min-height: 0; | ||
| top: 0; | ||
| left: auto; | ||
| bottom: auto; | ||
| /* Custom styling. */ | ||
| background: #990099; | ||
| background: rgba(153,0,153,.85); | ||
| -webkit-border-top-right-radius: inherit; | ||
| border-top-right-radius: inherit; | ||
| -webkit-border-bottom-left-radius: inherit; | ||
| border-bottom-left-radius: inherit; | ||
| -webkit-border-bottom-right-radius: 0; | ||
| border-bottom-right-radius: 0; | ||
| } | ||
| /* If you want to add shadow, don't kill the focus style. */ | ||
| .my-page .ui-listview li { | ||
| -moz-box-shadow: 0px 0px 9px #111; | ||
| -webkit-box-shadow: 0px 0px 9px #111; | ||
| box-shadow: 0px 0px 9px #111; | ||
| } | ||
| /* Images mask the hover bg color so we give desktop users feedback by applying the focus style on hover as well. */ | ||
| .my-page .ui-listview li > .ui-button:hover { | ||
| -moz-box-shadow: 0px 0px 12px #33ccff; | ||
| -webkit-box-shadow: 0px 0px 12px #33ccff; | ||
| box-shadow: 0px 0px 12px #33ccff; | ||
| } | ||
| /* Animate focus and hover style, and resizing. */ | ||
| .my-page .ui-listview li, | ||
| .my-page .ui-listview .ui-button { | ||
| -webkit-transition: all 500ms ease; | ||
| -moz-transition: all 500ms ease; | ||
| -o-transition: all 500ms ease; | ||
| -ms-transition: all 500ms ease; | ||
| transition: all 500ms ease; | ||
| } | ||
| } | ||
|
|
||
| /* Second breakpoint is 63.75em (1020px). 4 column layout. Tiles will be 250x250 pixels incl. margin again at the breakpoint. */ | ||
| @media ( min-width: 63.75em ) { | ||
| .my-page .ui-content { | ||
| padding: .625em; /* 10px */ | ||
| } | ||
| /* Set a max-width for the last breakpoint to prevent too much stretching on large screens. | ||
| By setting the max-width equal to the breakpoint width minus padding we keep square tiles. */ | ||
| .my-page .ui-listview { | ||
| max-width: 62.5em; /* 1000px */ | ||
| margin: 0 auto; | ||
| } | ||
| /* Because of the 1000px max-width the width will always be 230px (and margin left/right 10px), | ||
| but we stick to percentage values for demo purposes. */ | ||
| .my-page .ui-listview li { | ||
| width: 23%; | ||
| height: 230px; | ||
| margin: .625em 1%; | ||
| } | ||
| } | ||
|
|
||
| /* For this demo we used images with a size of 310x310 pixels. Just before the second breakpoint the images reach their max width: 1019px - 2 x 9px padding = 1001px x 30.9333% = ~310px */ |
| @@ -0,0 +1,78 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>Listview Responsive Grid - jQuery Mobile Demos</title> | ||
| <link rel="shortcut icon" href="../favicon.ico"> | ||
| <link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.5.0-rc1.min.css"> | ||
| <link rel="stylesheet" href="listview-grid.css"> | ||
| <script src="../js/jquery.js"></script> | ||
| <script src="../js/jquery.mobile-1.5.0-rc1.min.js"></script> | ||
| </head> | ||
| <body> | ||
| <div data-role="page" data-theme="b" id="demo-page" class="my-page"> | ||
|
|
||
| <div data-role="toolbar" data-type="header"> | ||
| <h1>Listview Responsive Grid</h1> | ||
| <a href="./" data-shadow="false" data-iconshadow="false" data-icon="caret-l" data-iconpos="notext" data-rel="back" data-ajax="false">Back</a> | ||
| </div><!-- /header --> | ||
|
|
||
| <div role="main" class="ui-content"> | ||
|
|
||
| <ul data-role="listview" data-inset="true"> | ||
| <li><a href="#"> | ||
| <img src="../_assets/img/apple.png" alt="apple" class="ui-listview-item-thumbnail"> | ||
| <h2>iOS 6.1</h2> | ||
| <p>Apple released iOS 6.1</p> | ||
| <p class="ui-listview-item-aside">iOS</p> | ||
| </a></li> | ||
| <li><a href="#"> | ||
| <img src="../_assets/img/blackberry_10.png" alt="blackberry_10" class="ui-listview-item-thumbnail"> | ||
| <h2>BlackBerry 10</h2> | ||
| <p>BlackBerry launched the Z10 and Q10 with the new BB10 OS</p> | ||
| <p class="ui-listview-item-aside">BlackBerry</p> | ||
| </a></li> | ||
| <li><a href="#"> | ||
| <img src="../_assets/img/lumia_800.png" alt="lumia_800" class="ui-listview-item-thumbnail"> | ||
| <h2>WP 7.8</h2> | ||
| <p>Nokia rolls out WP 7.8 to Lumia 800</p> | ||
| <p class="ui-listview-item-aside">Windows Phone</p> | ||
| </a></li> | ||
| <li><a href="#"> | ||
| <img src="../_assets/img/galaxy_express.png" alt="galaxy_express" class="ui-listview-item-thumbnail"> | ||
| <h2>Galaxy</h2> | ||
| <p>New Samsung Galaxy Express</p> | ||
| <p class="ui-listview-item-aside">Samsung</p> | ||
| </a></li> | ||
| <li><a href="#"> | ||
| <img src="../_assets/img/nexus_7.png" alt="nexus_7" class="ui-listview-item-thumbnail"> | ||
| <h2>Nexus 7</h2> | ||
| <p>Rumours about new full HD Nexus 7</p> | ||
| <p class="ui-listview-item-aside">Android</p> | ||
| </a></li> | ||
| <li><a href="#"> | ||
| <img src="../_assets/img/firefox_os.png" alt="firefox_os" class="ui-listview-item-thumbnail"> | ||
| <h2>Firefox OS</h2> | ||
| <p>ZTE to launch Firefox OS smartphone at MWC</p> | ||
| <p class="ui-listview-item-aside">Firefox</p> | ||
| </a></li> | ||
| <li><a href="#"> | ||
| <img src="../_assets/img/tizen.png" alt="tizen" class="ui-listview-item-thumbnail"> | ||
| <h2>Tizen</h2> | ||
| <p>First Samsung phones with Tizen can be expected in 2013</p> | ||
| <p class="ui-listview-item-aside">Tizen</p> | ||
| </a></li> | ||
| <li><a href="#"> | ||
| <h2>Symbian</h2> | ||
| <p>Nokia confirms the end of Symbian</p> | ||
| <p class="ui-listview-item-aside">Symbian</p> | ||
| </a></li> | ||
| </ul> | ||
|
|
||
| </div><!-- /content --> | ||
|
|
||
| </div><!-- /page --> | ||
|
|
||
| </body> | ||
| </html> |
| @@ -0,0 +1,185 @@ | ||
| /* gmap plugin. | ||
| * | ||
| * $.gmap() | ||
| * $.gmap({ ...options... }) | ||
| * $.gmap('addMarkers', data) | ||
| * | ||
| * The jQuery object being mapified must have an attribute: data-initial-view="lat,lng,zoom" | ||
| * | ||
| * Configuration options: | ||
| * | ||
| * loadingMessage: a string for the loading overlay. Default: "Loading..." | ||
| * autoAddMarkers: boolean. If true, a marker is automatically added for each item with the | ||
| * attribute data-marker-info="lat,lng". If the element or any descendant has the class | ||
| * "ui-gmap-marker-content", then an infobox containing that content will be shown when | ||
| * the marker is clicked (this content is cloned). The HTML contents of a subelement with | ||
| * class "ui-gmap-marker-title" will be used for the mouseover tooltip. | ||
| * infoWindowConfig: Object containing a list of properties for the info window (if applicable). | ||
| * | ||
| * Markup requirements: | ||
| * | ||
| * 1. The class "ui-gmap" will be added to each element to which the plugin is applied. | ||
| */ | ||
| (function($) { | ||
| var pluginName = 'gmap'; | ||
| var DATA_INITIAL_VIEW = "44.80,-93.16,5"; | ||
|
|
||
| function parseLatLng(string) { | ||
| if (!string) string = DATA_INITIAL_VIEW; | ||
| var parts = string.split(','); | ||
| if (parts.length != 2) throw 'Invalid lat/lng: "'+string+'"'; | ||
| var lat = parseFloat(parts[0]); | ||
| var lng = parseFloat(parts[1]); | ||
| if (isNaN(lat) || lat < -90 || lat > 90 || isNaN(lng) || lng < -180 || lng > 180) | ||
| throw 'Invalid lat/lng: "'+string+'"'; | ||
| return new google.maps.LatLng(lat, lng); | ||
| } | ||
|
|
||
| function parseLatLngZoom(string) { | ||
| if (!string) string = DATA_INITIAL_VIEW; | ||
| var parts = string.split(','); | ||
| if (parts.length != 3) throw 'Invalid lat/lng/zoom: "'+string+'"'; | ||
| var lat = parseFloat(parts[0]); | ||
| var lng = parseFloat(parts[1]); | ||
| var zoom = parseInt(parts[2]); | ||
| if (isNaN(lat) || lat < -90 || lat > 90 || isNaN(lng) || lng < -180 || lng > 180 || zoom < 3 || zoom > 30) | ||
| throw 'Invalid lat/lng/zoom: "'+string+'"'; | ||
| return { center: new google.maps.LatLng(lat, lng), zoom: zoom }; | ||
| } | ||
|
|
||
| var commands = { | ||
| init: function(config) { | ||
| if (!('google' in window) || !('maps' in google)) { | ||
| throw 'Google maps API did not complete loading'; | ||
| } | ||
|
|
||
| var $this = $(this); | ||
| $this.data(pluginName, config); | ||
|
|
||
| // Set up UI | ||
| $this.addClass('ui-gmap').html('<div class="ui-gmap-canvas"></div>'); | ||
|
|
||
| // Figure out the initial view and construct the googlemap | ||
| var opts = parseLatLngZoom($this.attr('data-initial-view')); | ||
| opts.mapTypeId = google.maps.MapTypeId.ROADMAP; | ||
| opts.zoomControlOptions = { | ||
| position: google.maps.ControlPosition.LEFT_CENTER | ||
| }; | ||
| var $canvas = $this.find('.ui-gmap-canvas'); | ||
| var map = new google.maps.Map($canvas.get(0), opts); | ||
| $this.data(pluginName + '.map', map); | ||
|
|
||
| if (config.autoAddMarkers) { | ||
| $(this).gmap('addMarkersFromDOM'); | ||
| } | ||
|
|
||
| // propagate resize events | ||
| $canvas.resize(function(e) { | ||
| google.maps.event.trigger(map, 'resize'); | ||
| }); | ||
|
|
||
| // ideally we would like to say: "resize the map if it or any parent goes from hidden->visible" | ||
| // but we don't have that event available, so the caller needs to be responsible for now | ||
| }, | ||
| addMarkersFromDOM: function() { | ||
| var data = []; | ||
|
|
||
| $('[data-marker-info]').each(function() { | ||
| try { | ||
| var pos = parseLatLng($(this).attr('data-marker-info')); | ||
| data.push({ position: pos, | ||
| title: $(this).find('.ui-gmap-marker-title').html(), | ||
| content: $(this).find('.ui-gmap-marker-info').andSelf().filter('.ui-gmap-marker-info').clone().get(0) | ||
| }); | ||
| } | ||
| catch (e) { | ||
| console.log(e); | ||
| } | ||
| }); | ||
|
|
||
| var config = $(this).data(pluginName); | ||
| var map = $(this).data(pluginName + '.map'); | ||
| var bounds = $(this).gmap('addMarkers', data); | ||
| if (!bounds.isEmpty()) { | ||
| var span = bounds.toSpan(); | ||
| if (span.lat() < 0.0001 || span.lng() < 0.0001) { | ||
| map.setCenter(bounds.getCenter()); | ||
| map.setZoom(config.zoomForSingleMarker); | ||
| } | ||
| else { | ||
| map.fitBounds(bounds); | ||
| } | ||
| } | ||
| }, | ||
| addMarkers: function(data) { | ||
| var config = $(this).data(pluginName); | ||
| var map = $(this).data(pluginName + '.map'); | ||
| var bounds = new google.maps.LatLngBounds(); | ||
| var info = new InfoBox({ | ||
| boxStyle: { | ||
| border: "1px solid black", | ||
| background: "white", | ||
| width: "220px", | ||
| padding: "5px" | ||
| } | ||
| ,closeBoxURL: "http://maps.google.com/mapfiles/close.gif" | ||
| }); | ||
|
|
||
| // Feel free to make lat/lng dynamic | ||
| var lat="44.80"; | ||
| var lon = "-93.16"; | ||
| if (lat && lon) { | ||
| var myLocation = new google.maps.LatLng(lat, lon); | ||
| new google.maps.Marker({ map:map, position:myLocation, icon:"http://labs.google.com/ridefinder/images/mm_20_green.png" }); | ||
| bounds.extend(myLocation); | ||
| } | ||
|
|
||
| $.each(data, function(i) { | ||
| var icon = "http://maps.google.com/mapfiles/marker.png"; | ||
| var marker = new google.maps.Marker({ map:map, position:this.position, title:this.title, icon:icon }); | ||
| var content = this.content; | ||
| if (content) { | ||
| google.maps.event.addListener(marker, 'click', (function(map, marker, content) { return function() { | ||
| info.setContent($(content).html()); | ||
| info.open(map, marker); | ||
| };})(map, marker, content)); | ||
| } | ||
| bounds.extend(this.position); | ||
| }); | ||
| return bounds; | ||
| } | ||
| }; | ||
|
|
||
| var defaultConfig = { | ||
| autoAddMarkers: true, | ||
| zoomForSingleMarker: 15, | ||
| infoWindowConfig: { maxWidth: 175 } | ||
| }; | ||
|
|
||
| $.fn[pluginName] = function() { | ||
| if (arguments.length == 0) { | ||
| var config = $.extend({}, defaultConfig); | ||
| $(this).each(function() { | ||
| commands.init.call(this, config); | ||
| }); | ||
| return this; | ||
| } | ||
| if (arguments.length == 1 && $.isPlainObject(arguments[0])) { | ||
| var config = $.extend({}, defaultConfig, arguments[0]); | ||
| $(this).each(function() { | ||
| commands.init.call(this, config); | ||
| }); | ||
| return this; | ||
| } | ||
| var cmd = commands[arguments[0]]; | ||
| if ($.isFunction(cmd)) { | ||
| var args = []; | ||
| for (var i = 1; i < arguments.length; i++) args.push(arguments[i]); | ||
| return cmd.apply(this, args); | ||
| } | ||
| else { | ||
| alert('Function '+arguments[0]+' is not supported by the '+pluginName+' plugin.'); | ||
| } | ||
| return this; | ||
| }; | ||
| })(jQuery); |
| @@ -0,0 +1,28 @@ | ||
| <li data-marker-info="44.861878,-93.264551"> | ||
| <div style="display:none;"> | ||
| <div class="ui-gmap-marker-info"> | ||
| <h1><a id="gmap-marker-link" href="#">BeeWell Clinic</a></h1> | ||
| <p>715 8th Street</p> | ||
| </div> | ||
| </div> | ||
| <a href=""> | ||
| <h1 class="ui-gmap-marker-title wrap">BeeWell Clinic</h1> | ||
| <div class="ui-listview-item-count-bubble"> | ||
| <span>6.24 miles</span> | ||
| </div> | ||
| </a> | ||
| </li> | ||
| <li data-marker-info="44.749634,-93.274724"> | ||
| <div style="display:none;"> | ||
| <div class="ui-gmap-marker-info"> | ||
| <h1><a id="gmap-marker-link" href="#">Peoria Urgent Care</a></h1> | ||
| <p>100 Fairview Dr</p> | ||
| </div> | ||
| </div> | ||
| <a href=""> | ||
| <h1 class="ui-gmap-marker-title wrap">Peoria Urgent Care</h1> | ||
| <div class="ui-listview-item-count-bubble"> | ||
| <span>6.5 miles</span> | ||
| </div> | ||
| </a> | ||
| </li> |
