new_examples.html

<title>Floodling</title>
<style>body { font-family: Helvetica, Arial, sans-serif; font-size: 16px; } </style>
<h1>Floodling Examples</h1>
Get the source code on <a href="//github.com/hyubs/floodling">GitHub</a>!
<form id="myForm">
	<h3>Textbox</h3>
	<p>
		<input type="text" name="f1" id="myF1" />
	</p>
	<h3>Password</h3>
	<p>
		<input type="password" name="f2" />
	</p>
	<h3>Text Area</h3>
	<p>
		<textarea name="f3"></textarea>
	</p>
	<h3>Single Select (Dropdown)</h3>
	<p>
		<select name="f4">
			<option>boo</option>
			<option>foo</option>
			<option>gloo</option>
			<option>doo</option>
		</select>
	</p>
	<h3>Multiple Select</h3>
	<p>
		<select name="f5[]" id="myMulti" multiple="multiple">
			<option value="boo">boo</option>
			<option value="foo">foo</option>
			<option value="gloo">gloo</option>
			<option value="doo">doo</option>
		</select>
	</p>
	<h3>Radio Button Group</h3>
	<p>
		<input type="radio" name="f6" value="boo" /> boo<br />
		<input type="radio" name="f6" value="foo" /> foo<br />
		<input type="radio" name="f6" value="gloo" /> gloo<br />
		<input type="radio" name="f6" value="doo" /> doo
	</p>
	<h3>Check Box</h3>
	<p>
		<input type="checkbox" name="f7a" value="boo" /> boo<br />
		<input type="checkbox" name="f7b" value="foo" checked="checked" /> foo<br />
		<input type="checkbox" name="f7c" value="gloo" /> gloo<br />
		<input type="checkbox" name="f7d" value="doo" /> doo
	</p>
	<h3>Check Box Group</h3>
	<p id="myCBG">
		<input type="checkbox" name="f8[]" value="boo" /> boo<br />
		<input type="checkbox" name="f8[]" value="foo" /> foo<br />
		<input type="checkbox" name="f8[]" value="gloo" /> gloo<br />
		<input type="checkbox" name="f8[]" value="doo" /> doo
	</p>
	<h3>Buttons - submit, reset, button</h3>
	<p>
		<input type="submit" name="f9" value="boo" />
		<input type="reset" name="f10" value="boo" />
		<input type="button" name="f11" value="boo" />
	</p>
	<h3>Image Button</h3>
	<p>
		<input type="image" name="f12" value="" />
	</p>
	<p>&nbsp;</p>
	<p>Check <a href="//github.com/hyubs/floodling">GitHub</a> for a complete list of supported form elements.</p>
</form>
<script src="jquery.min.js"></script>
<script src="jquery.floodling.js"></script>
<script>
$(function() {
	// You can use a selector for the specific element
	$('#myF1').floodling('hello');
	// Or, you can use a JSON object
	$('#myForm').floodling({
		f2: "foo2",
		f3: "foo3",
		f4: "foo"
	});

	$('#myForm').floodling('f6', 'gloo');
	$('#myForm').floodling('f7b', 0);
	$('#myForm').floodling('f7d', true);
	
	$('#myForm').floodling('f9', 'doos');
	$('#myForm').floodling('f10', 'door');
	$('#myForm').floodling('f11', 'doob');
	$('#myForm').floodling('f12', 'http://lorempixel.com/200/200/food/');

	// ADDITIONAL TEST CASES
	// MULTIPLE SELECT
	//scope selector, JSON - selects boo, foo
	$('#myForm').floodling({
		'f5[]': ["boo","foo"]
	});
	//element selector, values only - deselects boo, selects gloo
	$('#myMulti').floodling(['boo','gloo']);
	//result: selected: foo, gloo
	//scope selector, name and values - delesects foo, selects doo
	$('#myForm').floodling('f5[]', ['foo','doo']);
	//end result: selected: gloo, doo

	// CHECKBOX
	//scope selector: name and values - selects gloo, doo
	$('#myForm').floodling('f8[]', ['gloo','doo']);
	//scope selector: JSON - selects boo; deselects gloo
	$('#myForm').floodling({
		'f8[]': ["boo", "gloo"]
	});
	//result: boo, doo
	
});
</script>