| @@ -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.4.3.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.4.3.min.js"></script> | ||
| <script src="autodividers-linkbar.js"></script> | ||
| </head> | ||
| <body> | ||
| <div data-role="page" id="demo-page"> | ||
|
|
||
| <div data-role="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="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,68 @@ | ||
| $.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-li-divider:contains(" + letter + ")" ); | ||
|
|
||
| if ( divider.length > 0 ) { | ||
| top = divider.offset().top; | ||
| $.mobile.silentScroll( top ); | ||
| } else { | ||
| return false; | ||
| } | ||
| }); | ||
| $( "#sorter li" ).hover(function() { | ||
| $( this ).addClass( "ui-btn" ).removeClass( "ui-li-static" ); | ||
| }, function() { | ||
| $( this ).removeClass( "ui-btn" ).addClass( "ui-li-static" ); | ||
| }); | ||
| }); | ||
| $( function(){ | ||
| $.mobile.window.on( "scroll", function( e ) { | ||
| var headTop = $(window).scrollTop(), | ||
| foot = $( ".ui-page-active [data-role='footer']" ), | ||
| head = $( ".ui-page-active [data-role='header']" ), | ||
| 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,138 @@ | ||
| /* A bit custom styling */ | ||
| .my-page .ui-listview li .ui-btn p { | ||
| color: #c0c0c0; | ||
| } | ||
| .my-page .ui-listview li .ui-btn .ui-li-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-btn { | ||
| -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-li-has-thumb .ui-li-thumb { | ||
| 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-btn, | ||
| .my-page .ui-listview .ui-li-thumb { | ||
| -webkit-border-radius: inherit; | ||
| border-radius: inherit; | ||
| } | ||
| /* Hide the icon */ | ||
| .my-page .ui-listview .ui-btn-icon-right: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-li-has-thumb h2, | ||
| .ui-listview .ui-li-has-thumb p { | ||
| background: #111; | ||
| background: rgba(0,0,0,.8); | ||
| } | ||
| .ui-listview .ui-li-has-thumb h2 { | ||
| bottom: 35%; | ||
| } | ||
| .ui-listview .ui-li-has-thumb p { | ||
| min-height: 35%; | ||
| } | ||
| /* ui-li-aside has class .ui-li-desc as well so we have to override some things. */ | ||
| .my-page .ui-listview .ui-li-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-btn: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-btn { | ||
| -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.4.3.min.css"> | ||
| <link rel="stylesheet" href="listview-grid.css"> | ||
| <script src="../js/jquery.js"></script> | ||
| <script src="../js/jquery.mobile-1.4.3.min.js"></script> | ||
| </head> | ||
| <body> | ||
| <div data-role="page" data-theme="b" id="demo-page" class="my-page"> | ||
|
|
||
| <div data-role="header"> | ||
| <h1>Listview Responsive Grid</h1> | ||
| <a href="./" data-shadow="false" data-iconshadow="false" data-icon="carat-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" class="ui-li-thumb"> | ||
| <h2>iOS 6.1</h2> | ||
| <p>Apple released iOS 6.1</p> | ||
| <p class="ui-li-aside">iOS</p> | ||
| </a></li> | ||
| <li><a href="#"> | ||
| <img src="../_assets/img/blackberry_10.png" class="ui-li-thumb"> | ||
| <h2>BlackBerry 10</h2> | ||
| <p>BlackBerry launched the Z10 and Q10 with the new BB10 OS</p> | ||
| <p class="ui-li-aside">BlackBerry</p> | ||
| </a></li> | ||
| <li><a href="#"> | ||
| <img src="../_assets/img/lumia_800.png" class="ui-li-thumb"> | ||
| <h2>WP 7.8</h2> | ||
| <p>Nokia rolls out WP 7.8 to Lumia 800</p> | ||
| <p class="ui-li-aside">Windows Phone</p> | ||
| </a></li> | ||
| <li><a href="#"> | ||
| <img src="../_assets/img/galaxy_express.png" class="ui-li-thumb"> | ||
| <h2>Galaxy</h2> | ||
| <p>New Samsung Galaxy Express</p> | ||
| <p class="ui-li-aside">Samsung</p> | ||
| </a></li> | ||
| <li><a href="#"> | ||
| <img src="../_assets/img/nexus_7.png" class="ui-li-thumb"> | ||
| <h2>Nexus 7</h2> | ||
| <p>Rumours about new full HD Nexus 7</p> | ||
| <p class="ui-li-aside">Android</p> | ||
| </a></li> | ||
| <li><a href="#"> | ||
| <img src="../_assets/img/firefox_os.png" class="ui-li-thumb"> | ||
| <h2>Firefox OS</h2> | ||
| <p>ZTE to launch Firefox OS smartphone at MWC</p> | ||
| <p class="ui-li-aside">Firefox</p> | ||
| </a></li> | ||
| <li><a href="#"> | ||
| <img src="../_assets/img/tizen.png" class="ui-li-thumb"> | ||
| <h2>Tizen</h2> | ||
| <p>First Samsung phones with Tizen can be expected in 2013</p> | ||
| <p class="ui-li-aside">Tizen</p> | ||
| </a></li> | ||
| <li><a href="#"> | ||
| <h2>Symbian</h2> | ||
| <p>Nokia confirms the end of Symbian</p> | ||
| <p class="ui-li-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-li-count"> | ||
| <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-li-count"> | ||
| <span>6.5 miles</span> | ||
| </div> | ||
| </a> | ||
| </li> |
| @@ -0,0 +1,30 @@ | ||
| <?php | ||
| sleep(2); | ||
| ?> | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
|
|
||
| <title>Redirect Target</title> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
|
|
||
| <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile-1.4.3.min.css"> | ||
| <script src="http://code.jquery.com/jquery-1.8.3.js"></script> | ||
| <script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script> | ||
|
|
||
| </head> | ||
| <body> | ||
| <div data-role="page"> | ||
| <div data-role="header"> | ||
| <h1>Redirect Target</h1> | ||
| </div> | ||
| <div role="main" class="ui-content"> | ||
| <p>Content</p> | ||
| <tt> | ||
| </tt> | ||
| </div> | ||
|
|
||
| </div> | ||
| </body> | ||
| </html> |
| @@ -0,0 +1,25 @@ | ||
| <?php | ||
| // ************************************************************************ | ||
| // The two-second sleep simulates network delays, hopefully causing a | ||
| // loading indicator message to appear on the client side. | ||
| // ************************************************************************ | ||
| sleep(2); | ||
|
|
||
| $dst = ( isset( $_GET[ "to" ] ) | ||
| ? $_GET[ "to" ] | ||
| : ( isset( $_POST[ "to" ] ) | ||
| ? $_POST[ "to" ] | ||
| : false ) ); | ||
| if ( $dst ) { | ||
| // ********************************************************************** | ||
| // The crucial line: Issue a custom header with the location to which the | ||
| // redirect should happen. For simplicity, we simply redirect to whatever | ||
| // location was specified in the request's "to" parameter, but real-world | ||
| // scripts can compute the destination based on server-side state. | ||
| // | ||
| // NB: This is not a HTTP redirect. As far as HTTP is concerned, this is | ||
| // a normal request/response cycle with a status code of 200. | ||
| // ********************************************************************** | ||
| header( "X-Redirect: " . $dst ); | ||
| } | ||
| ?> |
| @@ -0,0 +1,4 @@ | ||
| <?php | ||
| header( "Content-Type: text/plain" ); | ||
| echo( file_get_contents( "redirect.php" ) ); | ||
| ?> |
| @@ -0,0 +1,38 @@ | ||
| (function( $ ) { | ||
| // On document ready | ||
| $(function() { | ||
|
|
||
| // Bind to the navigate event | ||
| $( window ).on( "navigate", function() { | ||
| console.log( "navigated!" ); | ||
| }); | ||
|
|
||
| // Bind to the click of the example link | ||
| $( "#event-example" ).click(function( event ) { | ||
| event.preventDefault(); | ||
| location.hash = "foo"; | ||
| }); | ||
|
|
||
| // Bind to the click of the example link | ||
| $( "#method-example" ).click(function( event ) { | ||
| // Append #bar | ||
| $.mobile.navigate( "#bar", { | ||
| info: "info about the #bar hash" | ||
| }); | ||
|
|
||
| // Replace #bar with #baz | ||
| $.mobile.navigate( "#baz" ); | ||
|
|
||
| // Log the results of the navigate event | ||
| $( window ).on( "navigate", function( event, data ){ | ||
| console.log( data.state.info ); | ||
| console.log( data.state.direction ); | ||
| console.log( data.state.url ); | ||
| console.log( data.state.hash ); | ||
| }); | ||
|
|
||
| // Go back to pop the state for #bar and log it | ||
| window.history.back(); | ||
| }); | ||
| }); | ||
| })( jQuery ); |
| @@ -0,0 +1,52 @@ | ||
| <li data-role="list-divider">Forms</li> | ||
| <li data-section="Questions & Answers" data-filtertext="CSS styles apply widget scope wrap selector customize"><a href="faq/why-wont-my-css-styles-apply-correctly-to-a-widget.html">Why won't my CSS styles apply correctly to a widget?</a></li> | ||
| <li data-section="Questions & Answers" data-filtertext="form update value enhance pageinit refresh"><a href="faq/updating-the-value-of-enhanced-form-elements-does-not-work.html">Updating the value of enhanced form elements does not work.</a></li> | ||
| <li data-section="Questions & Answers" data-filtertext="HTML 5 inputs appearance keyboard picker calendar date time slider file color"><a href="faq/my-html-5-inputs-look-different-in-browsers.html">My HTML 5 inputs look different across devices and browsers.</a></li> | ||
| <li data-section="Questions & Answers" data-filtertext="range search inputs slider number text degrade"><a href="faq/my-range-search-input-type-is-being-changed.html">My range or search inputs are being change to number/text.</a></li> | ||
| <li data-section="Questions & Answers" data-filtertext="custom select popup dialog logic"><a href="faq/sometimes-custom-select-shows-as-dialog-popup.html">Sometimes my custom select shows as a popup other times its a dialog.</a></li> | ||
| <li data-section="Questions & Answers" data-filtertext="disable button issue class method"><a href="faq/disabling-a-button-does-not-work.html">Disabling a button does not work.</a></li> | ||
| <li data-section="Questions & Answers" data-filtertext="fixed toolbar header footer fullscreen select input bug issue"><a href="faq/controls-in-header-footer.html">Controls in my fixed header or footer are not responding or behave erratically.</a></li> | ||
| <li data-role="list-divider">Pages</li> | ||
| <li data-section="Questions & Answers" data-filtertext="head load scripts styles pageinit onload pagebeforecreate ajax nav pages"><a href="faq/scripts-and-styles-not-loading.html">Why aren't my scripts and styles loading?</a></li> | ||
| <li data-section="Questions & Answers" data-filtertext="document.ready onload paginit DOM ready on ready scripts "><a href="faq/dom-ready-not-working.html">Why isn't DOM ready working for my scripts?</a></li> | ||
| <li data-section="Questions & Answers" data-filtertext="ajax nav load page mobile.loadpage"><a href="faq/how-do-i-load-a-page.html">How do I load a page?</a></li> | ||
| <li data-section="Questions & Answers" data-filtertext="ajax nav multi page document load"><a href="faq/why-is-only-the-first-page-loaded.html">Why is only the first page of my multi page document loaded?</a></li> | ||
| <li data-section="Questions & Answers" data-filtertext="pass url query params ajax nav"><a href="faq/pass-query-params-to-page.html">I'm trying to pass query params to a page but it's not working?</a></li> | ||
| <li data-section="Questions & Answers" data-filtertext="hash pass parameters information ajax nav"><a href="faq/pass-via-the-hash-to-page.html">I'm trying to pass information via the hash but it's not working?</a></li> | ||
| <li data-section="Questions & Answers" data-filtertext="application cache status error isLocal ajax nav"><a href="faq/the-application-cache-is-not-working.html">I'm trying to use the application cache but it's not working.</a></li> | ||
| <li data-section="Questions & Answers" data-filtertext="create refresh event trigger pageInit refresh method content injected page not enhanced."><a href="faq/injected-content-is-not-enhanced.html">Content injected into a page is not enhanced.</a></li> | ||
| <li data-section="Questions & Answers" data-filtertext="create trigger event pageInit injected HTML"><a href="faq/triggering-create-on-injected-content-does-not-work.html">Triggering create on injected HTML does not work.</a></li> | ||
| <li data-section="Questions & Answers" data-filtertext="auto-enhance element stop preventnative role none"><a href="faq/how-can-i-stop-auto-enhancement-of-elements.html">How can I stop JQM from auto-enhancing an element?</a></li> | ||
| <li data-section="Questions & Answers" data-filtertext="auto-enhance block container parent stop preventnative role none"><a href="faq/how-can-i-stop-auto-enhancement-of-a-block-of-elements.html">How can I stop JQM from enhancing a block of elements?</a></li> | ||
| <li data-section="Questions & Answers" data-filtertext="page title ajax nav head"><a href="faq/how-do-i-control-page-titles.html">How do I control page titles?</a></li> | ||
| <li data-section="Questions & Answers" data-filtertext="ajax nav load page loadPage"><a href="faq/how-do-i-load-a-page.html">How do I load a page?</a></li> | ||
| <li data-section="Questions & Answers" data-filtertext="ajax nav load page loadPage hide url bar"><a href="faq/how-do-i-turn-off-url-hiding.html" data-ajax="false">How do I turn off the automatic hiding of the url bar?</a></li> | ||
| <li data-role="list-divider">Events</li> | ||
| <li data-section="Questions & Answers" data-filtertext="touch mouse events vmouseover, vmousedown, vmousemove, vmouseup, vclick, vmousecancel"><a href="faq/how-do-i-use-touch-mouse-events.html">How do I use touch and mouse events?</a></li> | ||
| <li data-role="list-divider">Theme and styling</li> | ||
| <li data-section="Questions & Answers" data-filtertext="theme swatch css themeroller customize icons colors fonts style"><a href="faq/how-does-theming-work.html">How does theming work?</a></li> | ||
| <li data-role="list-divider">Apps</li> | ||
| <li data-section="Questions & Answers" data-filtertext="How do I need to configure PhoneGap Cordova?"><a href="faq/how-configure-phonegap-cordova.html">How do I need to configure PhoneGap/Cordova?</a></li> | ||
|
|
||
| <!-- | ||
| <li data-role="list-divider">Navigation</li> | ||
| <li data-section="Questions & Answers" data-filtertext=""><a href="faq/nav-is-acting-erraticly.php">The nav is acting erratically!</a></li> | ||
| <li data-section="Questions & Answers" data-filtertext=""><a href="faq/deep-links-dont-work.php">Following a deep link ( a link to scroll to and id ) does not work.</a></li> | ||
| <li data-section="Questions & Answers" data-filtertext=""><a href="faq/scripts-css-only-works-on-first-page-or-refresh.php">My script / css only works on first page or on refresh.</a></li> | ||
| <li data-role="list-divider">Widgets</li> | ||
| <li data-section="Questions & Answers" data-filtertext=""><a href="faq/cloned-content-double-enhanced.php">Cloning a widget or enhanced for element and enhancing causes "double" enhancement</a></li> | ||
| <li data-section="Questions & Answers" data-filtertext=""><a href="faq/cloned-content-does-not-update.php">Cloned widget or enhanced element does not update</a></li> | ||
| <li data-section="Questions & Answers" data-filtertext=""><a href="faq/data-enhance-false-does-not-work.php">Setting data-enhance="false" does not work.</a></li> | ||
| <li data-role="list-divider">General</li> | ||
| <li data-section="Questions & Answers" data-filtertext=""><a href="faq/selecting-element-by-id-not-working.php">Selecting elements by id only works sometimes or on first page!</a></li> | ||
| <li data-section="Questions & Answers" data-filtertext=""><a href="faq/global-config-settings-ignored.php">The global configuration settings i set are being ignored.</a></li> | ||
| <li data-section="Questions & Answers" data-filtertext=""><a href="faq/custom-css-is-ignored.php">My custom css is ignored.</a></li> | ||
| <li data-role="list-divider">Events</li> | ||
| <li data-section="Questions & Answers" data-filtertext=""><a href="faq/swipe-triggered-when-scrolling.php">Swipe triggered when scrolling.</a></li> | ||
| <li data-section="Questions & Answers" data-filtertext=""><a href="faq/document-ready-not-working.php">Document ready ignored after first page.</a></li> | ||
| <li data-role="list-divider">Theming & custom styles</li> | ||
| <li data-section="Questions & Answers" data-filtertext=""><a href="faq/#">How do I add custom icons?</a></li> | ||
| <li data-section="Questions & Answers" data-filtertext=""><a href="faq/#">How do I add remove the circle behind the icons?</a></li> | ||
| --> |
| @@ -0,0 +1,8 @@ | ||
| <?php | ||
| $seconds_to_cache = 3600000; | ||
| $ts = gmdate("D, d M Y H:i:s", time() + $seconds_to_cache) . " GMT"; | ||
| header("Expires: $ts"); | ||
| header("Pragma: cache"); | ||
| header("Cache-Control: max-age=$seconds_to_cache"); | ||
| echo file_get_contents( "http://api.jquerymobile.com/resources/api.xml" ); | ||
| ?> |
| @@ -0,0 +1,8 @@ | ||
| <?php | ||
| $seconds_to_cache = 3600000; | ||
| $ts = gmdate("D, d M Y H:i:s", time() + $seconds_to_cache) . " GMT"; | ||
| header("Expires: $ts"); | ||
| header("Pragma: cache"); | ||
| header("Cache-Control: max-age=$seconds_to_cache"); | ||
| echo file_get_contents( "http://api.jquerymobile.com/resources/api.xml" ); | ||
| ?> |
| @@ -0,0 +1,31 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>Dialog example - jQuery Mobile Demos</title> | ||
| <link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.3.min.css"> | ||
| <link rel="stylesheet" href="../_assets/css/jqm-demos.css"> | ||
| <link rel="shortcut icon" href="../favicon.ico"> | ||
| <script src="../js/jquery.js"></script> | ||
| <script src="../_assets/js/index.js"></script> | ||
| <script src="../js/jquery.mobile-1.4.3.min.js"></script> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div data-role="page" data-dialog="true"> | ||
| <div data-role="header" data-theme="a"> | ||
| <h1>Dialog</h1> | ||
|
|
||
| </div> | ||
|
|
||
| <div role="main" class="ui-content"> | ||
| <h1>I'm themed</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="index.html" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">Good for you</a> | ||
| <a href="index.html" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">Don't care, really</a> | ||
| </div> | ||
| </div> | ||
|
|
||
| </body> | ||
| </html> |
| @@ -0,0 +1,35 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>Dialog example - jQuery Mobile Demos</title> | ||
| <link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.3.min.css"> | ||
| <link rel="stylesheet" href="../_assets/css/jqm-demos.css"> | ||
| <link rel="shortcut icon" href="../favicon.ico"> | ||
| <script src="../js/jquery.js"></script> | ||
| <script src="../_assets/js/index.js"></script> | ||
| <script src="../js/jquery.mobile-1.4.3.min.js"></script> | ||
| <style> | ||
| .ui-dialog.dialog-actionsheet .ui-dialog-contain { | ||
| margin-top: 0; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div data-role="page" class="dialog-actionsheet" data-dialog="true"> | ||
|
|
||
| <div role="main" class="ui-content"> | ||
| <h3>Share Photos</h3> | ||
| <a href="dialog-success.html" data-transition="slidedown" class="ui-btn ui-shadow ui-corner-all ui-btn-b">Email</a> | ||
| <a href="dialog-success.html" data-transition="slidedown" class="ui-btn ui-shadow ui-corner-all ui-btn-b">Upload to flickr</a> | ||
| <a href="dialog-success.html" data-transition="slidedown" class="ui-btn ui-shadow ui-corner-all ui-btn-b">Share on Facebook</a> | ||
| <a href="dialog-success.html" data-transition="slidedown" class="ui-btn ui-shadow ui-corner-all ui-btn-b">Tweet photo</a> | ||
|
|
||
| <a href="index.html" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">Cancel</a> | ||
| </div> | ||
| </div> | ||
|
|
||
| </body> | ||
| </html> |
| @@ -0,0 +1,29 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>Dialog example - jQuery Mobile Demos</title> | ||
| <link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.3.min.css"> | ||
| <link rel="stylesheet" href="../_assets/css/jqm-demos.css"> | ||
| <link rel="shortcut icon" href="../favicon.ico"> | ||
| <script src="../js/jquery.js"></script> | ||
| <script src="../_assets/js/index.js"></script> | ||
| <script src="../js/jquery.mobile-1.4.3.min.js"></script> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div data-role="page" data-corners="false" data-dialog="true"> | ||
| <div data-role="header"> | ||
| <h1>Dialog</h1> | ||
| </div> | ||
|
|
||
| <div role="main" class="ui-content"> | ||
| <h1>No rounded corners</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="index.html" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-b">Ok, I get it</a> | ||
| </div> | ||
| </div> | ||
|
|
||
| </body> | ||
| </html> |
| @@ -0,0 +1,29 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>Dialog example - jQuery Mobile Demos</title> | ||
| <link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.3.min.css"> | ||
| <link rel="stylesheet" href="../_assets/css/jqm-demos.css"> | ||
| <link rel="shortcut icon" href="../favicon.ico"> | ||
| <script src="../js/jquery.js"></script> | ||
| <script src="../_assets/js/index.js"></script> | ||
| <script src="../js/jquery.mobile-1.4.3.min.js"></script> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div data-role="page" data-close-btn="none" data-dialog="true"> | ||
| <div data-role="header"> | ||
| <h1>Dialog</h1> | ||
| </div> | ||
|
|
||
| <div role="main" class="ui-content"> | ||
| <h1>No close button</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="index.html" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-b">Ok, I get it</a> | ||
| </div> | ||
| </div> | ||
|
|
||
| </body> | ||
| </html> |
| @@ -0,0 +1,30 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>Dialog example - jQuery Mobile Demos</title> | ||
| <link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.3.min.css"> | ||
| <link rel="stylesheet" href="../_assets/css/jqm-demos.css"> | ||
| <link rel="shortcut icon" href="../favicon.ico"> | ||
| <script src="../js/jquery.js"></script> | ||
| <script src="../_assets/js/index.js"></script> | ||
| <script src="../js/jquery.mobile-1.4.3.min.js"></script> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div data-role="page" data-overlay-theme="b" data-dialog="true"> | ||
| <div data-role="header" data-theme="a"> | ||
| <h1>Dialog</h1> | ||
| </div> | ||
|
|
||
| <div role="main" class="ui-content"> | ||
| <h1>Custom overlay</h1> | ||
| <p>This dialog adds <code>data-overlay-theme="b"</code> to the page container to set the overlay swatch color.</p> | ||
| <a href="index.html" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-btn-inline">I like it</a> | ||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| </body> | ||
| </html> |
| @@ -0,0 +1,29 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>Dialog example - jQuery Mobile Demos</title> | ||
| <link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.3.min.css"> | ||
| <link rel="stylesheet" href="../_assets/css/jqm-demos.css"> | ||
| <link rel="shortcut icon" href="../favicon.ico"> | ||
| <script src="../js/jquery.js"></script> | ||
| <script src="../_assets/js/index.js"></script> | ||
| <script src="../js/jquery.mobile-1.4.3.min.js"></script> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div data-role="page" data-close-btn="right" data-dialog="true"> | ||
| <div data-role="header"> | ||
| <h1>Dialog</h1> | ||
| </div> | ||
|
|
||
| <div role="main" class="ui-content"> | ||
| <h1>Right close button</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="index.html" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-b">Ok, I get it</a> | ||
| </div> | ||
| </div> | ||
|
|
||
| </body> | ||
| </html> |
| @@ -0,0 +1,32 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>Dialog example - jQuery Mobile Demos</title> | ||
| <link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.3.min.css"> | ||
| <link rel="stylesheet" href="../_assets/css/jqm-demos.css"> | ||
| <link rel="shortcut icon" href="../favicon.ico"> | ||
| <script src="../js/jquery.js"></script> | ||
| <script src="../_assets/js/index.js"></script> | ||
| <script src="../js/jquery.mobile-1.4.3.min.js"></script> | ||
| <style> | ||
| .ui-dialog.dialog-actionsheet .ui-dialog-contain { | ||
| margin-top: 0; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div data-role="page" class="dialog-actionsheet" data-dialog="true"> | ||
|
|
||
| <div role="main" class="ui-content"> | ||
| <h3>Photos posted successfully</h3> | ||
|
|
||
| <a href="./" class="ui-btn ui-shadow ui-corner-all ui-btn-a">View photo page</a> | ||
| <a href="./" class="ui-btn ui-shadow ui-corner-all ui-btn-a">Done</a> | ||
| </div> | ||
| </div> | ||
|
|
||
| </body> | ||
| </html> |
| @@ -0,0 +1,109 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>Dialog example - jQuery Mobile Demos</title> | ||
| <link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.3.min.css"> | ||
| <link rel="stylesheet" href="../_assets/css/jqm-demos.css"> | ||
| <link rel="shortcut icon" href="../favicon.ico"> | ||
| <script src="../js/jquery.js"></script> | ||
| <script src="../_assets/js/index.js"></script> | ||
| <script src="../js/jquery.mobile-1.4.3.min.js"></script> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div data-role="page"> | ||
|
|
||
| <div data-role="header"> | ||
| <h1>Dialog select test</h1> | ||
| </div> | ||
| <div role="main" class="ui-content"> | ||
| <a href="#bar" class="ui-btn ui-shadow ui-corner-all">Open dialog</a> | ||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| <div data-role="page" id="bar" data-dialog="true"> | ||
|
|
||
| <div data-role="header" data-theme="b"> | ||
| <h1>Sample Dialogs</h1> | ||
| </div> | ||
|
|
||
| <div role="main" class="ui-content"> | ||
|
|
||
| <form action=""> | ||
| <div class="ui-field-contain"> | ||
| <label for="select-choice-1" class="select">Choose shipping method:</label> | ||
| <select name="select-choice-1" id="select-choice-1" data-native-menu="false"> | ||
| <option value="standard">Standard: 7 day</option> | ||
| <option value="rush">Rush: 3 days</option> | ||
| <option value="express">Express: next day</option> | ||
| <option value="overnight">Overnight</option> | ||
| </select> | ||
| </div> | ||
|
|
||
| <div class="ui-field-contain"> | ||
| <label for="select-choice-3" class="select">Your state:</label> | ||
| <select name="select-choice-3" id="select-choice-3" data-native-menu="false"> | ||
| <option value="AL">Alabama</option> | ||
| <option value="AK">Alaska</option> | ||
| <option value="AZ">Arizona</option> | ||
| <option value="AR">Arkansas</option> | ||
| <option value="CA">California</option> | ||
| <option value="CO">Colorado</option> | ||
| <option value="CT">Connecticut</option> | ||
| <option value="DE">Delaware</option> | ||
| <option value="FL">Florida</option> | ||
| <option value="GA">Georgia</option> | ||
| <option value="HI">Hawaii</option> | ||
| <option value="ID">Idaho</option> | ||
| <option value="IL">Illinois</option> | ||
| <option value="IN">Indiana</option> | ||
| <option value="IA">Iowa</option> | ||
| <option value="KS">Kansas</option> | ||
| <option value="KY">Kentucky</option> | ||
| <option value="LA">Louisiana</option> | ||
| <option value="ME">Maine</option> | ||
| <option value="MD">Maryland</option> | ||
| <option value="MA">Massachusetts</option> | ||
| <option value="MI">Michigan</option> | ||
| <option value="MN">Minnesota</option> | ||
| <option value="MS">Mississippi</option> | ||
| <option value="MO">Missouri</option> | ||
| <option value="MT">Montana</option> | ||
| <option value="NE">Nebraska</option> | ||
| <option value="NV">Nevada</option> | ||
| <option value="NH">New Hampshire</option> | ||
| <option value="NJ">New Jersey</option> | ||
| <option value="NM">New Mexico</option> | ||
| <option value="NY">New York</option> | ||
| <option value="NC">North Carolina</option> | ||
| <option value="ND">North Dakota</option> | ||
| <option value="OH">Ohio</option> | ||
| <option value="OK">Oklahoma</option> | ||
| <option value="OR">Oregon</option> | ||
| <option value="PA">Pennsylvania</option> | ||
| <option value="RI">Rhode Island</option> | ||
| <option value="SC">South Carolina</option> | ||
| <option value="SD">South Dakota</option> | ||
| <option value="TN">Tennessee</option> | ||
| <option value="TX">Texas</option> | ||
| <option value="UT">Utah</option> | ||
| <option value="VT">Vermont</option> | ||
| <option value="VA">Virginia</option> | ||
| <option value="WA">Washington</option> | ||
| <option value="WV">West Virginia</option> | ||
| <option value="WI">Wisconsin</option> | ||
| <option value="WY">Wyoming</option> | ||
| </select> | ||
| </div> | ||
|
|
||
| <a href="#foo" class="ui-btn ui-shadow ui-corner-all" data-rel="back">Real Submit Would go here</a> | ||
| </form> | ||
| <a href="#foo" class="ui-btn ui-shadow ui-corner-all" data-rel="back">Cancel</a> | ||
| </div> | ||
| </div> | ||
|
|
||
| </body> | ||
| </html> |
| @@ -0,0 +1,31 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>Dialog example - jQuery Mobile Demos</title> | ||
| <link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.3.min.css"> | ||
| <link rel="stylesheet" href="../_assets/css/jqm-demos.css"> | ||
| <link rel="shortcut icon" href="../favicon.ico"> | ||
| <script src="../js/jquery.js"></script> | ||
| <script src="../_assets/js/index.js"></script> | ||
| <script src="../js/jquery.mobile-1.4.3.min.js"></script> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div data-role="page" data-dialog="true"> | ||
|
|
||
| <div data-role="header" data-theme="b"> | ||
| <h1>Dialog</h1> | ||
| </div> | ||
|
|
||
| <div role="main" class="ui-content"> | ||
| <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="index.html" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">Sounds good</a> | ||
| <a href="index.html" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">Cancel</a> | ||
| </div> | ||
| </div> | ||
|
|
||
| </body> | ||
| </html> |
| @@ -0,0 +1,83 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>Multi-page template</title> | ||
| <link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.3.min.css"> | ||
| <link rel="stylesheet" href="../_assets/css/jqm-demos.css"> | ||
| <link rel="shortcut icon" href="../favicon.ico"> | ||
| <script src="../js/jquery.js"></script> | ||
| <script src="../_assets/js/index.js"></script> | ||
| <script src="../js/jquery.mobile-1.4.3.min.js"></script> | ||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
| <!-- Start of first page: #one --> | ||
| <div data-role="page" id="one"> | ||
|
|
||
| <div data-role="header"> | ||
| <h1>Multi-page</h1> | ||
| </div><!-- /header --> | ||
|
|
||
| <div role="main" class="ui-content"> | ||
| <h2>One</h2> | ||
|
|
||
| <p>I have an <code>id</code> of "one" on my page container. I'm first in the source order so I'm shown when the page loads.</p> | ||
|
|
||
| <p>This is a multi-page boilerplate template that you can copy to build your first jQuery Mobile page. This template contains multiple "page" containers inside, unlike a single page template that has just one page within it.</p> | ||
| <p>Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.</p> | ||
| <p>You link to internal pages by referring to the <code>id</code> of the page you want to show. For example, to <a href="#two">link</a> to the page with an <code>id</code> of "two", my link would have a <code>href="#two"</code> in the code.</p> | ||
|
|
||
| <h3>Show internal pages:</h3> | ||
| <p><a href="#two" class="ui-btn ui-shadow ui-corner-all">Show page "two"</a></p> | ||
| <p><a href="#popup" class="ui-btn ui-shadow ui-corner-all" data-rel="dialog" data-transition="pop">Show page "popup" (as a dialog)</a></p> | ||
| </div><!-- /content --> | ||
|
|
||
| <div data-role="footer" data-theme="a"> | ||
| <h4>Page Footer</h4> | ||
| </div><!-- /footer --> | ||
| </div><!-- /page one --> | ||
|
|
||
| <!-- Start of second page: #two --> | ||
| <div data-role="page" id="two" data-theme="a"> | ||
|
|
||
| <div data-role="header"> | ||
| <h1>Two</h1> | ||
| </div><!-- /header --> | ||
|
|
||
| <div role="main" class="ui-content"> | ||
| <h2>Two</h2> | ||
| <p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p> | ||
| <p>Notice that the theme is different for this page because we've added a few <code>data-theme</code> swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we're keeping these simple.</p> | ||
| <p><a href="#one" data-direction="reverse" class="ui-btn ui-shadow ui-corner-all ui-btn-b">Back to page "one"</a></p> | ||
|
|
||
| </div><!-- /content --> | ||
|
|
||
| <div data-role="footer"> | ||
| <h4>Page Footer</h4> | ||
| </div><!-- /footer --> | ||
| </div><!-- /page two --> | ||
|
|
||
| <!-- Start of third page: #popup --> | ||
| <div data-role="page" id="popup"> | ||
|
|
||
| <div data-role="header" data-theme="b"> | ||
| <h1>Dialog</h1> | ||
| </div><!-- /header --> | ||
|
|
||
| <div role="main" class="ui-content"> | ||
| <h2>Popup</h2> | ||
| <p>I have an id of "popup" on my page container and only look like a dialog because the link to me had a <code>data-rel="dialog"</code> attribute which gives me this inset look and a <code>data-transition="pop"</code> attribute to change the transition to pop. Without this, I'd be styled as a normal page.</p> | ||
| <p><a href="#one" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-icon-back ui-btn-icon-left">Back to page "one"</a></p> | ||
| </div><!-- /content --> | ||
|
|
||
| <div data-role="footer"> | ||
| <h4>Page Footer</h4> | ||
| </div><!-- /footer --> | ||
| </div><!-- /page popup --> | ||
|
|
||
| </body> | ||
| </html> |
| @@ -0,0 +1,37 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>Multi-page template</title> | ||
| <link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.3.min.css"> | ||
| <link rel="stylesheet" href="../_assets/css/jqm-demos.css"> | ||
| <link rel="shortcut icon" href="../favicon.ico"> | ||
| <script src="../js/jquery.js"></script> | ||
| <script src="../_assets/js/index.js"></script> | ||
| <script src="../js/jquery.mobile-1.4.3.min.js"></script> | ||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
| <div data-role="page"> | ||
|
|
||
| <div data-role="header"> | ||
| <h1>Single page</h1> | ||
| </div><!-- /header --> | ||
|
|
||
| <div role="main" class="ui-content"> | ||
| <p>This is a single page boilerplate template that you can copy to build your first jQuery Mobile page. Each link or form from here will pull a new page in via Ajax to support the animated page transitions.</p> | ||
| <p>Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.</p> | ||
| <p>This template is standard HTML document with a single "page" container inside, unlike a <a href="../pages-multi-page/" data-ajax="false">multi-page template</a> that has multiple pages within it. We strongly recommend building your site or app as a series of separate pages like this because it's cleaner, more lightweight and works better without JavaScript.</p> | ||
| </div><!-- /content --> | ||
|
|
||
| <div data-role="footer"> | ||
| <h4>Footer content</h4> | ||
| </div><!-- /footer --> | ||
|
|
||
| </div><!-- /page --> | ||
|
|
||
| </body> | ||
| </html> |
| @@ -0,0 +1,80 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>JQM latest - issue template</title> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <link rel="shortcut icon" href="../favicon.ico"> | ||
| <link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.3.min.css"> | ||
| <script src="../js/jquery.js"></script> | ||
| <script src="../js/jquery.mobile-1.4.3.min.js"></script> | ||
| <script> | ||
| // JS | ||
| </script> | ||
| <style> | ||
| #edit-with-js-bin { display: none !important; } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div data-role="page" id="page1" data-theme="a"> | ||
|
|
||
| <div data-role="header"> | ||
| <h1>same page transitions</h1> | ||
| <div data-role="navbar" id="navh1"> | ||
| <ul> | ||
| <li><a href="#page1">fade</a></li> | ||
| <li><a href="#page1">pop</a></li> | ||
| <li><a href="#page1">flip</a></li> | ||
| <li><a href="#page1">turn</a></li> | ||
| <li><a href="#page1">flow</a></li> | ||
| </ul> | ||
| </div> | ||
| </div><!-- /header 1 --> | ||
|
|
||
| <div role="main" class="ui-content"> | ||
| <h1>same page transitions</h1> | ||
| <div>All links within this page navigate to the page itself having the <code>allowSamePageTransition</code> option at <code>changePage()</code> method set to <strong>true</strong>. It seems, just the slide transition raises an issue so the page gets hidden. | ||
| <label><input type="checkbox" id="cb1" data-theme="b"> reverse transition </label> | ||
| <label><input type="checkbox" id="cb2" data-theme="b"> add ui-page-active on pageshow </label> | ||
| </div> | ||
| <div id="p1"></div> | ||
| </div><!-- /content 1 --> | ||
|
|
||
| <div data-role="footer"> | ||
| <div data-role="navbar" id="nav1"> | ||
| <ul> | ||
| <li><a href="#page1">slide</a></li> | ||
| <li><a href="#page1">slidefade</a></li> | ||
| <li><a href="#page1">slideup</a></li> | ||
| <li><a href="#page1">slidedown</a></li> | ||
| <li><a href="#page1">none</a></li> | ||
| </ul> | ||
| </div> | ||
| </div><!-- /footer 1 --> | ||
|
|
||
| <script> | ||
| $('#page1').on('pagecreate', function() { | ||
|
|
||
| $('a').bind('click', function(e) { | ||
| var trans = $(this).text() || 'none', | ||
| rev = !!$('#cb1').attr('checked'); | ||
|
|
||
| $.mobile.changePage('#page1', { transition: trans, | ||
| allowSamePageTransition: true, | ||
| reverse: rev } ); | ||
| $('#p1').text( 'last transition: ' + trans + ' - reverse: ' + rev ); | ||
| }); | ||
| }); | ||
|
|
||
| $('#page1').bind('pagehide', function(e) { | ||
| $('a.ui-btn').removeClass('ui-btn-active'); | ||
| if ( !!$('#cb2').attr('checked') && !$(this).hasClass('ui-btn-active') ) { | ||
| $(this).addClass('ui-page-active'); | ||
| } | ||
| }); | ||
|
|
||
| </script> | ||
|
|
||
| </div><!-- /page 1 --> | ||
| </body> | ||
| </html> |
| @@ -0,0 +1,51 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>JQM latest - issue template</title> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <link rel="shortcut icon" href="../favicon.ico"> | ||
| <link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.3.min.css"> | ||
| <script src="../js/jquery.js"></script> | ||
| <script src="../js/jquery.mobile-1.4.3.min.js"></script> | ||
| <script> | ||
| $('#page1').on('pagecreate', function() { | ||
|
|
||
| $('a').bind('click', function(e) { | ||
| var trans = $(this).text() || 'none', | ||
| rev = !!$('#cb1').attr('checked'); | ||
|
|
||
| $.mobile.changePage('#page1', { transition: trans, | ||
| allowSamePageTransition: true, | ||
| reverse: rev } ); | ||
| $('#p1').text( 'last transition: ' + trans + ' - reverse: ' + rev ); | ||
| }); | ||
| }); | ||
|
|
||
| $('#page1').bind('pagehide', function(e) { | ||
| $('a.ui-btn').removeClass('ui-btn-active'); | ||
| if ( !!$('#cb2').attr('checked') && !$(this).hasClass('ui-btn-active') ) { | ||
| $(this).addClass('ui-page-active'); | ||
| } | ||
| }); | ||
|
|
||
| </script> | ||
| <style> | ||
| #edit-with-js-bin { display: none !important; } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div data-role="page" id="startpage" data-theme="a"> | ||
|
|
||
| <div data-role="header"> | ||
| <h1>same page transitions</h1> | ||
| </div><!-- /header 1 --> | ||
|
|
||
| <div role="main" class="ui-content"> | ||
| <a data-role="button" href="samepagetransition.html">Go to page 2</a> | ||
| </div><!-- /content 1 --> | ||
|
|
||
| </div><!-- /page 1 --> | ||
|
|
||
| </body> | ||
| </html> |
| @@ -0,0 +1,81 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>External and internal panels</title> | ||
| <link rel="shortcut icon" href="../favicon.ico"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.3.min.css"> | ||
| <script src="../js/jquery.js"></script> | ||
| <script src="../js/jquery.mobile-1.4.3.min.js"></script> | ||
| <script> | ||
| $( document ).on( "pagecreate", function() { | ||
| $( "body > [data-role='panel']" ).panel(); | ||
| $( "body > [data-role='panel'] [data-role='listview']" ).listview(); | ||
| }); | ||
| $( document ).one( "pageshow", function() { | ||
| $( "body > [data-role='header']" ).toolbar(); | ||
| $( "body > [data-role='header'] [data-role='navbar']" ).navbar(); | ||
| }); | ||
| </script> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div data-role="header" data-position="fixed" data-theme="a"> | ||
| <h1>External header Page A</h1> | ||
| <a href="#outside" data-icon="bars" data-iconpos="notext">Menu</a> | ||
| <div data-role="navbar"> | ||
| <ul> | ||
| <li><a href="index.html">Page A</a></li> | ||
| <li><a href="page-b.html">Page B</a></li> | ||
| <li><a href="page-c.html">Page C</a></li> | ||
| </ul> | ||
| </div> | ||
| </div><!-- /header --> | ||
|
|
||
| <div data-role="page" id="a"> | ||
|
|
||
| <div role="main" class="ui-content"> | ||
|
|
||
| <h2>Page A</h2> | ||
|
|
||
| <p>Content</p> | ||
|
|
||
| <p>The left panel and fixed header are outside the page. The right panel and fixed footer are inside the pages.</p> | ||
|
|
||
| <a href="#inside-a" class="ui-btn ui-shadow ui-corner-all ui-btn-inline">Open right panel</a> | ||
|
|
||
| </div><!-- /content --> | ||
|
|
||
| <div data-role="panel" id="inside-a" data-position="right" data-display="overlay" data-theme="b"> | ||
| <ul data-role="listview"> | ||
| <li data-icon="back"><a href="#" data-rel="close">Close</a></li> | ||
| <li>Internal panel</li> | ||
| <li>Page A</li> | ||
| <li>Overlay</li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <div data-role="footer" data-position="fixed"> | ||
| <div data-role="navbar"> | ||
| <ul> | ||
| <li><a href="index.html" class="ui-btn-active ui-state-persist">Page A</a></li> | ||
| <li><a href="page-b.html">Page B</a></li> | ||
| <li><a href="page-c.html">Page C</a></li> | ||
| </ul> | ||
| </div> | ||
| </div><!-- /header --> | ||
|
|
||
| </div><!-- /page --> | ||
|
|
||
| <div data-role="panel" id="outside" data-theme="b"> | ||
| <ul data-role="listview"> | ||
| <li data-icon="back"><a href="#" data-rel="close">Close</a></li> | ||
| <li>External panel</li> | ||
| <li>Page A</li> | ||
| <li>Reveal</li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| </body> | ||
| </html> |
| @@ -0,0 +1,81 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>External and internal panels</title> | ||
| <link rel="shortcut icon" href="../favicon.ico"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.3.min.css"> | ||
| <script src="../js/jquery.js"></script> | ||
| <script src="../js/jquery.mobile-1.4.3.min.js"></script> | ||
| <script> | ||
| $( document ).on( "pagecreate", function() { | ||
| $( "body > [data-role='panel']" ).panel(); | ||
| $( "body > [data-role='panel'] [data-role='listview']" ).listview(); | ||
| }); | ||
| $( document ).one( "pageshow", function() { | ||
| $( "body > [data-role='header']" ).toolbar(); | ||
| $( "body > [data-role='header'] [data-role='navbar']" ).navbar(); | ||
| }); | ||
| </script> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div data-role="header" data-position="fixed" data-theme="a"> | ||
| <h1>External header Page B</h1> | ||
| <a href="#outside" data-icon="bars" data-iconpos="notext">Menu</a> | ||
| <div data-role="navbar"> | ||
| <ul> | ||
| <li><a href="index.html">Page A</a></li> | ||
| <li><a href="page-b.html">Page B</a></li> | ||
| <li><a href="page-c.html">Page C</a></li> | ||
| </ul> | ||
| </div> | ||
| </div><!-- /header --> | ||
|
|
||
| <div data-role="page" id="b"> | ||
|
|
||
| <div role="main" class="ui-content"> | ||
|
|
||
| <h2>Page B</h2> | ||
|
|
||
| <p>Content</p> | ||
|
|
||
| <p>The left panel and fixed header are outside the page. The right panel and fixed footer are inside the page.</p> | ||
|
|
||
| <a href="#inside-b" class="ui-btn ui-shadow ui-corner-all ui-btn-inline">Open right panel</a> | ||
|
|
||
| </div><!-- /content --> | ||
|
|
||
| <div data-role="panel" id="inside-b" data-position="right" data-display="push" data-theme="b"> | ||
| <ul data-role="listview"> | ||
| <li data-icon="back"><a href="#" data-rel="close">Close</a></li> | ||
| <li>Internal panel</li> | ||
| <li>Page B</li> | ||
| <li>Push</li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <div data-role="footer" data-position="fixed"> | ||
| <div data-role="navbar"> | ||
| <ul> | ||
| <li><a href="index.html">Page A</a></li> | ||
| <li><a href="page-b.html" class="ui-btn-active ui-state-persist">Page B</a></li> | ||
| <li><a href="page-c.html">Page C</a></li> | ||
| </ul> | ||
| </div> | ||
| </div><!-- /header --> | ||
|
|
||
| </div><!-- /page --> | ||
|
|
||
| <div data-role="panel" id="outside" data-display="overlay" data-theme="b"> | ||
| <ul data-role="listview"> | ||
| <li data-icon="back"><a href="#" data-rel="close">Close</a></li> | ||
| <li>External panel</li> | ||
| <li>Page B</li> | ||
| <li>Overlay</li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| </body> | ||
| </html> |
| @@ -0,0 +1,81 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>External and internal panels</title> | ||
| <link rel="shortcut icon" href="../favicon.ico"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.3.min.css"> | ||
| <script src="../js/jquery.js"></script> | ||
| <script src="../js/jquery.mobile-1.4.3.min.js"></script> | ||
| <script> | ||
| $( document ).on( "pagecreate", function() { | ||
| $( "body > [data-role='panel']" ).panel(); | ||
| $( "body > [data-role='panel'] [data-role='listview']" ).listview(); | ||
| }); | ||
| $( document ).one( "pageshow", function() { | ||
| $( "body > [data-role='header']" ).toolbar(); | ||
| $( "body > [data-role='header'] [data-role='navbar']" ).navbar(); | ||
| }); | ||
| </script> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div data-role="panel" id="outside" data-display="push" data-theme="b"> | ||
| <ul data-role="listview"> | ||
| <li data-icon="back"><a href="#" data-rel="close">Close</a></li> | ||
| <li>External panel</li> | ||
| <li>Page C</li> | ||
| <li>Push</li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <div data-role="header" data-position="fixed" data-theme="a"> | ||
| <h1>External header Page C</h1> | ||
| <a href="#outside" data-icon="bars" data-iconpos="notext">Menu</a> | ||
| <div data-role="navbar"> | ||
| <ul> | ||
| <li><a href="index.html">Page A</a></li> | ||
| <li><a href="page-b.html">Page B</a></li> | ||
| <li><a href="page-c.html">Page C</a></li> | ||
| </ul> | ||
| </div> | ||
| </div><!-- /header --> | ||
|
|
||
| <div data-role="page" id="c"> | ||
|
|
||
| <div data-role="panel" id="inside-c" data-position="right" data-theme="b"> | ||
| <ul data-role="listview"> | ||
| <li data-icon="back"><a href="#" data-rel="close">Close</a></li> | ||
| <li>Internal panel</li> | ||
| <li>Page C</li> | ||
| <li>Reveal</li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <div role="main" class="ui-content"> | ||
|
|
||
| <h2>Page C</h2> | ||
|
|
||
| <p>Content</p> | ||
|
|
||
| <p>The left panel and fixed header are outside the page. The right panel and fixed footer are inside the page.</p> | ||
|
|
||
| <a href="#inside-c" class="ui-btn ui-shadow ui-corner-all ui-btn-inline">Open right panel</a> | ||
|
|
||
| </div><!-- /content --> | ||
|
|
||
| <div data-role="footer" data-position="fixed"> | ||
| <div data-role="navbar"> | ||
| <ul> | ||
| <li><a href="index.html">Page A</a></li> | ||
| <li><a href="page-b.html">Page B</a></li> | ||
| <li><a href="page-c.html" class="ui-btn-active ui-state-persist">Page C</a></li> | ||
| </ul> | ||
| </div> | ||
| </div><!-- /header --> | ||
|
|
||
| </div><!-- /page --> | ||
|
|
||
| </body> | ||
| </html> |
| @@ -0,0 +1,111 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>External panels - 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.4.3.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.4.3.min.js"></script> | ||
| <script id="panel-init"> | ||
| $(function() { | ||
| $( "body>[data-role='panel']" ).panel(); | ||
| }); | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <div data-role="page" class="jqm-demos" data-quicklinks="true"> | ||
|
|
||
| <div data-role="header"> | ||
| <h1>External panels</h1> | ||
| <a href="../panel/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a> | ||
| </div><!-- /header --> | ||
|
|
||
| <div role="main" class="ui-content jqm-content jqm-fullwidth"> | ||
|
|
||
| <h1>External Panels</h1> | ||
|
|
||
| <p>The panels below are all located outside the page. Panels outside of a page must be initalized manually and will not be handled by auto init. Panels outside of pages will remain in the DOM (unless manually removed) as long as you use Ajax navigation, and can be opened or closed from any page.</p> | ||
|
|
||
| <p>Navigate to page 2 to see this behavior. The HTML document for page 2 doesn't contain panel markup, but you can still open the panels.</p> | ||
|
|
||
| <p><a href="page-b.html">Navigate to page 2</a></p> | ||
|
|
||
| <p><strong>Left</strong> panel examples</p> | ||
| <a href="#leftpanel3" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-mini">Overlay</a> | ||
| <a href="#leftpanel1" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-mini">Reveal</a> | ||
| <a href="#leftpanel2" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-mini">Push</a> | ||
|
|
||
| <p><strong>Right</strong> panel examples</p> | ||
| <a href="#rightpanel3" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-mini">Overlay</a> | ||
| <a href="#rightpanel1" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-mini">Reveal</a> | ||
| <a href="#rightpanel2" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-mini">Push</a> | ||
|
|
||
| </div><!-- /content --> | ||
|
|
||
| </div><!-- /page --> | ||
|
|
||
| <div data-role="panel" id="leftpanel1" data-position="left" data-display="reveal" data-theme="a"> | ||
|
|
||
| <h3>Left Panel: Reveal</h3> | ||
| <p>This panel is positioned on the left with the reveal display mode. The panel markup is <em>after</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" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left ui-btn-inline">Close panel</a> | ||
|
|
||
| </div><!-- /leftpanel1 --> | ||
|
|
||
| <!-- leftpanel2 --> | ||
| <div data-role="panel" id="leftpanel2" data-position="left" data-display="push" data-theme="a"> | ||
|
|
||
| <h3>Left Panel: Push</h3> | ||
| <p>This panel is positioned on the left with the push display mode. The panel markup is <em>after</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" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left ui-btn-inline">Close panel</a> | ||
|
|
||
| </div><!-- /leftpanel2 --> | ||
|
|
||
| <!-- leftpanel3 --> | ||
| <div data-role="panel" id="leftpanel3" data-position="left" data-display="overlay" data-theme="a"> | ||
|
|
||
| <h3>Left Panel: Overlay</h3> | ||
| <p>This panel is positioned on the left with the overlay display mode. The panel markup is <em>after</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" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left ui-btn-inline">Close panel</a> | ||
|
|
||
| </div><!-- /leftpanel3 --> | ||
|
|
||
| <!-- rightpanel1 --> | ||
| <div data-role="panel" id="rightpanel1" data-position="right" data-display="reveal" data-theme="b"> | ||
|
|
||
| <h3>Right Panel: Reveal</h3> | ||
| <p>This panel is positioned on the right with the reveal display mode. The panel markup is <em>after</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" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left ui-btn-inline">Close panel</a> | ||
|
|
||
| </div><!-- /rightpanel1 --> | ||
|
|
||
| <!-- rightpanel2 --> | ||
| <div data-role="panel" id="rightpanel2" data-position="right" data-display="push" data-theme="b"> | ||
|
|
||
| <h3>Right Panel: Push</h3> | ||
| <p>This panel is positioned on the right with the push display mode. The panel markup is <em>after</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" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left ui-btn-inline">Close panel</a> | ||
|
|
||
| </div><!-- /rightpanel2 --> | ||
|
|
||
| <!-- rightpanel3 --> | ||
| <div data-role="panel" id="rightpanel3" data-position="right" data-display="overlay" data-theme="b"> | ||
|
|
||
| <h3>Right Panel: Overlay</h3> | ||
| <p>This panel is positioned on the right with the overlay display mode. The panel markup is <em>after</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" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left ui-btn-inline">Close panel</a> | ||
|
|
||
| </div><!-- /rightpanel3 --> | ||
| </body> | ||
| </html> |
| @@ -0,0 +1,44 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>External panels - 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.4.3.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.4.3.min.js"></script> | ||
| </head> | ||
| <body> | ||
| <div data-role="page" class="jqm-demos"> | ||
|
|
||
| <div data-role="header"> | ||
| <h1>External panels</h1> | ||
| <a href="../panel/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a> | ||
| </div><!-- /header --> | ||
|
|
||
| <div role="main" class="ui-content jqm-content jqm-fullwidth"> | ||
|
|
||
| <h1>External Panels - Page 2</h1> | ||
|
|
||
| <p>These panels only exist if you navigated to this page from page 1, because the markup for the panels is in the HTML document of the first page. If you refresh this page the links below will no longer work.</p> | ||
|
|
||
| <p><strong>Left</strong> panel examples</p> | ||
| <a href="#leftpanel3" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-mini">Overlay</a> | ||
| <a href="#leftpanel1" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-mini">Reveal</a> | ||
| <a href="#leftpanel2" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-mini">Push</a> | ||
|
|
||
| <p><strong>Right</strong> panel examples</p> | ||
| <a href="#rightpanel3" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-mini">Overlay</a> | ||
| <a href="#rightpanel1" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-mini">Reveal</a> | ||
| <a href="#rightpanel2" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-mini">Push</a> | ||
|
|
||
| </div><!-- /content --> | ||
|
|
||
| </div><!-- /page --> | ||
|
|
||
| </body> | ||
| </html> |
| @@ -0,0 +1,149 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>Panel fixed positioning - jQuery Mobile Demos</title> | ||
| <link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.3.min.css"> | ||
| <link rel="stylesheet" href="../_assets/css/jqm-demos.css"> | ||
| <link rel="shortcut icon" href="../favicon.ico"> | ||
| <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700"> | ||
| <script src="../js/jquery.js"></script> | ||
| <script src="../_assets/js/index.js"></script> | ||
| <script src="../js/jquery.mobile-1.4.3.min.js"></script> | ||
| </head> | ||
| <body> | ||
| <div data-role="page" class="jqm-demos" id="panel-fixed-page1" data-title="Panel fixed positioning"> | ||
|
|
||
| <div data-role="header" data-position="fixed"> | ||
| <h1>Fixed header</h1> | ||
| <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a> | ||
| <a href="#add-form" data-icon="gear" data-iconpos="notext">Add</a> | ||
| </div><!-- /header --> | ||
|
|
||
| <div role="main" class="ui-content jqm-content jqm-fullwidth"> | ||
|
|
||
| <h1>Panel fixed positioning</h1> | ||
|
|
||
| <p>This is a typical page that has two buttons in the header bar that open panels. The left panel has the push display mode. The right panel opens as overlay. For both panels we set <code>data-position-fixed="true"</code>. We also set position fixed for the header and footer on this page.</p> | ||
|
|
||
| <p>The left panel contains a long menu to demonstrate that the framework will check the panel contents height and unfixes the panel so its content can be scrolled. In the right panel there is a short form that shows the fixed positioning.</p> | ||
|
|
||
| <div data-demo-html="#panel-fixed-page1"></div><!--/demo-html --> | ||
|
|
||
| <br> | ||
| <br> | ||
| <br> | ||
| <br> | ||
| <br> | ||
|
|
||
| <a href="../" data-rel="back" data-ajax="false" class="ui-btn ui-shadow ui-corner-all ui-mini ui-btn-inline ui-icon-carat-l ui-btn-icon-left ui-alt-icon ui-nodisc-icon">Back</a> | ||
|
|
||
| <br> | ||
| <br> | ||
| <br> | ||
| <br> | ||
| <br> | ||
| <br> | ||
| <br> | ||
| <br> | ||
| <br> | ||
| <br> | ||
| <br> | ||
| <br> | ||
| <br> | ||
| <br> | ||
| <br> | ||
| <br> | ||
| <br> | ||
| <br> | ||
| <br> | ||
| <br> | ||
|
|
||
| <p>We made the page a bit longer because you only see the panel fixed positioning if you can scroll the page :-)</p> | ||
|
|
||
| </div><!-- /content --> | ||
|
|
||
| <div data-role="footer" data-position="fixed"> | ||
| <h4>Fixed footer</h4> | ||
| </div><!-- /footer --> | ||
|
|
||
| <div data-role="panel" data-position-fixed="true" data-display="push" data-theme="b" id="nav-panel"> | ||
|
|
||
| <ul data-role="listview"> | ||
| <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li> | ||
| <li><a href="#panel-fixed-page2">Accordion</a></li> | ||
| <li><a href="#panel-fixed-page2">Ajax Navigation</a></li> | ||
| <li><a href="#panel-fixed-page2">Autocomplete</a></li> | ||
| <li><a href="#panel-fixed-page2">Buttons</a></li> | ||
| <li><a href="#panel-fixed-page2">Checkboxes</a></li> | ||
| <li><a href="#panel-fixed-page2">Collapsibles</a></li> | ||
| <li><a href="#panel-fixed-page2">Controlgroup</a></li> | ||
| <li><a href="#panel-fixed-page2">Dialogs</a></li> | ||
| <li><a href="#panel-fixed-page2">Fixed toolbars</a></li> | ||
| <li><a href="#panel-fixed-page2">Flip switch toggle</a></li> | ||
| <li><a href="#panel-fixed-page2">Footer toolbar</a></li> | ||
| <li><a href="#panel-fixed-page2">Form elements</a></li> | ||
| <li><a href="#panel-fixed-page2">Grids</a></li> | ||
| <li><a href="#panel-fixed-page2">Header toolbar</a></li> | ||
| <li><a href="#panel-fixed-page2">Icons</a></li> | ||
| <li><a href="#panel-fixed-page2">Links</a></li> | ||
| <li><a href="#panel-fixed-page2">Listviews</a></li> | ||
| <li><a href="#panel-fixed-page2">Loader overlay</a></li> | ||
| <li><a href="#panel-fixed-page2">Navbar</a></li> | ||
| <li><a href="#panel-fixed-page2">Navbar, persistent</a></li> | ||
| <li><a href="#panel-fixed-page2">Pages</a></li> | ||
| <li><a href="#panel-fixed-page2">New</a></li> | ||
| <li><a href="#panel-fixed-page2">Popup</a></li> | ||
| <li><a href="#panel-fixed-page2">Radio buttons</a></li> | ||
| <li><a href="#panel-fixed-page2">Select</a></li> | ||
| <li><a href="#panel-fixed-page2">Slider, single</a></li> | ||
| <li><a href="#panel-fixed-page2">New</a></li> | ||
| <li><a href="#panel-fixed-page2">New</a></li> | ||
| <li><a href="#panel-fixed-page2">New</a></li> | ||
| <li><a href="#panel-fixed-page2">Text inputs & textarea</a></li> | ||
| <li><a href="#panel-fixed-page2">Transitions</a></li> | ||
| </ul> | ||
|
|
||
| </div><!-- /panel --> | ||
|
|
||
| <div data-role="panel" data-position="right" data-position-fixed="true" data-display="overlay" data-theme="a" id="add-form"> | ||
|
|
||
| <form class="userform"> | ||
|
|
||
| <h2>Login</h2> | ||
|
|
||
| <label for="name">Username:</label> | ||
| <input type="text" name="name" id="name" value="" data-clear-btn="true" data-mini="true"> | ||
|
|
||
| <label for="password">Password:</label> | ||
| <input type="password" name="password" id="password" value="" data-clear-btn="true" autocomplete="off" data-mini="true"> | ||
|
|
||
| <div class="ui-grid-a"> | ||
| <div class="ui-block-a"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-b ui-mini">Cancel</a></div> | ||
| <div class="ui-block-b"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-mini">Save</a></div> | ||
| </div> | ||
| </form> | ||
|
|
||
| </div><!-- /panel --> | ||
|
|
||
| </div><!-- /page --> | ||
|
|
||
| <div data-role="page" id="panel-fixed-page2"> | ||
|
|
||
| <div data-role="header"> | ||
| <h1>Landing page</h1> | ||
| </div><!-- /header --> | ||
|
|
||
| <div role="main" class="ui-content jqm-content"> | ||
|
|
||
| <p>This is just a landing page.</p> | ||
|
|
||
| <a href="#panel-fixed-page1" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-mini ui-icon-back ui-btn-icon-left">Back</a> | ||
|
|
||
| </div><!-- /content --> | ||
|
|
||
| </div><!-- /page --> | ||
|
|
||
| </body> | ||
| </html> |
