Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

127 lines (116 sloc) 3.849 kB
<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[]" class="f8" value="boo" /> boo<br />
<input type="checkbox" name="f8[]" class="f8" value="foo" /> foo<br />
<input type="checkbox" name="f8[]" class="f8" value="gloo" /> gloo<br />
<input type="checkbox" name="f8[]" class="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="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.floodling.min.js"></script>
<script>
$(function() {
// [BASIC USAGE]
// You can use a selector for the specific element
$('#myF1').floodling('hello');
// Or, select a specific form and change the values of multiple elements using a JSON object
$('#myForm').floodling({
f2: "foo2",
f3: "foo3",
f4: "foo"
});
// Or, select a specific form and change the value of a specific element
$('#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/');
// [PASSING ARRAYS FOR MULTI-VALUED ELEMENTS]
// 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
// element selector, values only - selects gloo, doo
$('.f8').floodling(['gloo','doo']);
// result: selected: gloo, doo
// scope selector: name and values - selects boo; deselects doo
$('#myForm').floodling('f8[]', ['boo','doo']);
// result: boo, gloo
//scope selector: JSON - selects foo; deselects boo
$('#myForm').floodling({
'f8[]': ["boo", "foo"]
});
// result: foo, gloo
});
</script>
Jump to Line
Something went wrong with that request. Please try again.