mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-21 00:10:24 +00:00
53 lines
No EOL
4.1 KiB
HTML
Executable file
53 lines
No EOL
4.1 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>jQuery Mobile Docs - Intro</title>
|
|
<link rel="stylesheet" media="only all" href="css/all" />
|
|
<script type="text/javascript" src="js/all"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div data-role="page">
|
|
|
|
<div data-role="header">
|
|
<h1>Getting started</h1>
|
|
<a href="index.html" class="ui-back" data-icon="arrow-l">Home</a>
|
|
</div><!-- /header -->
|
|
|
|
<div data-role="content">
|
|
<div class="ui-body ui-body-c">
|
|
|
|
<p>All pages in jQuery Mobile are built with clean, semantic HTML to ensure compatibility with pretty much any web-enabled device. In devices that interpret CSS and JavaScript, jQuery Mobile applies progressive enhancement techniques to unobtrusively transform the page into a rich, interactive experience that leverages the power of jQuery and CSS3. The jQuery Mobile framework is designed to be easy enough to allow designers to build complex mobile-optimized web sites and apps with minimal JavaScript knowledge, yet powerful and extensible enough for experienced developers to build highly customized experiences.Key features include:</p>
|
|
<ul>
|
|
<li>Familiar jQuery syntax and patterns and a simple, markup-driven approach for minimal learning curve</li>
|
|
<li>Very lightweight size (9k compressed for all mobile functionality) minimal image dependencies for speed.</li>
|
|
<li>Progressive enhancement approach brings core content and functionality to all mobile, tablet and deskstop platforms and a rich, installed application-like experience on newer versions of all major mobile device platforms (iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Mobile, bada, MeeGo)</li>
|
|
<li>Accessibility 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>Events are normalized in jQuery Mobile to streamline the process of supporting touch, mouse, and cursor focus-based user input methods with a simple API. </li>
|
|
<li>Powerful theming framework and ThemeRoller application make highly-branded experiences feast and easy to build.</li>
|
|
</ul> </p>
|
|
|
|
<h2>Markup-driven configuration: Mobilize()</h2>
|
|
|
|
<p>The jQuery Mobile library uses a <code>mobilize()</code> function that automatically initializes plugins for all the jQuery Mobile widgets found on a page. HTML5 <code>data-role</code> attributes in HTML markup act as the trigger for the mobilize function. For example, a <code>data-role="listview"</code> attribute on an simple unordered list tells the <code>mobilize()</code> function to apply all the CSS classes and JavaScript behaviors required to transform a list of links into a finger-friendly mobile list view widget. Developers can choose to omit the <code>mobilize()</code> function and write their own tools to trigger the jQuery Mobile plugins, but it is a convenient way to unobtrusively apply the plugins in consistent way.</p>
|
|
|
|
<a href="themes.html" data-role="button" data-icon="arrow-r" data-iconpos="right">jQery Mobile core & mobilize</a>
|
|
|
|
<h2>Theming framework</h2>
|
|
<p>Every layout and widget is designed around a new object-oriented CSS framework to support rich theming of sites and applications built with jQuery Mobile. Theming works similarly to the jQuery UI ThemeRoller system but with a few important improvements:</p>
|
|
|
|
<ul>
|
|
<li>Richer designs are now possible because themes now include multiple color "swatches": 4 bars with matching buttons for each, 3 content areas that can be freely mixed and matched to create visual texture</li>
|
|
<li>Open-ended theming allows for additional theme swatches can be added to a theme to add almost unlimited more variety to designs</li>
|
|
<li>All backgrounds now use CSS3 gradients to dramatically reduce file size and number of server requests</li>
|
|
<li>A simplified icon set only includes the most commonly used icons in either black or white colors to reduce image weight</li>
|
|
</ul>
|
|
|
|
<a href="themes.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Theming documentation</a>
|
|
</div><!-- /ui-body wrapper -->
|
|
</div><!-- /content -->
|
|
|
|
</div><!-- /page -->
|
|
|
|
</body>
|
|
</html> |