Skip to content

Commit 96f6894

Browse files
Markus Amalthea Magnusonajpiano
Markus Amalthea Magnuson
authored and
ajpiano
committed
Style fixes to the jQuery Mobile section. Fixes #329.
1 parent 6179e0c commit 96f6894

File tree

3 files changed

+75
-81
lines changed

3 files changed

+75
-81
lines changed

‎page/jquery-mobile.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,4 @@ customFields:
66
value: "th-large"
77
---
88

9-
jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet and desktop devices. This frameworks provides a set of touch-friendly UI widgets and an AJAX-powered navigation system to support animated page transitions.
10-
9+
jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices. This framework provides a set of touch-friendly UI widgets and an AJAX-powered navigation system to support animated page transitions.

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

Lines changed: 45 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -5,86 +5,84 @@ level: Beginner
55

66
jQuery Mobile provides a set of touch-friendly UI widgets and an AJAX-powered navigation system to support animated page transitions. This guide will show you how you can build your first jQuery Mobile application.
77

8-
## Create a basic page template
8+
## Create a Basic Page Template
99

10-
To get started, you can simply paste the template below in your favorite text editor, save and open the document in a browser.
10+
To get started, you can simply paste the template below in your favorite text editor, save, and open the document in a browser.
1111

12-
In the `head` of this template, a meta `viewport` tag sets the screen width to the pixel width of the device. 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.
12+
In the `<head>` of this template, a meta `viewport` tag sets the screen width to the pixel width of the device. 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.
1313

14-
In the `body`, a div with a `data-role` of `page` is the wrapper used to delineate a page. A header bar (`data-role="header"`), a content region (`data-role="content"`) and a footer bar (`data-role="footer"`) are added inside to create a basic page (all three are optional). These `data-` attributes are HTML5 attributes used throughout jQuery Mobile to transform basic markup into an enhanced and styled widget.
14+
In the `<body>`, a div with a `data-role` of `page` is the wrapper used to delineate a page. A header bar (`data-role="header"`), a content region (`data-role="content"`) and a footer bar (`data-role="footer"`) are added inside to create a basic page (all three are optional). These `data-` attributes are HTML5 attributes used throughout jQuery Mobile to transform basic markup into an enhanced and styled widget.
1515

1616
```
17-
<!DOCTYPE html>
17+
<!doctype html>
1818
<html>
19-
<head>
20-
<title>My Page</title>
21-
<meta name="viewport" content="width=device-width, initial-scale=1">
22-
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
23-
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
24-
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
25-
</head>
26-
<body>
27-
28-
<div data-role="page">
29-
<div data-role="header">
30-
<h1>My Title</h1>
31-
</div><!-- /header -->
32-
33-
<div data-role="content">
34-
<p>Hello world</p>
35-
</div><!-- /content -->
36-
37-
<div data-role="footer">
38-
<h4>My Footer</h4>
39-
</div><!-- /header -->
40-
41-
</div><!-- /page -->
42-
43-
</body>
19+
<head>
20+
<title>My Page</title>
21+
<meta name="viewport" content="width=device-width, initial-scale=1">
22+
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
23+
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
24+
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
25+
</head>
26+
<body>
27+
<div data-role="page">
28+
29+
<div data-role="header">
30+
<h1>My Title</h1>
31+
</div><!-- /header -->
32+
33+
<div data-role="content">
34+
<p>Hello world</p>
35+
</div><!-- /content -->
36+
37+
<div data-role="footer">
38+
<h4>My Footer</h4>
39+
</div><!-- /footer -->
40+
41+
</div><!-- /page -->
42+
</body>
4443
</html>
4544
```
4645

46+
### Add Content
4747

48-
### Add content
48+
The next step is to add content inside the content container. Any standard HTML elements – headings, lists, paragraphs, etc. can be added. You can write your own custom styles to create custom layouts by adding an additional stylesheet to the `<head>` after the jQuery Mobile stylesheet.
4949

50-
The next step is to add content inside the content container. Any standard HTML elements - headings, lists, paragraphs, etc can be added. You can write your own custom styles to create custom layouts by adding an additional stylesheet to the `head` after the jQuery Mobile stylesheet.
51-
52-
### Make a listview
50+
### Make a Listview
5351

5452
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`. The `data-inset="true"` attribute makes the listview look like an inset module, while `data-filter="true"` adds a dynamic search filter.
5553

5654
```
5755
<ul data-role="listview" data-inset="true" data-filter="true">
58-
<li><a href="#">Acura</a></li>
59-
<li><a href="#">Audi</a></li>
60-
<li><a href="#">BMW</a></li>
61-
<li><a href="#">Cadillac</a></li>
62-
<li><a href="#">Ferrari</a></li>
56+
<li><a href="#">Acura</a></li>
57+
<li><a href="#">Audi</a></li>
58+
<li><a href="#">BMW</a></li>
59+
<li><a href="#">Cadillac</a></li>
60+
<li><a href="#">Ferrari</a></li>
6361
</ul>
6462
```
6563

66-
### Add a slider
64+
### Add a Slider
6765

68-
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. All form elements must always be properly associated with a `label` and the group of form elements be wrapped in a `form` tag.
66+
The framework contains a full set of form elements that are automatically enhanced into touch-friendly styled widgets. Here's a slider made with the new HTML5 input type of range, no `data-role` needed. All form elements must always be properly associated with a `<label>` and the group of form elements be wrapped in a `<form>` tag.
6967

7068
```
7169
<form>
72-
<label for="slider-0">Input slider:</label>
73-
<input type="range" name="slider" id="slider-0" value="25" min="0" max="100" />
70+
<label for="slider-0">Input slider:</label>
71+
<input type="range" name="slider" id="slider-0" value="25" min="0" max="100" />
7472
</form>
7573
```
7674

77-
### Make a button
75+
### Make a Button
7876

7977
There are a few ways to make buttons. A common one is to 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.
8078

8179
```
8280
<a href="#" data-role="button" data-icon="star">Star button</a>
8381
```
8482

85-
### Choose a theme swatch
83+
### Choose a Theme Swatch
8684

87-
jQuery Mobile has a robust theme framework that supports up to 26 sets of toolbar, content and button colors, called a "swatch". You can 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. Different swatch letters in default theme from a-e can be used to mix and match swatches.
85+
jQuery Mobile has a robust theme framework that supports up to 26 sets of toolbar, content, and button colors, called a "swatch". You can 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. Different swatch letters from a-e in the default theme can be used to mix and match swatches.
8886

8987
If you add the theme swatch to the page, all the widgets inside the content will automatically inherit the theme (headers and footers don't inherit and default to swatch "a").
9088

@@ -94,7 +92,7 @@ If you add the theme swatch to the page, all the widgets inside the content will
9492

9593
If you would like to create a custom theme, you can use [ThemeRoller](http://jquerymobile.com/themeroller/) that allows users to create their own theme through an easy to use drag and drop interface. You will then be able to download and use your newly created theme.
9694

97-
### Go forth and build something
95+
### Go Forth and Build Something
9896

9997
This guide has provided you with a basic structure for a jQuery Mobile page and a few enhanced elements. You can explore the full [jQuery Mobile documentation](http://jquerymobile.com/demos/1.2.0/) to learn about linking pages, adding animated page transitions, and creating dialogs and popups.
10098

0 commit comments

Comments
 (0)