Permalink
Browse files

Demos: improved dynamic controlgroup demo.

  • Loading branch information...
jaspermdegroot committed Feb 21, 2013
1 parent 3e4bc84 commit 1f8302d09ceaf8882684bc1c9250a0eea79bde20
Showing with 76 additions and 59 deletions.
  1. +76 −59 docs/examples/controlgroups/dynamic-controlgroup.php
@@ -19,31 +19,35 @@
counter++;
var widgetType = $( "[name='radio-widget']:checked" ).attr( "id" ),
group = $( "#controlgroup" ),
group = $( "#my-controlgroup" ),
$el,
action = function() {
var option = $( "[name='radio-option']:checked" ).attr( "id" );
$el[ option ](); group.controlgroup( "refresh" );
var action = $( "[name='radio-action']:checked" ).attr( "id" );
if ( $( $el[1] ).is( "select" ) && action === "hide" ) {
$el = $( $el[1] ).parents( ".ui-select" );
}
$el[ action ]();
group.controlgroup( "refresh" );
};
if ( widgetType === "link" ) {
$el = $( "<a href='#'>Link " + counter + "</a>" ).bind( "click", action );
$( "#controlgroup" ).controlgroup( "container" )[ $( this ).attr( "id" ) ]( $el );
$( "#my-controlgroup" ).controlgroup( "container" )[ $( this ).attr( "id" ) ]( $el );
$el.buttonMarkup();
} else if ( widgetType === "select" ) {
$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>" );
$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>" );
$( $el[ 1 ] ).bind( "change", action);
$( "#controlgroup" ).controlgroup( "container" )[ $( this ).attr( "id" ) ]( $el );
$( "#my-controlgroup" ).controlgroup( "container" )[ $( this ).attr( "id" ) ]( $el );
$( $el[ 1 ] ).selectmenu();
} else {
$el = $( "<label for='widget" + counter + "'>Checkbox " + counter + "</label><input type='checkbox' id='widget" + counter + "'></input>" );
$( $el[ 1 ] ).bind( "change", action );
$( "#controlgroup" ).controlgroup( "container" )[ $( this ).attr( "id" ) ]( $el );
$( "#my-controlgroup" ).controlgroup( "container" )[ $( this ).attr( "id" ) ]( $el );
$( $el[ 1 ] ).checkboxradio();
}
@@ -52,11 +56,14 @@
});
$( "[name='radio-orientation']" ).bind( "change", function( e ) {
$( "#controlgroup" ).controlgroup( "option", "type", ( $( "#isHorizontal" ).is( ":checked" ) ? "horizontal" : "vertical" ) );
$( "#my-controlgroup" ).controlgroup( "option", "type", ( $( "#isHorizontal" ).is( ":checked" ) ? "horizontal" : "vertical" ) );
});
});
})( jQuery );
</script>
<style>
</style>
</head>
<body>
<div data-role="page" class="jqm-demos">
@@ -74,57 +81,67 @@
<p>This demo shows how you can dynamically make changes to a controlgroup.</p>
<div data-demo-html="true" data-demo-js="true">
<div class="ui-grid-a">
<div class="ui-block-a">
<div data-role="fieldcontain">
<a href="#" id="prepend" data-role="button" data-corners="true" data-inline="true">Prepend</a>
<a href="#" id="append" data-role="button" data-corners="true" data-inline="true">Append</a>
</div>
<form action="#" method="get">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Widget type</legend>
<input type="radio" name="radio-widget" id="link" value="link" checked="checked">
<label for="link">Link</label>
<input type="radio" name="radio-widget" id="select" value="select">
<label for="select">Select</label>
<input type="radio" name="radio-widget" id="checkbox" value="checkbox">
<label for="checkbox">Checkbox</label>
</fieldset>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Operation<br><small>click on the controlgroup item to perform</small></legend>
<input type="radio" name="radio-option" id="remove" value="remove" checked="checked">
<label for="remove">Remove</label>
<input type="radio" name="radio-option" id="hide" value="hide">
<label for="hide">Hide</label>
<input type="radio" name="radio-option" id="width" value="width">
<label for="width">Nothing</label>
</fieldset>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Orientation</legend>
<input type="radio" name="radio-orientation" id="isVertical" value="isVertical" checked="checked">
<label for="isVertical">Vertical</label>
<input type="radio" name="radio-orientation" id="isHorizontal" value="isHorizontal">
<label for="isHorizontal">Horizontal</label>
</fieldset>
</form>
</div><!-- /block-a -->
<div class="ui-block-b">
<form>
<div data-role="controlgroup" id="controlgroup"></div>
</form>
</div><!-- /block-b -->
</div><!-- /grid -->
<div data-demo-html="true" data-demo-js="true" data-demo-css="true">
<form>
<div class="ui-body ui-body-d ui-corner-all">
<p>Controlgroup...</p>
<div data-role="controlgroup" id="my-controlgroup"><!-- items will be injected here --></div>
</div>
</form>
<div data-role="fieldcontain">
<label for="prepend">Add item</label>
<button id="prepend" data-role="button" data-mini="true" data-inline="true">Prepend</button>
<label for="append" class="ui-hidden-accessible">Action</label>
<button id="append" data-role="button" data-mini="true" data-inline="true">Append</button>
</div>
<form action="#" method="get">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend>Widget type</legend>
<input type="radio" name="radio-widget" id="link" value="link" checked="checked">
<label for="link">Link</label>
<input type="radio" name="radio-widget" id="select" value="select">
<label for="select">Select</label>
<input type="radio" name="radio-widget" id="checkbox" value="checkbox">
<label for="checkbox">Checkbox</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend>Action<br><small>on click/change</small></legend>
<input type="radio" name="radio-action" id="remove" value="remove" checked="checked">
<label for="remove">Remove</label>
<input type="radio" name="radio-action" id="hide" value="hide">
<label for="hide">Hide</label>
<input type="radio" name="radio-action" id="width" value="width">
<label for="width">Nothing</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend>Switch orientation</legend>
<input type="radio" name="radio-orientation" id="isVertical" value="isVertical" checked="checked">
<label for="isVertical">Vertical</label>
<input type="radio" name="radio-orientation" id="isHorizontal" value="isHorizontal">
<label for="isHorizontal">Horizontal</label>
</fieldset>
</div>
</form>
</div><!--/demo-html -->
</div><!-- /content -->

0 comments on commit 1f8302d

Please sign in to comment.