Merge pull request #4685 from MauriceG/patch-28

Docs: Refine the paragraph about split buttons to be more informative (docs-lists.html)

docs/lists/docs-lists.html

@@ -24,7 +24,7 @@ <h1>Lists</h1>
 
 		<div data-role="content">
 			<div class="content-primary">
-			<h2>List views</h2>
+			<h2>Listviews</h2>
 
 			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
 				<li><a href="docs-lists.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
@@ -34,11 +34,11 @@ <h2>List views</h2>
 			</ul>
 
 			<h2>Basic linked lists</h2>
-			<p>A list view is coded as a simple unordered list containing linked list items with a <code> data-role="listview"</code> attribute. jQuery Mobile will apply all the necessary styles to transform the list into a mobile-friendly list view with right arrow indicator that fills the full width of the browser window. When you tap on the list item, the framework will trigger a click on the first link inside the list item, issue an AJAX request for the URL in the link, create the new page in the DOM, then kick off a page transition. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to listviews.</p>
+			<p>A listview is coded as a simple unordered list containing linked list items with a <code> data-role="listview"</code> attribute. jQuery Mobile will apply all the necessary styles to transform the list into a mobile-friendly listview with right arrow indicator that fills the full width of the browser window. When you tap on the list item, the framework will trigger a click on the first link inside the list item, issue an Ajax request for the URL in the link, create the new page in the DOM, then kick off a page transition. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to listviews.</p>
 			<p>Here is the HTML markup for a basic linked list.</p>
 
 <pre><code>
-&lt;ul data-role=&quot;listview&quot; data-theme=&quot;g&quot;&gt;
+&lt;ul data-role=&quot;listview&quot; data-theme=&quot;b&quot;&gt;
 	&lt;li&gt;&lt;a href=&quot;acura.html&quot;&gt;Acura&lt;/a&gt;&lt;/li&gt;
 	&lt;li&gt;&lt;a href=&quot;audi.html&quot;&gt;Audi&lt;/a&gt;&lt;/li&gt;
 	&lt;li&gt;&lt;a href=&quot;bmw.html&quot;&gt;BMW&lt;/a&gt;&lt;/li&gt;
@@ -51,22 +51,22 @@ <h2>Basic linked lists</h2>
 
 			<h2>Nested lists</h2>
 			<p>By nesting child <code>ul</code> or <code>ol</code> inside list items, you can create nested lists. When a list item with a child list is clicked, the framework will show a new page populated with the title of the parent in the header and the list of child elements. These dynamic nested lists are styled with the "b" theme swatch (blue in the default theme) to indicate that you are in a secondary level of navigation. Lists can be nested multiple levels deep and all pages and linking will be automatically handled by the framework. Note that the page of each nested listview is created when the parent page loads and for each nested page the page-events will trigger.</p>
-			<p>To <a href="../lists/lists-themes.html">set the swatch color</a> of the child list views, set the <code>data-theme</code> attribute on each list inside.</p>
+			<p>To <a href="../lists/lists-themes.html">set the swatch color</a> of the child listviews, set the <code>data-theme</code> attribute on each list inside.</p>
 			<a href="lists-nested.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Nested list example</a>
 
 			<h2>Numbered lists</h2>
-			<p>Lists can also be created from ordered lists (<code>ol</code>) which is useful when presenting items that are in a sequence such as search results or a movie queue. When the enhanced markup is applied to the list view, jQuery Mobile will try to first use CSS to add numbers to the list and, if not supported, will fall back to injecting numbers with JavaScript.</p>
+			<p>Lists can also be created from ordered lists (<code>ol</code>) which is useful when presenting items that are in a sequence such as search results or a movie queue. When the enhanced markup is applied to the listview, jQuery Mobile will try to first use CSS to add numbers to the list and, if not supported, will fall back to injecting numbers with JavaScript.</p>
 
 			<a href="lists-ol.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Numbered list example</a>
 
 			<h2>Read-only lists</h2>
-			<p>List views can also be used to display a non-interactive list of items, usually as an inset list. This list is built from an unordered or ordered list that don't have linked list items. The framework styles the list items as buttons like the other list types (see <a href="../lists/lists-themes.html">theming lists</a>), but without a gradient on the background.</p>
+			<p>Listviews can also be used to display a non-interactive list of items, usually as an inset list. This list is built from an unordered or ordered list that don't have linked list items. The framework styles the list items as buttons like the other list types (see <a href="../lists/lists-themes.html">theming lists</a>), but without a gradient on the background.</p>
 
 			<a href="lists-readonly-inset.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Read-only list example</a>
 
 			<h2>Split button lists</h2>
-			<p>In cases where there is more than one possible action per list item, a split button can be used to offer two independently clickable items -- the list item and a small arrow icon in the far right. To make a split list item, simply add a second link inside the <code>li</code> and the framework will add a vertical divider line, style the link as an icon-only arrow button, and set the <code>title</code> attribute of the link to the text the link for accessibility.</p>
-			<p>You can set the icon for the right split icon by specifying a <code>data-split-icon</code> attribute with the <a href="../buttons/buttons-icons.html">icon name</a> you want. The theme swatch color of the split button defaults to "b" (blue in the default theme) but can be set by specifying a swatch letter in the <code>data-split-theme</code> attribute.</p>
+			<p>In cases where there is more than one possible action per list item, a split button can be used to offer two independently clickable items -- the list item and a small arrow icon in the far right. To make a split list item, simply add a second link inside the <code>li</code> and the framework will add a vertical divider line, style the link as an icon-only arrow button, and set the <code>title</code> attribute of the link to the text of the link for accessibility.</p>
+			<p>You can set the icon for the right split icon by specifying a <code>data-split-icon</code> attribute on the listview with a <a href="../buttons/buttons-icons.html">icon name</a> you want. The default icon is "arrow-r" but can be configured with the <code>splitIcon</code> <a href="../lists/lists-options.html">listview option</a>. By adding a <code>data-icon</code> attribute to the list item, you can set individual icons for each split. The theme swatch color of the split button defaults to "b" (blue in the default theme) but can be set by specifying a swatch letter with the <code>data-split-theme</code> attribute on listview level or for individual splits with the <code>data-theme</code> attribute on link level.</p>
 
 			<a href="lists-split.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Split list example</a>
 
@@ -164,7 +164,7 @@ <h3>More in this section</h3>
 
 						<ul data-role="listview" data-theme="c" data-divider-theme="d">
 
-							<li data-role="list-divider">List views</li>
+							<li data-role="list-divider">Listviews</li>
 							<li data-theme="a"><a href="docs-lists.html">List basics &amp; API</a></li>
 							<li><a href="lists-ul.html">Basic linked list</a></li>
 							<li><a href="lists-nested.html">Nested list</a></li>

docs/lists/lists-events.html

@@ -24,7 +24,7 @@ <h1>Lists</h1>
 
 	<div data-role="content">
 	<div class="content-primary">
-		<h2>List views</h2>
+		<h2>Listviews</h2>
 
 		<ul data-role="controlgroup" data-type="horizontal" class="localnav">
 			<li><a href="docs-lists.html" data-role="button" data-transition="fade">Basics</a></li>
@@ -66,7 +66,7 @@ <h3>More in this section</h3>
 
 				<ul data-role="listview" data-theme="c" data-dividertheme="d">
 
-					<li data-role="list-divider">List views</li>
+					<li data-role="list-divider">Listviews</li>
 					<li data-theme="a"><a href="docs-lists.html">List basics &amp; API</a></li>
 					<li><a href="lists-ul.html">Basic linked list</a></li>
 					<li><a href="lists-nested.html">Nested list</a></li>

docs/lists/lists-methods.html

@@ -24,7 +24,7 @@ <h1>Lists</h1>
 
 	<div data-role="content">
 	<div class="content-primary">
-		<h2>List views</h2>
+		<h2>Listviews</h2>
 
 		<ul data-role="controlgroup" data-type="horizontal" class="localnav">
 			<li><a href="docs-lists.html" data-role="button" data-transition="fade">Basics</a></li>
@@ -66,7 +66,7 @@ <h3>More in this section</h3>
 
 				<ul data-role="listview" data-theme="c" data-dividertheme="d">
 
-					<li data-role="list-divider">List views</li>
+					<li data-role="list-divider">Listviews</li>
 					<li data-theme="a"><a href="docs-lists.html">List basics &amp; API</a></li>
 					<li><a href="lists-ul.html">Basic linked list</a></li>
 					<li><a href="lists-nested.html">Nested list</a></li>

docs/lists/lists-options.html

@@ -24,7 +24,7 @@ <h1>Lists</h1>
 
 	<div data-role="content">
 	<div class="content-primary">
-		<h2>List views</h2>
+		<h2>Listviews</h2>
 
 		<ul data-role="controlgroup" data-type="horizontal" class="localnav">
 			<li><a href="docs-lists.html" data-role="button" data-transition="fade">Basics</a></li>
@@ -39,7 +39,7 @@ <h2>List views</h2>
 			<dt><code>countTheme</code> <em>string</em></dt>
 			<dd>
 				<p class="default">default: "c"</p>
-				<p>Sets the color scheme (swatch) for list item <a href="lists-count.html">count bubbles</a>. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
+				<p>Sets the color theme (swatch) for list item <a href="lists-count.html">count bubbles</a>. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
 <pre><code>$( document ).bind( "mobileinit", function(){
     <strong>$.mobile.listview.prototype.options.countTheme = "a";</strong>
 });
@@ -50,7 +50,7 @@ <h2>List views</h2>
 			<dt><code>dividerTheme</code> <em>string</em></dt>
 			<dd>
 				<p class="default">default: "b"</p>
-				<p>Sets the color scheme (swatch) for list <a href="lists-divider.html">dividers</a>. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
+				<p>Sets the color theme (swatch) for list <a href="lists-divider.html">dividers</a>. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
 <pre><code>$( document ).bind( "mobileinit", function(){
     <strong>$.mobile.listview.prototype.options.dividerTheme = "a";</strong>
 });
@@ -95,7 +95,7 @@ <h2>List views</h2>
 			<dt><code>filterTheme</code> <em>string</em></dt>
 			<dd>
 				<p class="default">default: "c"</p>
-				<p>Sets the color scheme (swatch) for the <a href="lists-search.html">search filter bar</a>. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
+				<p>Sets the color theme (swatch) for the <a href="lists-search.html">search filter bar</a>. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
 <pre><code>$( document ).bind( "mobileinit", function(){
     <strong>$.mobile.listview.prototype.options.filterTheme = "a";</strong>
 });
@@ -106,7 +106,7 @@ <h2>List views</h2>
 			<dt><code>headerTheme</code> <em>string</em></dt>
 			<dd>
 				<p class="default">default: "b"</p>
-				<p>Sets the color scheme (swatch) for headers of <a href="lists-nested.html">nested list</a> sub pages. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
+				<p>Sets the color theme (swatch) for headers of <a href="lists-nested.html">nested list</a> sub pages. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
 <pre><code>$( document ).bind( "mobileinit", function(){
     <strong>$.mobile.listview.prototype.options.headerTheme = "a";</strong>
 });
@@ -117,7 +117,7 @@ <h2>List views</h2>
 			<dt><code>initSelector</code> <em>CSS selector string</em></dt>
 			<dd>
 				<p class="default">default: ":jqmData(role='listview')"</p>
-				<p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as list views. To change which elements are initialized, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
+				<p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as listviews. To change which elements are initialized, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
 <pre><code>$( document ).bind( "mobileinit", function(){
     <strong>$.mobile.listview.prototype.options.initSelector = ".mylistview";</strong>
 });
@@ -149,7 +149,7 @@ <h2>List views</h2>
 			<dt><code>splitTheme</code> <em>string</em></dt>
 			<dd>
 				<p class="default">default: "b"</p>
-				<p>Sets the color scheme (swatch) for <a href="lists-split.html">split list buttons</a>. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
+				<p>Sets the color theme (swatch) for <a href="lists-split.html">split list buttons</a>. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
 <pre><code>$( document ).bind( "mobileinit", function(){
     <strong>$.mobile.listview.prototype.options.splitTheme = "a";</strong>
 });
@@ -160,7 +160,7 @@ <h2>List views</h2>
 			<dt><code>theme</code> <em>string</em></dt>
 			<dd>
 				<p class="default">default: null, inherited from parent</p>
-				<p>Sets the color scheme (swatch) for this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as its parent container if not explicitly set. To set the value for all instances of this widget, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
+				<p>Sets the color theme (swatch) for this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as its parent container if not explicitly set. To set the value for all instances of this widget, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
 <pre><code>$( document ).bind( "mobileinit", function(){
     <strong>$.mobile.listview.prototype.options.theme = "a";</strong>
 });
@@ -180,7 +180,7 @@ <h3>More in this section</h3>
 
 				<ul data-role="listview" data-theme="c" data-dividertheme="d">
 
-					<li data-role="list-divider">List views</li>
+					<li data-role="list-divider">Listviews</li>
 					<li data-theme="a"><a href="docs-lists.html">List basics &amp; API</a></li>
 					<li><a href="lists-ul.html">Basic linked list</a></li>
 					<li><a href="lists-nested.html">Nested list</a></li>