Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
405 lines (387 sloc) 18.2 KB
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta charset="utf-8"/>
<title>Test javascript-widgets form</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"><!-- --></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"><!-- --></script>
<script type="text/javascript" src="widgets2.js"><!-- --></script>
<script type="text/javascript">
//<!--
$(widgets.contentLoaded);
function subFormSubmitted() {
$("#result-msg").text("subForm Submitted function called ok");
}
function subFormSubmittedResult(form, data) {
$("#result-msg").text(JSON.stringify(data));
}
//-->
</script>
<!-- base -->
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" />
<style>
h2, h3, h4 {
color:blue;
}
h3 {
margin-top:2em;
}
.block {
display:block;
margin:0.5em;
}
textarea {
font-size:110%;
}
.dateYMD {
width: 11ex;
}
.dateYM {
width: 7.5ex;
}
.dateMMY {
width: 14em;
}
.dateY {
width: 4.5ex;
}
.thumbnail {
height:100px;
}
</style>
</head>
<body>
<div class="widget-form">
<h2>Test javascipt widgets form page</h2>
<!-- Field registartion -->
<input type="hidden" class="form-fields" value="hidden1, hidden2, stext1, stext2, chkbox1, radio1, sel1, vA.0, vB.0, vC.0, test.0.label, test.0" />
<!-- optional hidden fields -->
<input type="hidden" id="hidden1" value="HideOne" />
<input type="hidden" id="hidden2" value="HideTwo" />
<input type="hidden" id="test:test" value="Test:Test" />
<div>
<h3>Simple inputs</h3>
<label class="block">text: <input type="text" id="stext1" size="40" /></label>
<label class="block">textarea: <textarea id="stext2" rows="2" cols="40"></textarea></label>
<label class="block">checkbox: <input type="checkbox" id="chkbox1" value="chk1"/></label>
<div class="block">radio: <!-- NOTE: radio fields must use the 'name' attribute only and not 'id' -->
<label><input type="radio" name="radio1" value="r1"/>one</label>
<label><input type="radio" name="radio1" value="r2"/>two</label>
<label><input type="radio" name="radio1" value="r3"/>three</label>
</div>
<label class="block">Please select one:
<select id="sel1">
<option value="a">A</option>
<option value="b" selected="selected">B</option>
<option value="c">C</option>
</select>
</label>
</div>
<!--
####
<div>
<h3>testing</h3>
<table class="input-list">
<tfoot>
<tr>
<td colspan="7"><input class="add-another-item" type="button" value="Add another creator" /></td>
</tr>
</tfoot>
<tbody>
<tr class="item-input-display">
<td class="sort-number">1</td>
<td>
<span class="data-source-drop-down" id="testid.0"
data-json-source-urlX="dropDwonListSample.json"
data-json-data='{
"namespace": "http://id.loc.gov/vocabulary/relators/",
"list": [
{"children": 0, "id": "cre", "label": "Creator"},
{"children": 0, "id": "art", "label": "Artist"},
{"children": 0, "id": "aut", "label": "Author"},
{"children": 0, "id": "cur", "label": "Curator"},
{"children": 0, "id": "mus", "label": "Musician"},
{"children": 0, "id": "msd", "label": "Musical Director"},
{"children": 0, "id": "cmp", "label": "Composer"},
{"children": 0, "id": "drt", "label": "Director"},
{"children": 0, "id": "pro", "label": "Producer"},
{"children": 0, "id": "oth", "label": "Other"}
],
"selectable": 1
}'
data-id="dc:creator.foaf:Person.0.usq:role">
</span>
</td>
<td class="delete-item"><a href="#">delete</a></td>
<td style="width: 100%;"></td>
</tr>
</tbody>
</table>
</div>
####
-->
<div>
<h3>Date widgets</h3> <!-- YMD, YM, Y -->
<label class="block">Date (YMD): <input type="text" placeholder="YYYY/MM/DD" class="dateYMD" id="dateYMD"/></label>
<label class="block">Date (YM):&#160;&#160; <input type="text" placeholder="YYYY/MM" class="dateYM" id="dateYM"/></label>
<label class="block">Date (Year): <input type="text" placeholder="year" class="dateY" id="dateY"/></label>
</div>
<div>
<h3>Simple text list widgets</h3> <!-- add, delete, ordered? -->
<h4>Not sortable</h4>
<table class="input-list">
<tbody> <!-- -->
<tr class="item-display">
<td class="sort-number"></td>
<td class="item-display-item" style="border:1px solid #cccccc;"></td>
<td class="delete-item"><a href="#">delete</a></td>
<td style="width:100%;"></td>
</tr>
<tr class="item-input">
<td></td>
<td><input type="text" placeholder="enter a tag here" id="tag.0"/></td>
<td><input type="button" class="item-add" value="Add"/></td>
<td></td>
</tr>
</tbody>
</table>
<h4>Not sortable input (min-size=3, max-size=5)</h4>
<table class="input-list" data-min-size="3" data-max-size="5">
<tbody> <!-- -->
<tr class="item-input-display">
<td><input type="text" placeholder="enter a tag here" id="tag2.0"/></td>
<td class="delete-item"><a href="#">delete</a></td>
<td style="width:100%;"></td>
</tr>
<tr>
<td><input type="button" class="add-another-item" value="Add another tag"/></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<h4>Sortable</h4>
<table class="input-list sortable">
<tbody>
<tr class="item-input-display sortable-item">
<td class="sort-handle"><img src="grippy.png"/></td>
<td class="sort-number">1</td>
<td><input type="text" placeholder="enter a keyword here" id="keyword.0"/></td>
<td><button class="delete-item">delete</button></td>
<td style="width:100%;"></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="button" class="add-another-item" value="Add another keyword"/></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div>
<h3>Data entry table</h3> <!-- add/delete a row, Order rows(option) -->
<h4>With sortable data rows</h4>
<table class="input-list sortable">
<tbody>
<tr><th colspan="3" style="color:green;">Optional Header</th><th></th><th></th></tr>
<tr class="item-input-display sortable-item">
<td> =&#160;<span class="sort-number"></span>&#160;= </td>
<td><input type="text" placeholder="enter a value here" id="vA.0"/></td>
<td>
<select id="vB.0">
<option value="">Select a color</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</td>
<td><label><input type="checkbox" value="yes" id="vC.0"/>Extra</label></td>
<td class="delete-item"><a href="#">delete</a></td>
</tr>
<tr>
<td></td>
<td><input type="button" class="add-another-item" value="Add another item"/></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3" style="text-align:center;color:green;">Optional Footer</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div>
<h3>Datasource drop-down</h3> <!-- JSON source or list, defaultOption, (add) mutli-select, checkbox, radio -->
<table class="input-list sortable">
<tbody>
<tr class="item-display sortable-item">
<td> =&#160;<span class="sort-number"></span>&#160;= </td>
<td>
<span class="item-display-item"></span>
<span class="item-display-item" style="color:lightblue;"></span>
<a class="delete-item" href="#">delete</a></td>
<td></td>
</tr>
<tr class="item-input">
<td colspan="2">
<span class="data-source-drop-down" id="dsdd.0">
<span class="json-data-source">
{
"list": [
{"label":"GroupA", "id":"gA", "children":1},
{"label":"GroupB", "id":"gB", "children":"GroupB"},
{"label":"GroupC", "id":"gC", "children":"GroupC.json"}
],
"namespace":"addThisToTheId",
"gA": {
"list": [
{"label":"Light-Red", "id":"gA-red"},
{"label":"Light-Green", "id":"gA-green"},
{"label":"Light-Blue", "id":"gA-blue"}
],
"selectable":1,
"default":"gA-blue"
},
"GroupB": {
"list": [
{"label":"Dark-Red", "id":"gB-red"},
{"label":"Dark-Green", "id":"gB-green"},
{"label":"Dark-Blue", "id":"gB-blue"}
],
"selectable":1,
"default":""
},
"GroupC.json": {
"list": [
{"label":"Lime-Red", "id":"gC-red"},
{"label":"Lime-Green", "id":"gC-green", "children":"lGreenTypes"},
{"label":"Lime-Blue", "id":"gC-blue"}
],
"selectable":1,
"default":"gC-green"
},
"lGreenTypes": {
"list": [
{"label":"Green Go", "id":"gC-go"},
{"label":"Green Goo", "id":"gC-goo"},
{"label":"Green Stuff", "id":"gC-stuff"}
],
"selectable":1,
"default":""
}
}
</span>
<input type="text" class="selection-added-label" id="test.0.label" value="testing" />
<input type="text" class="selection-added-id" id="test.0" value="testing" />
</span>
<button class="item-add selection-add add-unique-only">
Add '<span class="selection-add-label"></span>'(id=<span class="selection-added-id"></span>)
</button>
</td>
</tr>
</tbody>
</table>
<!-- -->
</div>
<div>
<h3>Datasource drop-down 2
<span class="helpWidget" style="float:right;font-size:75%;color:green;padding-right:2em;"
data-help-content-id="help-content">
<span class="helpWidget-show">help</span>
<span class="helpWidget-hide">hide-help</span>
</span>
</h3> <!-- JSON source or list, defaultOption, (add) mutli-select, checkbox, radio -->
<div id="help-content" style="border:1px solid lightgreen;color:green;padding:1ex;margin:0.5ex;">
This is a sample help content.
<div>The quick brown fox <div>jumps</div> over the lazy dog.</div>
<p>max-size=1</p>
</div>
<table class="input-list" data-max-size="2" id="inputListTest2">
<tbody> <!-- -->
<tr class="item-display">
<td>
<span class="item-display-item"></span>
<span class="item-display-item" style="color:lightblue;"></span>
<a class="delete-item" href="#">delete</a></td>
<td></td>
</tr>
<tr class="item-input">
<td colspan="2">
<span class="data-source-drop-down">
<!-- <input type='hidden' class='json-data-source-url' value=''/> -->
<span class="json-data-source">
{
"namespace": "http://namespace.url",
"list": [
{"children": 1, "id": "x1", "label": "One"},
{"children": 0, "id": "x2", "label": "Two", "selectable": 1}
],
"x1": {
"list": [
{"id": "x1a", "label": "OneA"},
{"id": "x1b", "label": "OneB"}
],
"selectable":1,
"default": "x1b"
}
}
</span>
<input type="text" class="selection-added-label" id="test.0.label" value="testing" />
<input type="text" class="selection-added-id" id="test.0" value="testing" />
</span>
<button class="item-add selection-add add-unique-only" id="sa-but">
Add '<span class="selection-add-label"></span>'(id=<span class="selection-added-id"></span>)
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="widget-form">
<h3>Subform</h3>
<div style='border:1px solid blue;padding:1ex;'>
<input type="hidden" class="form-fields" value="file1, text99" />
<input type="hidden" class="form-fields-readonly" value="subHidden ajax" />
<input type="hidden" id="subHidden" value="hiddenSubValue"/>
<input type="hidden" class="form-fields-submit-url" value="/upload?ajax=1" />
<h4>File Uploading</h4>
<div class="file-upload-section" style="border:1px dotted blue;padding:1em;">
<label>File: <input type="file" id="file1" class="file-upload"/><span class="file-upload-info" style="padding-left:4em;"> </span></label>
</div>
<p> Text: <input type='text' id='text99' value="testing"/> </p>
<button>test</button>
<p><button class="form-fields-submit">Submit</button></p>
<input type="hidden" class="submit-func" value="subFormSubmitted"/>
<input type="hidden" class="submit-result-func" value="subFormSubmittedResult"/>
<!--<span class="sumbitted-result" style="padding-left:2em;font-size:120%;"> </span>-->
<div style='color:orange; border:1px solid orange; padding:1ex;'>
Results: <span class="submitted-result"> </span> <br/>
<span id='result-msg'> </span>
</div>
</div>
</div>
<div>
<h3>Form validation</h3>
See <a href='validationTest.html'>validation tests</a>
<div>
<input type='text' id='vtest'/>
<label for="vtest" class="validation-err-msg" style="color:red;"> Must not be Empty!</label>
<pre class="validation-rules">
rule {for(vtest);test(notEmpty);when(onBlur);};
</pre>
</div>
</div>
<div style='border:1px solid lightgray;padding:1em;margin:1em;'>
<button class="form-save">Save</button>
<button class="form-reset">Reset</button>
<button class="form-restore">Restore</button>
</div>
</div>
</body>
</html>
Something went wrong with that request. Please try again.