Commit 88c330a1 authored by Lingnan Wu's avatar Lingnan Wu

Add the basic jquery demo in jquery-mobile-1.1.0 and a basic view of...

Add the basic jquery demo in jquery-mobile-1.1.0 and a basic view of jquery-mobile in index.html with nessesary js and css in those 2 files
parent 20bcfec1
This diff is collapsed.
This diff is collapsed.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile: Pages within Pages</title>
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.1.0.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.1.0.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Home</h1>
</div>
<div data-role="content">
<p><a href="#about">About this app</a></p>
</div>
</div>
<div data-role="content">
<p><a href="#about">About this app</a></p>
</div>
</div>
<div data-role="page" id="about">
<div data-role="header">
<h1>About This App</h1>
</div>
<div data-role="content">
<p>This app rocks! <a href="#home">Go home</a></p>
</div>
</div>
</body>
</html>
/* jqm docs css
Beware: lots of last-minute CSS going on in here
cobblers, shoes,
*/
body { background: #dddddd; }
.ui-mobile .type-home .ui-content { margin: 0; background: #e5e5e5 url(../images/jqm-sitebg.png) top center repeat-x; }
.ui-mobile #jqm-homeheader { padding: 40px 10px 0; text-align: center; margin: 0 auto; }
.ui-mobile #jqm-homeheader h1 { margin: 0 0 ; }
.ui-mobile #jqm-homeheader p { margin: .3em 0 0; line-height: 1.3; font-size: .9em; font-weight: bold; color: #666; }
.ui-mobile #jqm-version { text-indent: -99999px; background: url(../images/version.png) top right no-repeat; width: 119px; height: 122px; overflow: hidden; position: absolute; z-index: 50; top: -11px; right: 0; }
.ui-mobile .jqm-themeswitcher { margin: 10px 25px 10px 10px; }
h2 { margin:1.2em 0 .4em 0; }
p code { font-size:1.2em; font-weight:bold; }
h4 code {font-size:1.2em; font-weight:bold; }
dt { font-weight: bold; margin: 2em 0 .5em; }
dt code, dd code { font-size:1.3em; line-height:150%; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
#jqm-homeheader img { width: 235px; }
img { max-width: 100%; }
/* fluid images moved from jquery.mobile.core.css*/
.ui-mobile img {
max-width: 100%;
}
.ui-header .jqm-home { top: 0; }
nav { margin: 0; }
p.intro {
font-size: .96em;
line-height: 1.3;
border-top: 1px solid #75ae18;
border-bottom: 0;
background: none;
margin: 1.5em 0;
padding: 1.5em 15px 0;
}
p.intro strong {
color: #558e08;
}
.footer-docs {
padding: 5px 0;
}
.footer-docs p {
margin-left:15px;
font-weight: normal;
font-size: .9em;
}
.type-interior .content-secondary {
border-right: 0;
border-left: 0;
margin: 10px -15px 0;
background: #fff;
border-top: 1px solid #ccc;
}
.type-home .ui-content {
margin-top: 5px;
}
.type-interior .ui-content {
padding-bottom: 0;
}
.content-secondary .ui-collapsible {
padding: 0 15px 10px;
}
.content-secondary .ui-collapsible-content {
padding: 0;
background: none;
border-bottom: none;
}
.content-secondary .ui-listview {
margin: 0;
}
/* new API additions */
dt {
margin: 35px 0 15px 0;
background-color:#ddd;
font-weight:normal;
}
dt code {
display:inline-block;
font-weight:bold;
color:#56A00E;
padding:3px 7px;
margin-right:10px;
background-color:#fff;
}
dd {
margin-bottom:10px;
}
dd .default { font-weight:bold; }
dd pre {
margin:0 0 0 0;
}
dd code { font-weight: normal; }
dd pre code {
margin:0;
border:none;
font-weight:normal;
font-size:100%;
background-color:transparent;
}
dd h4 { margin:15px 0 0 0; }
.localnav {
margin:0 0 20px 0;
overflow:hidden;
}
.localnav li {
float:left;
}
.localnav .ui-btn-inner {
padding: .6em 10px;
font-size:80%;
}
/* custom dialog for the photos sharing */
.ui-dialog.dialog-actionsheet .ui-dialog-contain {
margin-top: 0;
}
/* F bar theme - just for the docs overview headers */
.ui-bar-f {
border: 1px solid #56A00E;
background: #74b042;
color: #fff;
font-weight: bold;
text-shadow: 0 1px 1px #335413;
background-image: -webkit-gradient(linear, left top, left bottom, from(#74b042), to(#56A00E)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(#74b042, #56A00E); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(#74b042, #56A00E); /* FF3.6 */
background-image: -ms-linear-gradient(#74b042, #56A00E); /* IE10 */
background-image: -o-linear-gradient(#74b042, #56A00E); /* Opera 11.10+ */
background-image: linear-gradient(#74b042, #56A00E);
}
.ui-bar-f,
.ui-bar-f input,
.ui-bar-f select,
.ui-bar-f textarea,
.ui-bar-f button {
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
}
.ui-bar-f,
.ui-bar-f .ui-link-inherit {
color: #fff;
}
.ui-bar-f .ui-link {
color: #fff;
font-weight: bold;
}
.ui-btn-up-f {
border: 1px solid #3B6F07;
background: #56A00E;
font-weight: bold;
color: #fff;
text-shadow: 0 1px 1px #234403;
background-image: -webkit-gradient(linear, left top, left bottom, from(#74b042), to(#56A00E)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(#74b042, #56A00E); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(#74b042, #56A00E); /* FF3.6 */
background-image: -ms-linear-gradient(#74b042, #56A00E); /* IE10 */
background-image: -o-linear-gradient(#74b042, #56A00E); /* Opera 11.10+ */
background-image: linear-gradient(#74b042, #56A00E);
}
.ui-btn-up-f a.ui-link-inherit {
color: #fff;
}
.ui-btn-hover-f {
border: 1px solid #3B6F07;
background: #6EBC1F;
font-weight: bold;
color: #fff;
text-shadow: 0 1px 1px #234403;
background-image: -webkit-gradient(linear, left top, left bottom, from(#8FC963), to(#6EBC1F)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(#8FC963, #6EBC1F); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(#8FC963, #6EBC1F); /* FF3.6 */
background-image: -ms-linear-gradient(#8FC963, #6EBC1F); /* IE10 */
background-image: -o-linear-gradient(#8FC963, #6EBC1F); /* Opera 11.10+ */
background-image: linear-gradient(#8FC963, #6EBC1F);
}
.ui-btn-hover-f a.ui-link-inherit {
color: #fff;
}
.ui-btn-down-f {
border: 1px solid #3B6F07;
background: #3d3d3d;
font-weight: bold;
color: #fff;
text-shadow: 0 1px 1px #234403;
background-image: -webkit-gradient(linear, left top, left bottom, from(#56A00E), to(#64A234)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(#56A00E, #64A234); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(#56A00E, #64A234); /* FF3.6 */
background-image: -ms-linear-gradient(#56A00E, #64A234); /* IE10 */
background-image: -o-linear-gradient(#56A00E, #64A234); /* Opera 11.10+ */
background-image: linear-gradient(#56A00E, #64A234);
}
.ui-btn-down-f a.ui-link-inherit {
color: #fff;
}
.ui-btn-up-f,
.ui-btn-hover-f,
.ui-btn-down-f {
font-family: Helvetica, Arial, sans-serif;
text-decoration: none;
}
/* docs site layout */
@media all and (min-width: 650px){
.type-home .ui-content {
margin-top: 5px;
}
.ui-mobile #jqm-homeheader {
max-width: 340px;
}
.ui-mobile .jqm-themeswitcher {
float: right;
}
p.intro {
margin: 2em 0;
}
.type-home .ui-content,
.type-interior .ui-content {
padding: 0;
background: url(../images/px-ccc.gif) 50% 0 repeat-y;
}
.type-interior .ui-content {
background-position: 45%;
overflow: hidden;
}
.content-secondary {
text-align: left;
float: left;
width: 45%;
background: none;
}
.content-secondary,
.type-interior .content-secondary {
margin: 30px 0 20px 2%;
padding: 20px 4% 0 0;
background: none;
border-top: none;
}
.type-index .content-secondary {
padding: 0;
}
.content-secondary .ui-collapsible {
margin: 0;
padding: 0;
}
.content-secondary .ui-collapsible-content {
border: none;
}
.type-index .content-secondary .ui-listview {
margin: 0;
}
.ui-mobile #jqm-homeheader {
padding: 0;
}
.content-primary {
width: 45%;
float: right;
margin-top: 30px;
margin-right: 1%;
padding-right: 1%;
}
.content-primary ul:first-child {
margin-top: 0;
}
.content-secondary h2 {
position: absolute;
left: -9999px;
}
.type-interior .content-primary {
padding: 1.5em 6% 3em 0;
margin: 0;
}
/* fix up the collapsibles - expanded on desktop */
.content-secondary .ui-collapsible-heading {
display: none;
}
.content-secondary .ui-collapsible-contain {
margin:0;
}
.content-secondary .ui-collapsible-content {
display: block;
margin: 0;
padding: 0;
}
.type-interior .content-secondary .ui-li-divider {
padding-top: 1em;
padding-bottom: 1em;
}
.type-interior .content-secondary {
margin: 0;
padding: 0;
}
}
@media all and (min-width: 750px){
.type-home .ui-content,
.type-interior .ui-content {
background-position: 39%;
}
.content-secondary {
width: 34%;
}
.content-primary {
width: 56%;
padding-right: 1%;
}
.type-interior .ui-content {
background-position: 34%;
}
}
@media all and (min-width: 1200px){
.type-home .ui-content{
background-position: 38.5%;
}
.type-interior .ui-content {
background-position: 30%;
}
.content-secondary {
width: 30%;
padding-right:6%;
margin: 30px 0 20px 5%;
}
.type-interior .content-secondary {
margin: 0;
padding: 0;
}
.content-primary {
width: 50%;
margin-right: 5%;
padding-right: 3%;
}
.type-interior .content-primary {
width: 60%;
}
}
\ No newline at end of file
//quick view source in new window links
$.fn.addSourceLink = function(style){
return $(this).each(function(){
var link = $('<a href="#" data-'+ $.mobile.ns +'inline="true">View Source</a>'),
src = src = $('<div></div>').append( $(this).clone() ).html(),
page = $( "<div data-"+ $.mobile.ns +"role='dialog' data-"+ $.mobile.ns +"theme='a'>" +
"<div data-"+ $.mobile.ns +"role='header' data-"+ $.mobile.ns +"theme='b'>" +
"<a href='#' class='ui-btn-left' data-"+ $.mobile.ns +"icon='delete' data-"+ $.mobile.ns +"iconpos='notext'>Close</a>"+
"<div class='ui-title'>jQuery Mobile Source Excerpt</div>"+
"</div>"+
"<div data-"+ $.mobile.ns +"role='content'></div>"+
"</div>" )
.appendTo( "body" )
.page();
$('<a href="#">View Source</a>')
.buttonMarkup({
icon: 'arrow-u',
iconpos: 'notext'
})
.click(function(){
var codeblock = $('<pre><code></code></pre>');
src = src.replace(/&/gmi, '&amp;').replace(/"/gmi, '&quot;').replace(/>/gmi, '&gt;').replace(/</gmi, '&lt;').replace('data-'+ $.mobile.ns +'source="true"','');
codeblock.find('code').append(src);
var activePage = $(this).parents('.ui-page-active');
page.find('.ui-content').append(codeblock);
$.changePage(page, 'slideup',false);
page.find('.ui-btn-left').click(function(){
$.changePage(activepage, 'slideup',true);
return false;
});
})
.insertAfter(this);
});
};
//set up view source links
$('div').live('pagebeforecreate',function(){
$(this).find('[data-'+ $.mobile.ns +'source="true"]').addSourceLink();
});
\ No newline at end of file
//collapse page navs after use
$(function(){
$('body').delegate('.content-secondary .ui-collapsible-content', 'click', function(){
$(this).trigger("collapse");
});
});
// Turn off AJAX for local file browsing
if ( location.protocol.substr(0,4) === 'file' ||
location.protocol.substr(0,11) === '*-extension' ||
location.protocol.substr(0,6) === 'widget' ) {
// Start with links with only the trailing slash and that aren't external links
var fixLinks = function() {
$( "a[href$='/'], a[href='.'], a[href='..']" ).not( "[rel='external']" ).each( function() {
this.href = $( this ).attr( "href" ).replace( /\/$/, "" ) + "/index.html";
});
};
// fix the links for the initial page
$(fixLinks);
// fix the links for subsequent ajax page loads
$(document).bind( 'pagecreate', fixLinks );
// Check to see if ajax can be used. This does a quick ajax request and blocks the page until its done
$.ajax({
url: '.',
async: false,
isLocal: true
}).error(function() {
// Ajax doesn't work so turn it off
$( document ).bind( "mobileinit", function() {
$.mobile.ajaxEnabled = false;
var message = $( '<div>' , {
'class': "ui-footer ui-bar-e",
style: "overflow: auto; padding:10px 15px;",
'data-ajax-warning': true
});
message
.append( "<h3>Note: Navigation may not work if viewed locally</h3>" )
.append( "<p>The AJAX-based navigation used throughout the jQuery Mobile docs may need to be viewed on a web server to work in certain browsers. If you see an error message when you click a link, try a different browser or <a href='https://github.com/jquery/jquery-mobile/wiki/Downloadable-Docs-Help'>view help</a>.</p>" );
$( document ).bind( "pagecreate", function( event ) {
$( event.target ).append( message );
});
});
});
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Accessibility</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script src="../../js/jquery.js"></script>
<script src="../../docs/_assets/js/jqm-docs.js"></script>
<script src="../../js/jquery.mobile-1.1.0.js"></script>
</head>
<body>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f">
<h1>Accessibility</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<h2>Accessibility</h2>
<p>jQuery Mobile is built upon standard, semantic HTML, allowing pages to be accessible to the broadest range of devices possible. For A-Grade browsers, many of the components in jQuery Mobile leverage techniques such as focus management, keyboard navigation, and HTML attributes specified in the W3C's <a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA</a> specification.</p>
<p>By utilizing these techniques, we do our best to ensure an accessible experience to users with disabilities such as blindness, who may use screen readers (like <em>VoiceOver</em>, on Apple's iPhone device) or other assistive technology to access the web.</p>
</div>
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Overview</li>
<li><a href="../../docs/about/intro.html">Intro to jQuery Mobile</a></li>
<li><a href="../../docs/about/getting-started.html">Quick start guide</a></li>
<li><a href="../../docs/about/features.html">Features</a></li>
<li data-theme="a"><a href="../../docs/about/accessibility.html">Accessibility</a></li>
<li><a href="../../docs/about/platforms.html">Supported platforms</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy; 2011-12 The jQuery Foundation</p>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Features</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script src="../../js/jquery.js"></script>
<script src="../../docs/_assets/js/jqm-docs.js"></script>
<script src="../../js/jquery.mobile-1.1.0.js"></script>
</head>
<body>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f">
<h1>Features</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<h2>Key features:</h2>
<ul>
<li><strong>Built on jQuery core</strong> for familiar and consistent jQuery syntax and minimal learning curve and leverages jQuery UI code and patterns.</li>
<li><strong>Compatible with all major mobile, tablet, e-reader & desktop platforms</strong> - iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Phone 7, MeeGo, Opera Mobile/Mini, Firefox Mobile, Kindle, Nook, and all modern browsers with graded levels of support.</li>
<li><strong>Lightweight size</strong> and minimal image dependencies for speed.</li>
<li><strong>Modular architecture</strong> for creating custom builds that are optimized to only include the features needed for a particular application</li>
<li><strong>HTML5 Markup-driven configuration</strong> of pages and behavior for fast development and minimal required scripting.</li>
<li><strong>Progressive enhancement</strong> approach brings core content and functionality to all mobile, tablet and desktop platforms and a rich, installed application-like experience on newer mobile platforms.</li>
<li><strong>Responsive design</strong> techniques and tools allow the same underlying codebase to automatically scale from smartphone to desktop-sized screens</li>
<li><strong>Powerful Ajax-powered navigation system</strong> to enable animated page transitions while maintaining back button, bookmarking and and clean URLs though pushState. </li>
<li><strong>Accessibility</strong> features such as WAI-ARIA are also included to ensure that the pages work for screen readers (e.g. VoiceOver in iOS) and other assistive technologies.</li>
<li><strong>Touch and mouse event support</strong> streamline the process of supporting touch, mouse, and cursor focus-based user input methods with a simple API. </li>
<li><strong>Unified UI widgets</strong> for common controls enhance native controls with touch-optimized, themable controls that are platform-agnostic and easy to use.</li>
<li><strong>Powerful theming framework</strong> and the <a href="http://www.jquerymobile.com/themeroller" rel="external">ThemeRoller</a> application make highly-branded experiences easy to build.</li>
</ul>
</div>
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Overview</li>
<li><a href="../../docs/about/intro.html">Intro to jQuery Mobile</a></li>
<li><a href="../../docs/about/getting-started.html">Quick start guide</a></li>
<li data-theme="a"><a href="../../docs/about/features.html">Features</a></li>
<li><a href="../../docs/about/accessibility.html">Accessibility</a></li>
<li><a href="../../docs/about/platforms.html">Supported platforms</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy; 2011-12 The jQuery Foundation</p>
</div>
</div><!-- /page -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Mobile Framework - About</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script src="../../js/jquery.js"></script>
<script src="../../docs/_assets/js/jqm-docs.js"></script>
<script src="../../js/jquery.mobile-1.1.0.js"></script>
</head>
<body>
<div data-role="page" class="type-index">
<div data-role="header" data-theme="f">
<h1>About jQuery Mobile</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
<li data-role="list-divider">Overview</li>
<li><a href="intro.html">Intro to jQuery Mobile</a></li>
<li><a href="getting-started.html">Quick start guide</a></li>
<li><a href="features.html">Features</a></li>
<li><a href="accessibility.html">Accessibility</a></li>
<li><a href="platforms.html">Supported platforms</a></li>
</ul>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Intro</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script src="../../js/jquery.js"></script>
<script src="../../docs/_assets/js/jqm-docs.js"></script>
<script src="../../js/jquery.mobile-1.1.0.js"></script>
</head>
<body>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f">
<h1>Introduction</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<h2>jQuery Mobile Overview</h2>
<p>jQuery’s mobile strategy can be summarized simply: A unified user interface system that works seamlessly across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Focused on a <a href="features.html">feature-rich</a> but lightweight codebase built on progressive enhancement with a flexible, <a href="../api/themes.html">theming system</a> and <a href="http://www.jquerymobile.com/themeroller" target="_new">ThemeRoller tool</a>. </p>
<p>The framework includes an <a href="../pages/page-navmodel.html">Ajax navigation</a> system that brings animated page <a href="../pages/page-transitions.html">transitions</a> and a core set of UI widgets: <a href="../pages/page-anatomy.html">pages</a>, <a href="../pages/page-dialogs.html">dialogs</a>, <a href="../toolbars/docs-bars.html">toolbars</a>, <a href="../lists/docs-lists.html">listviews</a>, <a href="../buttons/buttons-types.html">buttons</a> with <a href="../buttons/buttons-icons.html">icons</a>, <a href="../forms/forms-all.html">form elements</a>, <a href="../content/content-collapsible-set.html">accordions</a>, <a href="../content/content-collapsible.html">collapsibles</a>, and more.</p>
<p>The critical difference with our approach is the <a href="platforms.html">wide variety of mobile platforms we’re targeting</a> with jQuery Mobile so no browser or device is left behind. We've also focused on making jQuery Mobile <a href="getting-started.html">easy to learn</a> with a simple, <a href="../api/data-attributes.html">markup-based system</a> to applying behavior and theming. For more advanced developers, there is a rich API of <a href="../api/globalconfig.html">global configuration options</a>, <a href="../api/events.html" id="" title="events">events</a>, and <a href="../api/methods.html" id="" title="methods">methods</a> to <a href="../pages/page-scripting.html" id="" title="page-scripting">apply scripting</a>, <a href="../pages/page-dynamic.html" id="" title="page-dynamic">generate dynamic pages</a>, and even <a href="../pages/phonegap.html" id="" title="phonegap">build native apps</a> with tools like PhoneGap.</p>
<p>To make this broad support possible, all pages in jQuery Mobile are built on a foundation of <strong>clean, semantic HTML</strong> to ensure compatibility with pretty much any web-enabled device. In devices that interpret CSS and JavaScript, jQuery Mobile applies <strong>progressive enhancement techniques</strong> to unobtrusively transform the semantic page into a rich, interactive experience that leverages the power of jQuery and CSS. <a href="accessibility.html">Accessibility features</a> such as WAI-ARIA are tightly integrated throughout the framework to provide support for screen readers and other assistive technologies.</p>
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Overview</li>
<li data-theme="a"><a href="../../docs/about/intro.html">Intro to jQuery Mobile</a></li>
<li><a href="../../docs/about/getting-started.html">Quick start guide</a></li>
<li><a href="../../docs/about/features.html">Features</a></li>
<li><a href="../../docs/about/accessibility.html">Accessibility</a></li>
<li><a href="../../docs/about/platforms.html">Supported platforms</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy; 2011-12 The jQuery Foundation</p>
</div>
</div><!-- /page -->
</body>
</html>
\ No newline at end of file
This diff is collapsed.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Mobile Framework - API</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script src="../../js/jquery.js"></script>
<script src="../../docs/_assets/js/jqm-docs.js"></script>
<script src="../../js/jquery.mobile-1.1.0.js"></script>
</head>
<body>
<div data-role="page" class="type-index">
<div data-role="header" data-theme="f">
<h1>API</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
<li data-role="list-divider">API</li>
<li><a href="globalconfig.html">Configuring defaults</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="methods.html">Methods &amp; Utilities</a></li>
<li><a href="data-attributes.html">Data attribute reference</a></li>
<li><a href="themes.html">Theme framework</a></li>
</ul>
</div>
</div>
</body>
</html>
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment