mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-16 22:10:25 +00:00
Re-vamped getting started page, changed CDN refs to 1.0, added 1.0 final banner
This commit is contained in:
toddparker
parent
98b1ed63d8
commit
d1d5e09f95
5 changed files with 55 additions and 65 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
|
@ -31,44 +31,44 @@
|
|||
<p>jQuery Mobile provides a set of touch-friendly UI widgets and an AJAX-powered navigation system to support animated page transitions. Building your first jQuery Mobile page is easy, here's how:</p>
|
||||
|
||||
<h2>Create a basic page template</h2>
|
||||
<p>Pop open your favorite text editor and paste in the <a href="../pages/page-anatomy.html" id="" title="page-anatomy">page template</a> below. In the <code>head</code>, a meta <code>viewport</code> tag and references to jQuery, jQuery Mobile and the mobile theme stylesheet from the CDN are all you need to get started. In the <code>body</code>, add a div with a <code>data-role</code> of <code>page</code> to hold your page contents.</p>
|
||||
<p>Pop open your favorite text editor, paste in the <a href="../pages/page-anatomy.html" id="" title="page-anatomy">page template</a> below, save and open in a browser. You are now a mobile developer!</p>
|
||||
<p>Here's what's in the template. In the <code>head</code>, a meta <code>viewport</code> tag sets the screen width to the pixel width of the device and references to jQuery, jQuery Mobile and the mobile theme stylesheet from the CDN add all the styles and scripts. </p>
|
||||
<p>In the <code>body</code>, a div with a <code>data-role</code> of <code>page</code> is the wrapper used to delineate a page, and the header bar (<code>data-role="header"</code>) and content region (<code>data-role="content"</code>) are added inside to create a basic page (these are both optional). These <code>data-</code> attributes are HTML5 attributes are used throughout jQuery Mobile to transform basic markup into an enhanced and styled widget.</p>
|
||||
|
||||
<pre><code>
|
||||
<strong><!DOCTYPE html>
|
||||
</strong><html>
|
||||
<head>
|
||||
<title>Page Title</title>
|
||||
|
||||
<strong><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
|
||||
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
|
||||
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script></strong>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>My Page</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
|
||||
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
|
||||
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<strong><div data-role="page">
|
||||
</div></strong><!-- /page -->
|
||||
|
||||
<div <strong>data-role="page"</strong>>
|
||||
|
||||
<div <strong>data-role="header"</strong>>
|
||||
<h1>My Title</h1>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div <strong>data-role="content"</strong>>
|
||||
<p>Hello world</p>
|
||||
</div><!-- /content -->
|
||||
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</code></pre>
|
||||
|
||||
|
||||
<h2>Add your HTML content</h2>
|
||||
<p>All the normal <a href="../content/content-html.html">HTML elements</a> and styles work as you'd expect - headings, lists, paragraphs. Write your own custom styles to create custom layouts or designs by adding a custom stylesheet to the head and just go to town. There is no required markup in your page. In fact, even the page wrapper is optional.</p>
|
||||
|
||||
<h2>Make a button</h2>
|
||||
<p>There are a few ways to make <a href="../buttons/buttons-types.html" title="buttons-types">buttons</a>, but lets turn a link into a button so it's easy to click. Just start with a link and add a <code>data-role="button"</code> attribute to it. These special HTML5 <code>data-</code> attributes are used throughout jQuery Mobile to transform basic markup into a widget. You can add an <a href="../buttons/buttons-icons.html">icon</a> with the <code>data-icon</code> attribute and optionally set its position with the <code>data-iconpos</code> attribute.</p>
|
||||
|
||||
<pre><code>
|
||||
<a href="#" <strong>data-role="button" data-icon="star"</strong>>Star button</a>
|
||||
</code></pre>
|
||||
|
||||
<a href="#" data-role="button" data-icon="star">Star button</a>
|
||||
|
||||
<h2>Add your content</h2>
|
||||
<p>Inside your content container, you can add all any standard <a href="../content/content-html.html">HTML elements</a> - headings, lists, paragraphs, etc. You can write your own custom styles to create custom layouts by adding an additional stylesheet to the <code>head</code> after the jQuery Mobile stylesheet.</p>
|
||||
|
||||
<h2>Make a listview</h2>
|
||||
<p>jQuery Mobile includes a diverse set of common <a href="../lists/docs-lists.html" id="" title="docs-lists">listviews</a> that are basically built from lists with a <code>data-role="listview"</code>. Here is a simple linked list that has a role of <code>listview</code>. We're going to make this look like an inset module by adding a <code>data-inset="true"</code> and add a dynamic search filter with, you guessed it, <code>data-filter="true"</code>.</p>
|
||||
<p>jQuery Mobile includes a diverse set of common <a href="../lists/docs-lists.html" id="" title="docs-lists">listviews</a> that are coded as lists with a <code>data-role="listview"</code> added. Here is a simple linked list that has a role of <code>listview</code>. We're going to make this look like an inset module by adding a <code>data-inset="true"</code> and add a dynamic search filter with the <code>data-filter="true"</code> attributes.</p>
|
||||
|
||||
<pre><code>
|
||||
<ul <strong>data-role="listview" data-inset="true" data-filter="true"</strong>>
|
||||
|
|
@ -80,7 +80,6 @@
|
|||
</ul>
|
||||
|
||||
</code></pre>
|
||||
|
||||
<ul data-role="listview" data-inset="true" data-filter="true">
|
||||
<li><a href="#">Acura</a></li>
|
||||
<li><a href="#">Audi</a></li>
|
||||
|
|
@ -89,20 +88,6 @@
|
|||
<li><a href="#">Ferrari</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Make a collapsible block</h2>
|
||||
<p>It's easy to make a <a href="../content/content-collapsible.html" id="" title="content-collapsible">collapsible block</a> that can be toggled open and close to show or hide its content. Simply add the <code>data-role="collapsible"</code> attribute to a div container followed by a header element (H1-H6) and any HTML-Markup. jQuery Mobile will wrap your markup into a container, that is collapsed by default and hidden/shown when its header is clicked. Optionally you can set the content-background and border with the <code>data-content-theme</code> attribute like shown below.</p>
|
||||
|
||||
<pre><code>
|
||||
<div <strong>data-role="collapsible" data-content-theme="c"</strong>>
|
||||
<h3>Click me to expand!</h3>
|
||||
<p>I'm the collapsible content block.</p>
|
||||
</div>
|
||||
</code></pre>
|
||||
|
||||
<div data-role="collapsible" data-content-theme="c">
|
||||
<h3>Click me to expand!</h3>
|
||||
<p>I'm the collapsible content block.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
|
@ -121,25 +106,30 @@
|
|||
<input type="range" name="slider-1" id="slider-0" value="25" min="0" max="100" />
|
||||
</form>
|
||||
|
||||
<h2>Add a toolbar</h2>
|
||||
<p>Add a header <a href="../toolbars/docs-bars.html" id="" title="docs-bars">toolbar</a> by adding a div. Set the <code>data-role</code> to <code>header</code> and add a heading tag inside (any heading from H1-H6 can be used).</p>
|
||||
|
||||
<pre><code><div <strong>data-role="header"</strong>>
|
||||
<h1>My Page</h1>
|
||||
</div></code></pre>
|
||||
|
||||
|
||||
<div data-role="header">
|
||||
<h1>My Page</h1>
|
||||
</div>
|
||||
<h2>Make a button</h2>
|
||||
<p>There are a few ways to make <a href="../buttons/buttons-types.html" title="buttons-types">buttons</a>, but lets turn a link into a button so it's easy to click. Just start with a link and add a <code>data-role="button"</code> attribute to it. You can add an <a href="../buttons/buttons-icons.html">icon</a> with the <code>data-icon</code> attribute and optionally set its position with the <code>data-iconpos</code> attribute.</p>
|
||||
|
||||
<pre><code>
|
||||
<a href="#" <strong>data-role="button" data-icon="star"</strong>>Star button</a>
|
||||
</code></pre>
|
||||
|
||||
<a href="#" data-role="button" data-icon="star">Star button</a>
|
||||
|
||||
|
||||
|
||||
<h2>Tweak the theme</h2>
|
||||
<p>Don't like black? Fine. jQuery Mobile has a robust <a href="../api/themes.html" id="">theme framework</a> that supports up to 26 sets of toolbar, content and button colors, called a "swatch". Just add a <code>data-theme="e"</code> attribute to the header div to turn it yellow. Try different swatch letters in default theme from a-e.</p>
|
||||
<h2>Play with theme swatches</h2>
|
||||
<p>jQuery Mobile has a robust <a href="../api/themes.html" id="">theme framework</a> that supports up to 26 sets of toolbar, content and button colors, called a "swatch". Just add a <code>data-theme="e"</code> attribute to any of the widgets on this page: page, header, list, input for the slider, or button to turn it yellow. Try different swatch letters in default theme from a-e to mix and match swatches. </p>
|
||||
<p>Cool party trick: add the theme swatch to the page and see how all the widgets inside the content will automatically inherit the theme (headers don't inherit, they default to swatch A).</p>
|
||||
|
||||
<div data-role="header" data-theme="e">
|
||||
<h1>My Page</h1>
|
||||
</div>
|
||||
|
||||
<p>Extra credit: try adding a <code>data-theme</code> to any of the other widgets on this page: page wrapper, buttons, lists, even the input for the slider - same deal. </p>
|
||||
<code><a href="#" data-role="button" data-icon="star" <strong>data-theme="a"</strong>>Button</a></code>
|
||||
|
||||
<a href="#" data-role="button" data-icon="star" data-theme="a">data-theme="a"</a>
|
||||
<a href="#" data-role="button" data-icon="star" data-theme="b">data-theme="b"</a>
|
||||
<a href="#" data-role="button" data-icon="star" data-theme="c">data-theme="c"</a>
|
||||
<a href="#" data-role="button" data-icon="star" data-theme="d">data-theme="d"</a>
|
||||
<a href="#" data-role="button" data-icon="star" data-theme="e">data-theme="e"</a>
|
||||
|
||||
<p>When you're ready to build a custom theme, use <a href="http://www.jquerymobile.com/themeroller" rel="external">ThemeRoller</a> to drag and drop, then download a custom theme.</p>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Multi-page template</title>
|
||||
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.css" />
|
||||
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
|
||||
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
|
||||
<script src="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.js"></script>
|
||||
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
|
||||
</head>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -38,9 +38,9 @@
|
|||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.css" />
|
||||
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
|
||||
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
|
||||
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.js"></script>
|
||||
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -90,9 +90,9 @@
|
|||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.css" />
|
||||
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
|
||||
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
|
||||
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.js"></script>
|
||||
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
1.0rc3
|
||||
1.0
|
||||
Loading…
Reference in a new issue