Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Commit

Permalink
Collapsibleset: Modify demos to use non-deprecated initSelector
Browse files Browse the repository at this point in the history 
Fixes gh-7065
  • Loading branch information
Gabriel Schulhof committed Feb 5, 2014
1 parent 7b31cee commit bc4d8e2
Show file tree
Hide file tree
Showing 7 changed files with 19 additions and 19 deletions.
2 changes: 1 addition & 1 deletion demos/collapsible-dynamic/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
<button type="button" data-icon="plus" data-iconpos="right" data-mini="true" data-inline="true" id="expand">Expand last</button>
<button type="button" data-icon="minus" data-iconpos="right" data-mini="true" data-inline="true" id="collapse">Collapse last</button>

<div data-role="collapsible-set" data-content-theme="a" data-iconpos="right" id="set">
<div data-role="collapsibleset" data-content-theme="a" data-iconpos="right" id="set">
<div data-role="collapsible" id="set1" data-collapsed="true">
<h3>Section 1</h3>
<p>I'm the collapsible content.</p>
Expand Down
22 changes: 11 additions & 11 deletions demos/collapsibleset/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,10 @@

<h2>Markup</h2>

<p>Collapsible sets start with the same markup as <a href="../collapsible/" data-ajax="false">individual collapsibles</a> which have a heading followed by the collapsible content. By adding a parent wrapper with a <code>data-role="collapsible-set"</code> attribute to the collapsibles they will be visually grouped and they will behave like an accordion so only one section can be open at a time.</p>
<p>Collapsible sets start with the same markup as <a href="../collapsible/" data-ajax="false">individual collapsibles</a> which have a heading followed by the collapsible content. By adding a parent wrapper with a <code>data-role="collapsibleset"</code> attribute to the collapsibles they will be visually grouped and they will behave like an accordion so only one section can be open at a time.</p>

<div data-demo-html="true">
<div data-role="collapsible-set" data-theme="a" data-content-theme="a">
<div data-role="collapsibleset" data-theme="a" data-content-theme="a">
<div data-role="collapsible">
<h3>Section 1</h3>
<p>I'm the collapsible content for section 1</p>
Expand All @@ -55,7 +55,7 @@
<p>For full width collapsibles without corner styling add the <code>data-inset="false"</code> attribute to the set. This makes the collapsible set look more like an expandable <a href="../listview/">listview</a>.</p>

<div data-demo-html="true">
<div data-role="collapsible-set" data-inset="false">
<div data-role="collapsibleset" data-inset="false">
<div data-role="collapsible">
<h3>Animals</h3>
<ul data-role="listview" data-inset="false">
Expand Down Expand Up @@ -91,7 +91,7 @@
<p>For a more compact version that is useful in tight spaces, add the <code>data-mini="true"</code> attribute to the set. </p>

<div data-demo-html="true">
<div data-role="collapsible-set" data-theme="a" data-content-theme="a" data-mini="true">
<div data-role="collapsibleset" data-theme="a" data-content-theme="a" data-mini="true">
<div data-role="collapsible">
<h3>I'm a mini collapsible</h3>
<p>This is good for tight spaces.</p>
Expand All @@ -110,10 +110,10 @@

<h2>Icons</h2>

<p>The default icons of collapsible headings 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 any of its collapsibles individually.</p>
<p>The default icons of collapsible headings can be overridden by using the <code>data-collapsed-icon</code> and <code>data-expanded-icon</code> attributes, either at the <code>collapsibleset</code> level or on any of its collapsibles individually.</p>

<div data-demo-html="true">
<div data-role="collapsible-set" data-theme="a" data-content-theme="a" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
<div data-role="collapsibleset" data-theme="a" data-content-theme="a" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
<div data-role="collapsible">
<h3>Icon set on the set</h3>
<p>Specify the open and close icons on the set to apply it to all the collapsibles within.</p>
Expand All @@ -131,10 +131,10 @@

<h2>Icon position</h2>

<p>The default icon positioning of collapsible headings can be overridden by using the <code>data-iconpos</code> attribute, either at the <code>collapsible-set</code> level or on any of its collapsibles individually.</p>
<p>The default icon positioning of collapsible headings can be overridden by using the <code>data-iconpos</code> attribute, either at the <code>collapsibleset</code> level or on any of its collapsibles individually.</p>

<div data-demo-html="true">
<div data-role="collapsible-set" data-theme="a" data-content-theme="a" data-iconpos="right">
<div data-role="collapsibleset" data-theme="a" data-content-theme="a" data-iconpos="right">
<div data-role="collapsible">
<h3>Right</h3>
<p>Inherits icon positioning from <code>data-iconpos="right"</code> attribute on set.</p>
Expand All @@ -158,7 +158,7 @@
<p>Add the <code>data-corners="false"</code> attribute to get an inset collapsible set without rounded corners.</p>

<div data-demo-html="true">
<div data-role="collapsible-set" data-corners="false" data-theme="a" data-content-theme="a">
<div data-role="collapsibleset" data-corners="false" data-theme="a" data-content-theme="a">
<div data-role="collapsible">
<h3>Section 1</h3>
<p>Collapsible content</p>
Expand All @@ -180,7 +180,7 @@
<p>Add a <code>data-theme</code> attribute to the set to set the color of each collapsible header in a set. Add the <code>data-content-theme</code> attribute to specify the color of the collapsible content. </p>

<div data-demo-html="true">
<div data-role="collapsible-set" data-theme="b" data-content-theme="b">
<div data-role="collapsibleset" data-theme="b" data-content-theme="b">
<div data-role="collapsible">
<h3>Heading</h3>
<p>Content</p>
Expand All @@ -195,7 +195,7 @@
<p>To have individual sections in a group styled differently, add <code>data-theme</code> and <code>data-content-theme</code> attributes to specific collapsibles.</p>

<div data-demo-html="true">
<div data-role="collapsible-set" data-theme="b" data-content-theme="b">
<div data-role="collapsibleset" data-theme="b" data-content-theme="b">
<div data-role="collapsible">
<h3>Heading</h3>
<p>Content</p>
Expand Down
4 changes: 2 additions & 2 deletions demos/filterable/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@
<form>
<input data-type="search" id="searchForCollapsibleSet"></input>
</form>
<div data-role="collapsible-set" data-filter="true" data-inset="true" data-inset="true" id="collapsiblesetForFilter" data-input="#searchForCollapsibleSet">
<div data-role="collapsibleset" data-filter="true" data-inset="true" data-inset="true" id="collapsiblesetForFilter" data-input="#searchForCollapsibleSet">
<div data-role="collapsible" data-filtertext="Animals">
<h3>Animals</h3>
<ul data-role="listview" data-inset="false">
Expand Down Expand Up @@ -170,7 +170,7 @@
<form>
<input data-type="search" id="searchForCollapsibleSetChildren"></input>
</form>
<div data-role="collapsible-set" data-filter="true" data-children="> div, > div div ul li" data-inset="true" data-inset="true" id="collapsiblesetForFilterChildren" data-input="#searchForCollapsibleSetChildren">
<div data-role="collapsibleset" data-filter="true" data-children="> div, > div div ul li" data-inset="true" data-inset="true" id="collapsiblesetForFilterChildren" data-input="#searchForCollapsibleSetChildren">
<div data-role="collapsible" data-filtertext="Animals Cats Dogs Lizards snakes">
<h3>Animals</h3>
<ul data-role="listview" data-inset="false">
Expand Down
4 changes: 2 additions & 2 deletions demos/listview/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -373,7 +373,7 @@
<p>You can also use listviews inside a <a href="../accordions/">collapsible set</a> (accordion) to visually group the list and ensure that only a single item can be open at once.</p>

<div data-demo-html="true">
<div data-role="collapsible-set" data-theme="a" data-content-theme="b">
<div data-role="collapsibleset" data-theme="a" data-content-theme="b">
<div data-role="collapsible">
<h2>Filtered list</h2>
<ul data-role="listview" data-filter="true" data-filter-theme="a" data-divider-theme="b">
Expand Down Expand Up @@ -433,7 +433,7 @@
<p>Setting <code>data-inset="false"</code> on a collapsible or a collapsible set makes the collapsible full width (non-inset), like a full width listview.</p>

<div data-demo-html="true">
<div data-role="collapsible-set" data-theme="a" data-inset="false">
<div data-role="collapsibleset" data-theme="a" data-inset="false">
<div data-role="collapsible">
<h2>Mailbox</h2>
<ul data-role="listview">
Expand Down
2 changes: 1 addition & 1 deletion demos/popup/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@
<a href="#popupNested" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-bars ui-btn-icon-left ui-btn-b" data-transition="pop">Choose a creature...</a>

<div data-role="popup" id="popupNested" data-theme="none">
<div data-role="collapsible-set" data-theme="b" data-content-theme="a" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" style="margin:0; width:250px;">
<div data-role="collapsibleset" data-theme="b" data-content-theme="a" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" style="margin:0; width:250px;">
<div data-role="collapsible" data-inset="false">
<h2>Farm animals</h2>
<ul data-role="listview">
Expand Down
2 changes: 1 addition & 1 deletion demos/theme-classic/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -326,7 +326,7 @@
<p>I'm the collapsible content with a themed content block set to "<span class="theme">a</span>".</p>
</div>
<div data-role="collapsible-set" data-content-theme="a">
<div data-role="collapsibleset" data-content-theme="a">
<div data-role="collapsible">
<h3>Section 1</h3>
<p>I'm the collapsible content for section 1</p>
Expand Down
2 changes: 1 addition & 1 deletion demos/theme-default/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -277,7 +277,7 @@
<p>I'm the collapsible content with a themed content block set to "<span class="theme">a</span>".</p>
</div>
<div data-role="collapsible-set" data-content-theme="a">
<div data-role="collapsibleset" data-content-theme="a">
<div data-role="collapsible">
<h3>Section 1</h3>
<p>I'm the collapsible content for section 1</p>
Expand Down

0 comments on commit bc4d8e2

Please sign in to comment.