From 88c8fcb1331e77a6c7c340d97dbc790ad3132474 Mon Sep 17 00:00:00 2001 From: Todd Parker Date: Wed, 13 Oct 2010 13:43:45 -0400 Subject: [PATCH 1/7] new content docs pages added --- docs/content/api-content.html | 36 ++++++++ docs/content/content-all.html | 27 ++++++ docs/content/content-themes.html | 29 +++++++ docs/content/docs-content.html | 141 +++++++++++++++++++++++++++++++ docs/content/index.html | 36 ++++++++ 5 files changed, 269 insertions(+) create mode 100755 docs/content/api-content.html create mode 100755 docs/content/content-all.html create mode 100755 docs/content/content-themes.html create mode 100755 docs/content/docs-content.html create mode 100755 docs/content/index.html diff --git a/docs/content/api-content.html b/docs/content/api-content.html new file mode 100755 index 00000000..2db939d7 --- /dev/null +++ b/docs/content/api-content.html @@ -0,0 +1,36 @@ + + + + jQuery Mobile Docs - Content formatting + + + + + +
+ +
+

Content formatting API

+
+ +
+ +

Dependencies

+

To be documented

+ +

Options

+

To be documented

+ +

Methods

+

To be documented

+ +

Known Issues

+

To be documented

+ + + +
+
+ + + \ No newline at end of file diff --git a/docs/content/content-all.html b/docs/content/content-all.html new file mode 100755 index 00000000..0bcb2f1b --- /dev/null +++ b/docs/content/content-all.html @@ -0,0 +1,27 @@ + + + + jQuery Mobile Docs - Content formatting + + + + + + +
+ +
+

Content formatting

+
+ +
+ +

to do

+ + + +
+
+ + + \ No newline at end of file diff --git a/docs/content/content-themes.html b/docs/content/content-themes.html new file mode 100755 index 00000000..48c1881f --- /dev/null +++ b/docs/content/content-themes.html @@ -0,0 +1,29 @@ + + + + jQuery Mobile Docs - Content formatting + + + + + + +
+ +
+

Theming content

+
+ +
+ +

Theming

+ +

To do...

+ + + +
+
+ + + \ No newline at end of file diff --git a/docs/content/docs-content.html b/docs/content/docs-content.html new file mode 100755 index 00000000..71a31011 --- /dev/null +++ b/docs/content/docs-content.html @@ -0,0 +1,141 @@ + + + + jQuery Mobile Docs - Content formatting + + + + + + +
+ +
+

Content formatting

+
+ +
+ +

jQuery Mobile provides a number of tools and widgets to help you format content for mobile.

+ +

HTML markup

+ +

Our goal is to leave the main content area pretty much unstyled except for adding in a bit of padding and applying the theme font family and color. We don't use CSS resets or a lot of custom styles because standard HTML markup is provides a lot of visual texture out of the box. By taking a light hand with content styling, it gives designers and developers a clean slate to work with intsead of fighting against a lot of complex styles. Here is what standard HTML markup looks like by default:

+ +

H1 Heading

+

H2 Heading

+

H3 Heading

+

H4 Heading

+
H5 Heading
+
H1 Heading
+ +

This is a paragraph that contains strong, emphasized and linked text.

+ +
How about some blockquote action with a cite
+ +

This is another paragraph of text so you can see how HTML markup works in content.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Flight Schedule
Flight:From:To:Departure:Arrival:
Total: 3 flights
JetBlue 983Boston (BOS)New York (JFK)6:30am9:48am
JetBlue 354Boston (BOS)Los Angeles (LAX)6:30am9:48am
JetBlue 465Boston (BOS)Portland (PDX)6:30am9:48am
+ +
    +
  • Unordered list item 1
    • +
  • Unordered list item 1
    • +
  • Unordered list item 1
    • +
+ +
    +
  • Ordered list item 1
    • +
  • Ordered list item 1
    • +
  • Ordered list item 1
    • +
+ +
+
Definition term
+
I'm the definition text
+
Definition term
+
I'm the definition text
+ + +

Collapsible panels

+ +

To create a collapsible block of content, create a container and add the data-role="collapsible" attribute.

+ +

Directly inside this container, add any header element (H1-H6). The framework will style the header to look like a clickable button and add a "+" icon to the left to indicate it's expandable.

+ +

After the heading, add any HTML markup you want to be collapsible. The framework will wrap all this markup in a container that will be hidden or shown when the heading is clicked.

+ +
		
+<div data-role="collapsible">
+	<h3>I'm a header</h3>
+	<p>I'm the collapsible content.</p>
+</div>
+
+ + +

By default, the content will be expaneded. To collapse the content when the page loads, add the data-state="collapsed" attribute to the wrapper.

+ + +<div data-role="collapsible" data-state="collapsed"> + + +

This will create this widget:

+ + +
+

I'm a header

+

I'm the collapsible content.

+
+ +

The collapsible content is minimally styled -- we just add a bit of margin between the bar and content but you can add custom styles to tweak the appearance of the collapsible container or heading button.

+ + +

Multi-column grids

+ + +
+
+ + + \ No newline at end of file diff --git a/docs/content/index.html b/docs/content/index.html new file mode 100755 index 00000000..e9743a98 --- /dev/null +++ b/docs/content/index.html @@ -0,0 +1,36 @@ + + + + jQuery Mobile Docs - Content formatting + + + + + + +
+ +
+

Content formatting elements

+
+ +
+

The contents of the page can be anything you want and we designed the styes to respect standard HTML formatting.

+ + + + + +
+
+ + + \ No newline at end of file From 0cee4ac28296bb26d50e7b6d57f1366e791f551b Mon Sep 17 00:00:00 2001 From: Todd Parker Date: Wed, 13 Oct 2010 13:44:56 -0400 Subject: [PATCH 2/7] new form docs --- docs/forms/docs-forms.html | 16 +++++++++-- docs/forms/forms-all.html | 55 ++++++++++++-------------------------- 2 files changed, 31 insertions(+), 40 deletions(-) diff --git a/docs/forms/docs-forms.html b/docs/forms/docs-forms.html index 8c9e5a5e..1eb9b014 100755 --- a/docs/forms/docs-forms.html +++ b/docs/forms/docs-forms.html @@ -16,8 +16,20 @@
-

Button basics

-

To do...

+

jQuery Mobile provides a complete set of finger-friendly form elements that are based on native HTML form elements.

+ +

Form setup

+

A form alwaysbegins with a standard form tag

+ +

The collapsible panels are marked up as either heading/content, or legend/fieldset combinations. Helper text on the toggle links allows them to make sense on a screen reader.

+ +

Text inputs and textareas are largely left alone, aside from having some theme classes applied. Textareas auto-grow using Brandon Aaron's expandable plugin, eliminating the need to 2-finger scroll a textarea on a mobile device.

+ +

The radio and checkbox controls below use standard input/label markup, but are styled to be more touch-friendly. The styled control you see is actually the label element, which sits over the real input, so if images fail to load, you'll still have a functional control. In most browsers, clicking the label automatically triggers a click on the input, but we've had to trigger the update manually for a few mobile browsers that don't do this natively. On the desktop, these controls are keyboard and screen-reader accessible. The horizontal toggles for "cache settings" and "font styling" are also just sets of checkboxes and radios with icons disabled.

+ +

The select menus are driven off native select elements, but the native selects are hidden from view and replaced with more style-friendly markup. The replacement buttons and menus are ARIA-enabled and are keyboard accessible on the desktop as well. When clicked, if the menu has room it will appear as an overlay listbox, but if there are too many options to fit in the window without scrolling, the page content is wrapped in a div and hidden, and the menu is appended after that div. This lets us take advantage of native scrolling while the menu is in use. Try the third select menu to see this behavior in action.

+ +

The submit buttons are marked up as both input[type=submit] and button elements in the source, but we're generating anchor-based buttons in their place in order to take advantage of consistent styling across mobile browsers. The original buttons are still on the page, hidden from view, and clicking the replacement button will trigger a click on the original element, so the form can be submitted normally.

diff --git a/docs/forms/forms-all.html b/docs/forms/forms-all.html index be268cc4..439dc945 100755 --- a/docs/forms/forms-all.html +++ b/docs/forms/forms-all.html @@ -18,25 +18,14 @@
-
-

Demo description

-

This page contains various progressive-enhancement driven form controls. Native elements are sometimes hidden from view, but their values are maintained so the form can be submitted normally. In theory, browsers that don't support the custom controls will still get a usable experience.

-

The collapsible panels are marked up as either heading/content, or legend/fieldset combinations. Helper text on the toggle links allows them to make sense on a screen reader.

+

This page contains various progressive-enhancement driven form controls. Native elements are sometimes hidden from view, but their values are maintained so the form can be submitted normally. In browsers that don't support the custom controls, they will still have a usable experience because these are all based on native form elements.

-

Text inputs and textareas are largely left alone, aside from having some theme classes applied. Textareas auto-grow using Brandon Aaron's expandable plugin, eliminating the need to 2-finger scroll a textarea on a mobile device.

- -

The radio and checkbox controls below use standard input/label markup, but are styled to be more touch-friendly. The styled control you see is actually the label element, which sits over the real input, so if images fail to load, you'll still have a functional control. In most browsers, clicking the label automatically triggers a click on the input, but we've had to trigger the update manually for a few mobile browsers that don't do this natively. On the desktop, these controls are keyboard and screen-reader accessible. The horizontal toggles for "cache settings" and "font styling" are also just sets of checkboxes and radios with icons disabled.

- -

The select menus are driven off native select elements, but the native selects are hidden from view and replaced with more style-friendly markup. The replacement buttons and menus are ARIA-enabled and are keyboard accessible on the desktop as well. When clicked, if the menu has room it will appear as an overlay listbox, but if there are too many options to fit in the window without scrolling, the page content is wrapped in a div and hidden, and the menu is appended after that div. This lets us take advantage of native scrolling while the menu is in use. Try the third select menu to see this behavior in action.

- -

The submit buttons are marked up as both input[type=submit] and button elements in the source, but we're generating anchor-based buttons in their place in order to take advantage of consistent styling across mobile browsers. The original buttons are still on the page, hidden from view, and clicking the replacement button will trigger a click on the original element, so the form can be submitted normally.

+ -
- -
+
Text input controls
@@ -46,6 +35,10 @@
+
+ + +
@@ -57,11 +50,6 @@
-
- - -
-
-
- - -
-
+

Radio toggles

@@ -101,22 +82,20 @@
-
-
Same with theme change: - + - +
-
+

Checkboxes

@@ -154,10 +133,10 @@ -
+
Select menus
- + + +
-
+
+
From cbd57fd77e6843964b29778ec0b754a657c80d93 Mon Sep 17 00:00:00 2001 From: Todd Parker Date: Wed, 13 Oct 2010 13:49:01 -0400 Subject: [PATCH 3/7] fixed broken experiments links --- index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index a3bb5a6b..c0a87131 100755 --- a/index.html +++ b/index.html @@ -39,9 +39,9 @@
    From 42e26a509f95c5ea4c302d6a79c070cf743f5ee8 Mon Sep 17 00:00:00 2001 From: Todd Parker Date: Wed, 13 Oct 2010 13:50:13 -0400 Subject: [PATCH 4/7] adjusted theme letter --- experiments/api-viewer/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/experiments/api-viewer/index.html b/experiments/api-viewer/index.html index 77fd7f53..31201b36 100644 --- a/experiments/api-viewer/index.html +++ b/experiments/api-viewer/index.html @@ -16,7 +16,7 @@
    -
      +
      • Ajax

        • jQuery.ajax()

          Perform an asynchronous HTTP (Ajax) request.

          • From 5882774b5e2f877e9cf34fd6b892b16cacdc7761 Mon Sep 17 00:00:00 2001 From: Todd Parker Date: Wed, 13 Oct 2010 14:11:23 -0400 Subject: [PATCH 5/7] new html formatting page --- docs/content/content-html.html | 98 ++++++++++++++++++++++++++++++++++ 1 file changed, 98 insertions(+) create mode 100755 docs/content/content-html.html diff --git a/docs/content/content-html.html b/docs/content/content-html.html new file mode 100755 index 00000000..e69572b0 --- /dev/null +++ b/docs/content/content-html.html @@ -0,0 +1,98 @@ + + + + jQuery Mobile Docs - Content formatting + + + + + + + + +
          + +
          +

          HTML Formatting

          +
          + +
          + + + + +

          Our goal is to leave the main content area pretty much unstyled except for adding in a bit of padding and applying the theme font family and color. Here is what standard HTML markup looks like by default:

          + +

          H1 Heading

          +

          H2 Heading

          +

          H3 Heading

          +

          H4 Heading

          +
          H5 Heading
          +
          H1 Heading
          + +

          This is a paragraph that contains strong, emphasized and linked text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.

          + +
          How about some blockquote action with a cite
          + +

          This is another paragraph of text so you can see how HTML markup works in content. This is another paragraph of text so you can see how HTML markup works in content. This is another paragraph of text so you can see how HTML markup works in content.

          + +
            +
          • Unordered list item 1
            • +
          • Unordered list item 1
            • +
          • Unordered list item 1
            • +
          + +
            +
          • Ordered list item 1
            • +
          • Ordered list item 1
            • +
          • Ordered list item 1
            • +
          + +
          +
          Definition term
          +
          I'm the definition text
          +
          Definition term
          +
          I'm the definition text
          +
          + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
          Flight Schedule
          Flight:From:To:
          Total: 3 flights
          JetBlue 983Boston (BOS)New York (JFK)
          JetBlue 354San Francisco (SFO)Los Angeles (LAX)
          JetBlue 465New York (JFK)Portland (PDX)
          + + +
          +
          + + + \ No newline at end of file From d846dcffb10e882231014478a9f3942ae06b4d32 Mon Sep 17 00:00:00 2001 From: Todd Parker Date: Wed, 13 Oct 2010 14:11:33 -0400 Subject: [PATCH 6/7] linked up html page --- docs/content/docs-content.html | 78 +--------------------------------- 1 file changed, 2 insertions(+), 76 deletions(-) diff --git a/docs/content/docs-content.html b/docs/content/docs-content.html index 71a31011..c433ccc4 100755 --- a/docs/content/docs-content.html +++ b/docs/content/docs-content.html @@ -20,83 +20,9 @@

          HTML markup

          -

          Our goal is to leave the main content area pretty much unstyled except for adding in a bit of padding and applying the theme font family and color. We don't use CSS resets or a lot of custom styles because standard HTML markup is provides a lot of visual texture out of the box. By taking a light hand with content styling, it gives designers and developers a clean slate to work with intsead of fighting against a lot of complex styles. Here is what standard HTML markup looks like by default:

          +

          Our goal is to leave the main content area pretty much unstyled except for adding in a bit of padding and applying the theme font family and color. We don't use CSS resets or a lot of custom styles because standard HTML markup is provides a lot of visual texture out of the box. By taking a light hand with content styling, it gives designers and developers a clean slate to work with instead of fighting against a lot of complex styles. Here is what standard HTML markup looks like by default:

          -

          H1 Heading

          -

          H2 Heading

          -

          H3 Heading

          -

          H4 Heading

          -
          H5 Heading
          -
          H1 Heading
          - -

          This is a paragraph that contains strong, emphasized and linked text.

          - -
          How about some blockquote action with a cite
          - -

          This is another paragraph of text so you can see how HTML markup works in content.

          - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
          Flight Schedule
          Flight:From:To:Departure:Arrival:
          Total: 3 flights
          JetBlue 983Boston (BOS)New York (JFK)6:30am9:48am
          JetBlue 354Boston (BOS)Los Angeles (LAX)6:30am9:48am
          JetBlue 465Boston (BOS)Portland (PDX)6:30am9:48am
          - -
            -
          • Unordered list item 1
            • -
          • Unordered list item 1
            • -
          • Unordered list item 1
            • -
          - -
            -
          • Ordered list item 1
            • -
          • Ordered list item 1
            • -
          • Ordered list item 1
            • -
          - -
          -
          Definition term
          -
          I'm the definition text
          -
          Definition term
          -
          I'm the definition text
          - + View default HTML rendering

          Collapsible panels

          From 4375b3cb0cb74af4192c09b594596a0416619842 Mon Sep 17 00:00:00 2001 From: Todd Parker Date: Wed, 13 Oct 2010 14:14:40 -0400 Subject: [PATCH 7/7] added link to html demo --- docs/content/index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/content/index.html b/docs/content/index.html index e9743a98..7d6e48b0 100755 --- a/docs/content/index.html +++ b/docs/content/index.html @@ -27,6 +27,8 @@