Skip to content

Commit 49a3aea

Browse files
ajpianoajpiano
committed
Add title metadata to Getting Started with jQuery Mobile, other minor convention fixes in same.
1 parent dd3f704 commit 49a3aea

File tree

2 files changed

+60
-49
lines changed

2 files changed

+60
-49
lines changed

‎page/jquery-mobile.md

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
---
2-
title: Getting started with jQuery Mobile
3-
level: beginner
2+
title: jQuery Mobile
43
---
54

6-
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.
5+
jQuery Mobile provides a set of touch-friendly UI widgets and an AJAX-powered navigation system to support animated page transitions.
76

‎page/jquery-mobile/getting-started.md

+58-46
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,93 @@
1-
##Create a basic page template
1+
---
2+
title: Getting Started with jQuery Mobile
3+
level: Beginner
4+
---
5+
6+
## Create a basic page template
27

38
Pop open your favorite text editor, paste in the page template below, save and open in a browser. You are now a mobile developer!
49

510
Here's what's in the template. In the `head`, a meta `viewport` 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. jQuery Mobile 1.2 (1.2.0) works with versions of jQuery core from 1.7.0 to 1.8.2.
611

712
In the `body`, a div with a `data-role` of `page` is the wrapper used to delineate a page, and the header bar (`data-role="header"`) and content region (`data-role="content"`) are added inside to create a basic page (these are both optional). These `data-` attributes are HTML5 attributes used throughout jQuery Mobile to transform basic markup into an enhanced and styled widget.
813

9-
<!DOCTYPE html>
10-
<html>
11-
<head>
12-
<title>My Page</title>
13-
<meta name="viewport" content="width=device-width, initial-scale=1">
14-
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
15-
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
16-
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
17-
</head>
18-
<body>
14+
```
15+
<!DOCTYPE html>
16+
<html>
17+
<head>
18+
<title>My Page</title>
19+
<meta name="viewport" content="width=device-width, initial-scale=1">
20+
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
21+
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
22+
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
23+
</head>
24+
<body>
25+
26+
<div data-role="page">
27+
<div data-role="header">
28+
<h1>My Title</h1>
29+
</div><!-- /header -->
1930
20-
<div data-role="page">
21-
<div data-role="header">
22-
<h1>My Title</h1>
23-
</div><!-- /header -->
24-
25-
<div data-role="content">
26-
<p>Hello world</p>
27-
</div><!-- /content -->
31+
<div data-role="content">
32+
<p>Hello world</p>
33+
</div><!-- /content -->
2834
29-
</div><!-- /page -->
35+
</div><!-- /page -->
3036
31-
</body>
32-
</html>
37+
</body>
38+
</html>
39+
```
3340

3441

35-
##Add your content
42+
### Add your content
3643

3744
Inside your content container, you can add any standard HTML elements - headings, lists, paragraphs, etc. You can write your own custom styles to create custom layouts by adding an additional stylesheet to the `head` after the jQuery Mobile stylesheet.
3845

39-
##Make a listview
46+
### Make a listview
4047

4148
jQuery Mobile includes a diverse set of common listviews that are coded as lists with a `data-role="listview"` added. Here is a simple linked list that has a role of `listview`. We're going to make this look like an inset module by adding a `data-inset="true"` and add a dynamic search filter with the `data-filter="true"` attributes.
4249

43-
<ul data-role="listview" data-inset="true" data-filter="true">
44-
<li><a href="#">Acura</a></li>
45-
<li><a href="#">Audi</a></li>
46-
<li><a href="#">BMW</a></li>
47-
<li><a href="#">Cadillac</a></li>
48-
<li><a href="#">Ferrari</a></li>
49-
</ul>
50-
50+
```
51+
<ul data-role="listview" data-inset="true" data-filter="true">
52+
<li><a href="#">Acura</a></li>
53+
<li><a href="#">Audi</a></li>
54+
<li><a href="#">BMW</a></li>
55+
<li><a href="#">Cadillac</a></li>
56+
<li><a href="#">Ferrari</a></li>
57+
</ul>
58+
```
5159

52-
##Add a slider
60+
### Add a slider
5361

5462
The framework contains a full set of form elements that automatically are enhanced into touch-friendly styled widgets. Here's a slider made with the new HTML5 input type of range, no `data-role` needed. Be sure to wrap these in a `form` element and always properly associate a `label` to every form element.
5563

56-
<form>
57-
<label for="slider-0">Input slider:</label>
58-
<input type="range" name="slider" id="slider-0" value="25" min="0" max="100" />
59-
</form>
60-
64+
```
65+
<form>
66+
<label for="slider-0">Input slider:</label>
67+
<input type="range" name="slider" id="slider-0" value="25" min="0" max="100" />
68+
</form>
69+
```
6170
Input slider:
62-
##Make a button
71+
### Make a button
6372

64-
There are a few ways to make buttons, but lets turn a link into a button so it's easy to click. Just start with a link and add a `data-role="button"` attribute to it. You can add an icon with the `data-icon` attribute and optionally set its position with the `data-iconpos` attribute.
73+
There are a few ways to make buttons, but let's turn a link into a button so it's easy to click. Just start with a link and add a `data-role="button"` attribute to it. You can add an icon with the `data-icon` attribute and optionally set its position with the `data-iconpos` attribute.
6574

66-
<a href="#" data-role="button" data-icon="star">Star button</a>
67-
68-
##Play with theme swatches
75+
```
76+
<a href="#" data-role="button" data-icon="star">Star button</a>
77+
```
78+
79+
### Play with theme swatches
6980

7081
jQuery Mobile has a robust theme framework that supports up to 26 sets of toolbar, content and button colors, called a "swatch". Just add a `data-theme="e"` 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.
7182

7283
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 and footers don't inherit, they default to swatch "a").
7384

74-
<a href="#" data-role="button" data-icon="star" data-theme="a">Button</a>
75-
85+
```
86+
<a href="#" data-role="button" data-icon="star" data-theme="a">Button</a>
87+
```
7688
When you're ready to build a custom theme, use ThemeRoller to drag and drop, then download a custom theme.
7789

78-
##Go forth and build stuff
90+
### Go forth and build stuff
7991

8092
This is just scratching the surface of all the cool things you can build with jQuery Mobile with little effort. Be sure to explore linking pages, adding animated page transitions, and creating dialogs. Use the data-attribute reference to try out some of the other `data-` attributes you can play with.
8193

0 commit comments

Comments
 (0)