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

Commit 1f8302d

Browse files
jaspermdegrootjaspermdegroot
committed
Demos: improved dynamic controlgroup demo.
1 parent 3e4bc84 commit 1f8302d

File tree

1 file changed

+76
-59
lines changed

1 file changed

+76
-59
lines changed

‎docs/examples/controlgroups/dynamic-controlgroup.php‎

Lines changed: 76 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -19,31 +19,35 @@
1919
counter++;
2020

2121
var widgetType = $( "[name='radio-widget']:checked" ).attr( "id" ),
22-
group = $( "#controlgroup" ),
22+
group = $( "#my-controlgroup" ),
2323
$el,
2424
action = function() {
25-
var option = $( "[name='radio-option']:checked" ).attr( "id" );
26-
$el[ option ](); group.controlgroup( "refresh" );
25+
var action = $( "[name='radio-action']:checked" ).attr( "id" );
26+
if ( $( $el[1] ).is( "select" ) && action === "hide" ) {
27+
$el = $( $el[1] ).parents( ".ui-select" );
28+
}
29+
$el[ action ]();
30+
group.controlgroup( "refresh" );
2731
};
2832

2933
if ( widgetType === "link" ) {
3034

3135
$el = $( "<a href='#'>Link " + counter + "</a>" ).bind( "click", action );
32-
$( "#controlgroup" ).controlgroup( "container" )[ $( this ).attr( "id" ) ]( $el );
36+
$( "#my-controlgroup" ).controlgroup( "container" )[ $( this ).attr( "id" ) ]( $el );
3337
$el.buttonMarkup();
3438

3539
} else if ( widgetType === "select" ) {
3640

37-
$el = $( "<label for='widget" + counter + "'>Select " + counter + "</label><select id='widget" + counter + "'><option id='widget" + counter + "' value='default'>Select " + counter + "</option><option value='remove'>Select</option></select>" );
41+
$el = $( "<label for='widget" + counter + "'>Select " + counter + "</label><select id='widget" + counter + "'><option value='option1'>Select " + counter + "</option><option value='option2'>Select option</option></select>" );
3842
$( $el[ 1 ] ).bind( "change", action);
39-
$( "#controlgroup" ).controlgroup( "container" )[ $( this ).attr( "id" ) ]( $el );
43+
$( "#my-controlgroup" ).controlgroup( "container" )[ $( this ).attr( "id" ) ]( $el );
4044
$( $el[ 1 ] ).selectmenu();
4145

4246
} else {
4347

4448
$el = $( "<label for='widget" + counter + "'>Checkbox " + counter + "</label><input type='checkbox' id='widget" + counter + "'></input>" );
4549
$( $el[ 1 ] ).bind( "change", action );
46-
$( "#controlgroup" ).controlgroup( "container" )[ $( this ).attr( "id" ) ]( $el );
50+
$( "#my-controlgroup" ).controlgroup( "container" )[ $( this ).attr( "id" ) ]( $el );
4751
$( $el[ 1 ] ).checkboxradio();
4852

4953
}
@@ -52,11 +56,14 @@
5256
});
5357

5458
$( "[name='radio-orientation']" ).bind( "change", function( e ) {
55-
$( "#controlgroup" ).controlgroup( "option", "type", ( $( "#isHorizontal" ).is( ":checked" ) ? "horizontal" : "vertical" ) );
59+
$( "#my-controlgroup" ).controlgroup( "option", "type", ( $( "#isHorizontal" ).is( ":checked" ) ? "horizontal" : "vertical" ) );
5660
});
5761
});
5862
})( jQuery );
5963
</script>
64+
<style>
65+
66+
</style>
6067
</head>
6168
<body>
6269
<div data-role="page" class="jqm-demos">
@@ -74,57 +81,67 @@
7481

7582
<p>This demo shows how you can dynamically make changes to a controlgroup.</p>
7683

77-
<div data-demo-html="true" data-demo-js="true">
78-
<div class="ui-grid-a">
79-
<div class="ui-block-a">
80-
<div data-role="fieldcontain">
81-
<a href="#" id="prepend" data-role="button" data-corners="true" data-inline="true">Prepend</a>
82-
<a href="#" id="append" data-role="button" data-corners="true" data-inline="true">Append</a>
83-
</div>
84-
<form action="#" method="get">
85-
<fieldset data-role="controlgroup" data-type="horizontal">
86-
<legend>Widget type</legend>
87-
88-
<input type="radio" name="radio-widget" id="link" value="link" checked="checked">
89-
<label for="link">Link</label>
90-
91-
<input type="radio" name="radio-widget" id="select" value="select">
92-
<label for="select">Select</label>
93-
94-
<input type="radio" name="radio-widget" id="checkbox" value="checkbox">
95-
<label for="checkbox">Checkbox</label>
96-
</fieldset>
97-
98-
<fieldset data-role="controlgroup" data-type="horizontal">
99-
<legend>Operation<br><small>click on the controlgroup item to perform</small></legend>
100-
101-
<input type="radio" name="radio-option" id="remove" value="remove" checked="checked">
102-
<label for="remove">Remove</label>
103-
104-
<input type="radio" name="radio-option" id="hide" value="hide">
105-
<label for="hide">Hide</label>
106-
107-
<input type="radio" name="radio-option" id="width" value="width">
108-
<label for="width">Nothing</label>
109-
</fieldset>
110-
111-
<fieldset data-role="controlgroup" data-type="horizontal">
112-
<legend>Orientation</legend>
113-
114-
<input type="radio" name="radio-orientation" id="isVertical" value="isVertical" checked="checked">
115-
<label for="isVertical">Vertical</label>
116-
117-
<input type="radio" name="radio-orientation" id="isHorizontal" value="isHorizontal">
118-
<label for="isHorizontal">Horizontal</label>
119-
</fieldset>
120-
</form>
121-
</div><!-- /block-a -->
122-
<div class="ui-block-b">
123-
<form>
124-
<div data-role="controlgroup" id="controlgroup"></div>
125-
</form>
126-
</div><!-- /block-b -->
127-
</div><!-- /grid -->
84+
<div data-demo-html="true" data-demo-js="true" data-demo-css="true">
85+
86+
<form>
87+
<div class="ui-body ui-body-d ui-corner-all">
88+
<p>Controlgroup...</p>
89+
<div data-role="controlgroup" id="my-controlgroup"><!-- items will be injected here --></div>
90+
</div>
91+
</form>
92+
93+
<div data-role="fieldcontain">
94+
<label for="prepend">Add item</label>
95+
<button id="prepend" data-role="button" data-mini="true" data-inline="true">Prepend</button>
96+
<label for="append" class="ui-hidden-accessible">Action</label>
97+
<button id="append" data-role="button" data-mini="true" data-inline="true">Append</button>
98+
</div>
99+
100+
<form action="#" method="get">
101+
<div data-role="fieldcontain">
102+
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
103+
<legend>Widget type</legend>
104+
105+
<input type="radio" name="radio-widget" id="link" value="link" checked="checked">
106+
<label for="link">Link</label>
107+
108+
<input type="radio" name="radio-widget" id="select" value="select">
109+
<label for="select">Select</label>
110+
111+
<input type="radio" name="radio-widget" id="checkbox" value="checkbox">
112+
<label for="checkbox">Checkbox</label>
113+
</fieldset>
114+
</div>
115+
116+
<div data-role="fieldcontain">
117+
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
118+
<legend>Action<br><small>on click/change</small></legend>
119+
120+
<input type="radio" name="radio-action" id="remove" value="remove" checked="checked">
121+
<label for="remove">Remove</label>
122+
123+
<input type="radio" name="radio-action" id="hide" value="hide">
124+
<label for="hide">Hide</label>
125+
126+
<input type="radio" name="radio-action" id="width" value="width">
127+
<label for="width">Nothing</label>
128+
</fieldset>
129+
</div>
130+
131+
<div data-role="fieldcontain">
132+
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
133+
<legend>Switch orientation</legend>
134+
135+
<input type="radio" name="radio-orientation" id="isVertical" value="isVertical" checked="checked">
136+
<label for="isVertical">Vertical</label>
137+
138+
<input type="radio" name="radio-orientation" id="isHorizontal" value="isHorizontal">
139+
<label for="isHorizontal">Horizontal</label>
140+
</fieldset>
141+
</div>
142+
143+
</form>
144+
128145
</div><!--/demo-html -->
129146

130147
</div><!-- /content -->

0 commit comments

Comments
 (0)