Permalink
Browse files

Docs: replaced special character apostrophes by basic ones (consisten…

…cy).
  • Loading branch information...
1 parent 79513b9 commit 88468aad4a1002bfefff52440a6e7dd6fe64ca16 @jaspermdegroot jaspermdegroot committed Sep 26, 2012
View
@@ -28,10 +28,10 @@ <h1>Introduction</h1>
<h2>jQuery Mobile Overview</h2>
- <p>jQuerys mobile strategy can be summarized simply: A unified user interface system that works seamlessly across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Focused on a <a href="features.html">feature-rich</a> but lightweight codebase built on progressive enhancement with a flexible <a href="../api/themes.html">theming system</a> and <a href="http://www.jquerymobile.com/themeroller" target="_new">ThemeRoller tool</a>. </p>
+ <p>jQuery's mobile strategy can be summarized simply: A unified user interface system that works seamlessly across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Focused on a <a href="features.html">feature-rich</a> but lightweight codebase built on progressive enhancement with a flexible <a href="../api/themes.html">theming system</a> and <a href="http://www.jquerymobile.com/themeroller" target="_new">ThemeRoller tool</a>. </p>
<p>The framework includes an <a href="../pages/page-navmodel.html">Ajax navigation</a> system that brings animated page <a href="../pages/page-transitions.html">transitions</a> and a core set of UI widgets: <a href="../pages/page-anatomy.html">pages</a>, <a href="../pages/dialog/index.html">dialogs</a>, <a href="../toolbars/docs-bars.html">toolbars</a>, <a href="../lists/docs-lists.html">listviews</a>, <a href="../buttons/buttons-types.html">buttons</a> with <a href="../buttons/buttons-icons.html">icons</a>, <a href="../forms/forms-all.html">form elements</a>, <a href="../content/content-collapsible-set.html">accordions</a>, <a href="../content/content-collapsible.html">collapsibles</a>, and more.</p>
- <p>The critical difference with our approach is the <a href="platforms.html">wide variety of mobile platforms we’re targeting</a> with jQuery Mobile so no browser or device is left behind. We've also focused on making jQuery Mobile <a href="getting-started.html">easy to learn</a> with a simple, <a href="../api/data-attributes.html">markup-based system</a> to applying behavior and theming. For more advanced developers, there is a rich API of <a href="../api/globalconfig.html">global configuration options</a>, <a href="../api/events.html" id="" title="events">events</a>, and <a href="../api/methods.html" id="" title="methods">methods</a> to <a href="../pages/page-scripting.html" id="" title="page-scripting">apply scripting</a>, <a href="../pages/page-dynamic.html" id="" title="page-dynamic">generate dynamic pages</a>, and even <a href="../pages/phonegap.html" id="" title="phonegap">build native apps</a> with tools like PhoneGap.</p>
+ <p>The critical difference with our approach is the <a href="platforms.html">wide variety of mobile platforms we're targeting</a> with jQuery Mobile so no browser or device is left behind. We've also focused on making jQuery Mobile <a href="getting-started.html">easy to learn</a> with a simple, <a href="../api/data-attributes.html">markup-based system</a> to applying behavior and theming. For more advanced developers, there is a rich API of <a href="../api/globalconfig.html">global configuration options</a>, <a href="../api/events.html" id="" title="events">events</a>, and <a href="../api/methods.html" id="" title="methods">methods</a> to <a href="../pages/page-scripting.html" id="" title="page-scripting">apply scripting</a>, <a href="../pages/page-dynamic.html" id="" title="page-dynamic">generate dynamic pages</a>, and even <a href="../pages/phonegap.html" id="" title="phonegap">build native apps</a> with tools like PhoneGap.</p>
<p>To make this broad support possible, all pages in jQuery Mobile are built on a foundation of <strong>clean, semantic HTML</strong> to ensure compatibility with pretty much any web-enabled device. In devices that interpret CSS and JavaScript, jQuery Mobile applies <strong>progressive enhancement techniques</strong> to unobtrusively transform the semantic page into a rich, interactive experience that leverages the power of jQuery and CSS. <a href="accessibility.html">Accessibility features</a> such as WAI-ARIA are tightly integrated throughout the framework to provide support for screen readers and other assistive technologies.</p>
View
@@ -56,7 +56,7 @@ <h2>Touch events</h2>
<dd><p>Triggers when a horizontal drag of 30px or more (and less than 75px vertically) occurs within 1 second duration but these can be configured:</p>
<ul>
<li><code>$.event.special.swipe.scrollSupressionThreshold</code> (default: 10px) – More than this horizontal displacement, and we will suppress scrolling.</li>
- <li><code>$.event.special.swipe.durationThreshold</code> (default: 1000ms) – More time than this, and it isnt a swipe.</li>
+ <li><code>$.event.special.swipe.durationThreshold</code> (default: 1000ms) – More time than this, and it isn't a swipe.</li>
<li><code>$.event.special.swipe.horizontalDistanceThreshold</code> (default: 30px) – Swipe horizontal displacement must be more than this.</li>
<li><code>$.event.special.swipe.verticalDistanceThreshold</code> (default: 75px) – Swipe vertical displacement must be less than this.</li>
</ul>
@@ -119,7 +119,7 @@ <h3>Section 3</h3>
</div>
<h2>Custom icons</h2>
- <p>Collapsible headings default icons can be overridden by using the <code>data-collapsed-icon</code> and <code>data-expanded-icon</code> attributes, either at the <code>collapsible-set</code> level or on an individual collapsible basis.</p>
+ <p>Collapsible headings&rsquo; default icons can be overridden by using the <code>data-collapsed-icon</code> and <code>data-expanded-icon</code> attributes, either at the <code>collapsible-set</code> level or on an individual collapsible basis.</p>
<div data-role="collapsible-set" data-theme="c" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
<div data-role="collapsible">
@@ -137,7 +137,7 @@ <h3>Section 3</h3>
</div>
<h2>Icon positioning</h2>
- <p>Collapsible headings default icon positioning can be overridden by using the <code>data-iconpos</code> attribute, either at the <code>collapsible-set</code> level or on an individual collapsible basis.</p>
+ <p>Collapsible headings&rsquo; default icon positioning can be overridden by using the <code>data-iconpos</code> attribute, either at the <code>collapsible-set</code> level or on an individual collapsible basis.</p>
<div data-role="collapsible-set" data-theme="c" data-iconpos="right">
<div data-role="collapsible">
@@ -39,7 +39,7 @@ <h2>Checkboxes</h2>
<p>The 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. View the <a href="../../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to checkboxes.</p>
- <p>To create a single checkbox, add an <code>input</code> with a <code>type="checkbox"</code> attribute and a corresponding <code>label</code>. If the <code>input</code> isnt wrapped in its corresponding <code>label</code>, be sure to set the <code>for</code> attribute of the <code>label</code> to match the <code>id</code> of the <code>input</code> so they are semantically associated.</p>
+ <p>To create a single checkbox, add an <code>input</code> with a <code>type="checkbox"</code> attribute and a corresponding <code>label</code>. If the <code>input</code> isn't wrapped in its corresponding <code>label</code>, be sure to set the <code>for</code> attribute of the <code>label</code> to match the <code>id</code> of the <code>input</code> so they are semantically associated.</p>
<p>There are therefore two ways to create a checkbox and with a label as shown below:</p>
<pre><code>
@@ -54,7 +54,7 @@ <h2>Mini sized elements</h2>
<input type="text" name="name" id="mini" value="" data-mini="true" />
<h2>Hiding labels accessibly</h2>
- <p>For the sake of accessibility, jQuery Mobile requires that all form elements be paired with a meaningful <code>label</code>. To hide labels in a way that leaves them visible to assistive technologies - for example, when letting an elements <code>placeholder</code> attribute serve as a label - apply the helper class <code>ui-hidden-accessible</code> to the label itself:</p>
+ <p>For the sake of accessibility, jQuery Mobile requires that all form elements be paired with a meaningful <code>label</code>. To hide labels in a way that leaves them visible to assistive technologies - for example, when letting an element's <code>placeholder</code> attribute serve as a label - apply the helper class <code>ui-hidden-accessible</code> to the label itself:</p>
<code>
<pre>
&lt;label for="username" <strong>class="ui-hidden-accessible"</strong>&gt;Username:&lt;/label&gt;
@@ -286,7 +286,7 @@ <h2>Vertically grouped select inputs</h2>
</div>
<h2>Horizontally grouped select inputs</h2>
-<p>Select inputs can also be used for grouped sets with more than one related selection. To make a horizontal button set, add the <code>data-type="horizontal"</code> to the fieldset. Note that the buttons which trigger the select will resize depending on the currently selected options value. Note that browsers without support for <code>display: inline-block;</code> will group the selects vertically, as above.</p>
+<p>Select inputs can also be used for grouped sets with more than one related selection. To make a horizontal button set, add the <code>data-type="horizontal"</code> to the fieldset. Note that the buttons which trigger the select will resize depending on the currently selected option's value. Note that browsers without support for <code>display: inline-block;</code> will group the selects vertically, as above.</p>
<code>
&lt;fieldset data-role="controlgroup" <strong>data-type="horizontal"</strong>&gt;
@@ -93,11 +93,11 @@ <h2>Create vs. refresh: An important distinction</h2>
<h2>data-enhance="false" data attribute</h2>
- <p>As of jQuery Mobile 1.0, all the markup within a page is scanned for elements to be enhanced. This is problematic for 3rd party widgets/libraries that don’t want anybody enhancing their markup or attaching behavior. We heard requests for a data-* attribute that can be placed on an element container to tell the framework not to enhance anything inside it for these situations. In 1.1, we’ve added a new <code>data-enhance="false"</code> attribute that can be added to a container to prevent auto-initialization.
- This is also available via <code>$.fn.jqmEnhanceable</code>. Its important to note that because of the performance impact incurred by finding a parent element with the <code>data-enhance="false"</code> attribute this feature must be turned on explicitly with <code>$.mobile.ignoreContentEnabled=true</code>.</p>
+ <p>As of jQuery Mobile 1.0, all the markup within a page is scanned for elements to be enhanced. This is problematic for 3rd party widgets/libraries that don't want anybody enhancing their markup or attaching behavior. We heard requests for a data-* attribute that can be placed on an element container to tell the framework not to enhance anything inside it for these situations. In 1.1, we've added a new <code>data-enhance="false"</code> attribute that can be added to a container to prevent auto-initialization.
+ This is also available via <code>$.fn.jqmEnhanceable</code>. It's important to note that because of the performance impact incurred by finding a parent element with the <code>data-enhance="false"</code> attribute this feature must be turned on explicitly with <code>$.mobile.ignoreContentEnabled=true</code>.</p>
<h2>data-ajax="false" now works on containers</h2>
- <p>On a related topic, we’ve always offered the ability to disable the AJAX navigation system from hijacking a link or form submit via the <code>data-ajax="false"</code> attribute, but people have asked for a way to apply this exclusion more efficiently to a grouping of links. In 1.1, this is now possible by simply adding, and setting <code>$.mobile.ignoreContentEnabled=true</code>, the <code>data-ajax</code> attribute to a parent container and it will exclude all the child links or forms from the AJAX navigation system behavior.</p>
+ <p>On a related topic, we've always offered the ability to disable the AJAX navigation system from hijacking a link or form submit via the <code>data-ajax="false"</code> attribute, but people have asked for a way to apply this exclusion more efficiently to a grouping of links. In 1.1, this is now possible by simply adding, and setting <code>$.mobile.ignoreContentEnabled=true</code>, the <code>data-ajax</code> attribute to a parent container and it will exclude all the child links or forms from the AJAX navigation system behavior.</p>
<h2>Scrolling to a position within a page</h2>
@@ -27,7 +27,7 @@ <h1>Page titles</h1>
<h2>Titles in Ajax navigation</h2>
- <p>When you load the first page of a jQuery Mobile based site, then click a link or submit a form, Ajax is used to pull in the content of the requested page. Having both pages in the DOM is essential to enable the animated page transitions, but one downside of this approach is that the page title is always that of the first page, not the subsequent page youre viewing.</p>
+ <p>When you load the first page of a jQuery Mobile based site, then click a link or submit a form, Ajax is used to pull in the content of the requested page. Having both pages in the DOM is essential to enable the animated page transitions, but one downside of this approach is that the page title is always that of the first page, not the subsequent page you're viewing.</p>
<p>To remedy this, jQuery Mobile automatically parses the <code>title</code> of the page pulled via Ajax and changes the <code>title</code> attribute of the parent document to match.</p>
<h2>Titles in multi-page templates</h2>
@@ -133,7 +133,7 @@ <h2>Defining fallback transitions for non-3D support</h2>
<code>$.mobile.transitionFallbacks.slideout = "none"</code>
<h2>Setting a max scroll for transitions</h2>
- <p>By default, transitions are disabled (set to "none") when youre either coming FROM or going TO a page where the scroll position is 3x the height of the devices screen.
+ <p>By default, transitions are disabled (set to "none") when you're either coming FROM or going TO a page where the scroll position is 3x the height of the device's screen.
This feature was added because of the slow response times and the possibility of browser crashing when clicking on a list item (or any navigation element) far down a long page which leads to the
browser trying to animate a really massively tall page from the scroll position to the top of the screen. The scroll position, not total screen height, is the determining factor for performance.
This scroll position breakpoint is configurable via the new <code>getMaxScrollForTransition</code> function.</p>
@@ -89,7 +89,7 @@ <h2>Known issue with form controls inside fixed toolbars, and programmatic scrol
<h2>Known issues in Android 2.2/2.3</h2>
- <p>Android 2.2/2.3s implementation of <code>position: fixed;</code> can, in conjunction with seemingly unrelated styles and markup patterns, cause a number of strange issues, particularly in the case of <code>position: absolute</code> elements inside of <code>position: fixed</code> elements. While weve done our best to work around a number of these unique bugs within the scope of the library, custom styles may cause a number of issues.</p>
+ <p>Android 2.2/2.3's implementation of <code>position: fixed;</code> can, in conjunction with seemingly unrelated styles and markup patterns, cause a number of strange issues, particularly in the case of <code>position: absolute</code> elements inside of <code>position: fixed</code> elements. While we've done our best to work around a number of these unique bugs within the scope of the library, custom styles may cause a number of issues.</p>
<ul>
<li>Form elements elsewhere on the page—select menus in particular—can fail to respond to user interaction when an <em>empty</em> absolute positioned element is placed within a fixed position element. In rare cases—and specific to Android 2.2—this can cause <em>entire pages</em> to fail to respond to user interaction. This can seemingly be solved by adding any character to the absolute positioned element, including a non-breaking space, and in some cases even whitespace.</li>
<li>The above-described issue can also be triggered by an absolute positioned image inside of a fixed position element, but <em>only</em> when that image is using something <em>other than its inherent dimensions</em>. If a height or width is specified on the image using CSS, or the image src is invalid (thus having no inherent height and width), this issue can occur. If an image that is inherently, say, 50x50 pixels is placed in a fixed element and left at its inherent dimensions, this issue does not seem to occur.</li>
@@ -98,7 +98,7 @@ <h2>Known issues in Android 2.2/2.3</h2>
<li>Any element that triggers the on-screen keyboard, when placed inside a <code>position: fixed</code> element, will fail to respond to user input when using anything other than the default keyboard. This includes Swype, XT9 or, it seems, any input method apart from the standard non-predictive keyboard.</li>
</ul>
- <p>While we will continue to try to find ways to mitigate these bugs as best we can, we currently advise against implementing fixed toolbars containing complicated user styles and form elements without extensive testing in all versions of Androids native browser.</p>
+ <p>While we will continue to try to find ways to mitigate these bugs as best we can, we currently advise against implementing fixed toolbars containing complicated user styles and form elements without extensive testing in all versions of Android's native browser.</p>
<p>The following pages are designed to test fixed toolbars and form elements:
<a href="bars-fixed-forms-a.html">demo app</a>,

0 comments on commit 88468aa

Please sign in to comment.