Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
240 lines (228 sloc) 10.2 KB
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta charset="utf-8"/>
<title>An Example Widgets Form</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"><!-- --></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"><!-- --></script>
<script type="text/javascript" src="widgets2.js"><!-- --></script>
<script type="text/javascript">
var savedData={}, widgetForm, result;
$(function(){
widgets.contentLoaded(function(){ // initialise widgets
// this callback is called when the widgets has finished initialising
widgetForm = widgets.forms[0];
});
$("#restore").click(testRestore);
result=$("#result");
})
function testSave(widgetForm, data){
var rt;
gw=widgetForm; gd=data;
savedData = data;
$("#savedData").text(JSON.stringify(data));
rt=result.text("Saved OK");
rt.stop().css("opacity",1).show().fadeOut(3000);
//return false; // false - Cancel (do not do ajax save)
}
function testRestore(){
var rt;
widgetForm.restore(savedData);
rt=result.text("Restored OK");
rt.stop().css("opacity",1).show().fadeOut(3000);
}
</script>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" />
<style>
h2 { color:green; }
h3 { color:darkgreen;}
h4 { color:darkblue;}
div { padding:1em;}
</style>
</head>
<body>
<h2>Example Widgets Form</h2>
<!--<div class="widget-form" style="padding:1em;"
data-init-data-url="data1.json" - Optional Initial form data values
data-pre-save-func="" - called before the form data is collected
data-save-func="testSave" - called with json form data(2nd arg) but before being posted to the save-url
data-save-url="" -
data-submit-url="" -
data-form-fields="name, dob, chkbox1, radio1, comments, sel1"
data-form-fields-readonly="formID"> -->
<div class="widget-form" style="padding:1em;"
data-pre-save-func=""
data-save-func="testSave"
data-save-url=""
data-submit-url=""
data-form-fields="name, dob, chkbox1, radio1, comments, sel1,
language, language-label, id"
data-form-fields-readonly="formID">
<input type="hidden" id="formID" value="1234"/>
<label>Name: <input type="text" id="name" /></label><br/>
DOB: <input type="text" class="dateYMD" id="dob" placeholder="YYYY/MM/DD" /> <br/>
checkbox: <input type="checkbox" id="chkbox1" value="chk1"/>
<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>
textarea: <textarea id="comments" rows="2" cols="40" style="vertical-align:middle;"></textarea> <br/>
<div>
<h3>Simple text list widget</h3>
<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>
<h4>More complex input list</h4>
<h4>Multiply inputs</h4>
<table class="input-list sortable"><tbody> <!-- -->
<tr class="item-display sortable-item">
<td class="sort-number"></td>
<td class="item-display-item" style="border:1px solid #cccccc;"></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="tag1.0" size="40"/></td>
<td>
<input type="text" placeholder="enter a tag here" id="tag2.0" size="40"/>
</td>
<td><input type="button" class="item-add" value="Add"/></td>
<td></td>
</tr>
</tbody></table>
</div>
<hr/>
<div>
<h3>Drop-down datasource list input widget</h3>
Language:
<span class="data-source-drop-down"
data-json-data='{
"results":[
{"id":"eng", "label":"English"},
{"id":"fre", "label":"French"},
{"id":"res", "label":"Russian"},
{"id":"spa", "label":"Spanish"},
{"id":"ger", "label":"German"}
]
}'
data-id-key="id"
data-label-key="label"
data-list-key="results">
<span class="selection-added">
<input type="hidden" class="selection-added-id"
id="language" value="" />
<input type="text" class="selection-added-label" size="20" readonly="readonly"
id="language-label" value="" />
<a href="#" class="clear-item">change</a>
</span>
<span class="drop-down-location">
<button class="selection-add add-unique-only" data-add-on-click="1">
Select <span class="selection-added-label"> </span>
</button>
</span>
</span>
</div>
<div>
<h3>Drop-down datasource list (with multiply drop-downs) input widget</h3>
<span class="data-source-drop-down"
data-json-data='{
"namespace": "http://namespace.url",
"list": [
{"children":1, "id":"x1", "label":"One", "selectable":0},
{"children":1, "id":"x2", "label":"Two", "selectable":1}
],
"x1": { "list":
[
{"id": "x1a", "label": "OneA"},
{"id": "x1b", "label": "OneB"},
{"id": "x1c", "label": "OneC"}
], "selectable":1,
"default": "x1b"
},
"x2": { "list":
[
{"id": "x2a", "label": "TwoA", "children":1, "selectable":0},
{"id": "x2b", "label": "TwoB", "selectable":1}
]
},
"x2a": { "list":
[
{"id": "x2a1", "label": "TwoA1"},
{"id": "x2a2", "label": "TwoA2"}
], "selectable":1
}
}'>
<span class="selection-added">
<input type="hidden" class="selection-added-id"
id="dataIdx.0" value="" />
<input type="text" class="selection-added-label" size="20" readonly="readonly"
id="dataLabelx.0" value="" />
<a href="#" class="clear-item">change</a>
</span>
<span class="drop-down-location">
<button class="selection-add add-unique-only" data-add-on-click="1">
Select <span class="selection-added-label" style="font-size:smaller;"> </span>
</button>
</span>
</span>
</div>
<hr/>
<div>
<button id="save" class="form-fields-save">Save/Submit</button> &#160;
<button id="restore">Restore saved data</button>
<span id="result" style="color:green;"> </span>
</div>
<div style="border:1px dotted black;padding:0.5ex;font-size:smaller;">
Saved data: <span id="savedData">{}</span>
</div>
</div>
</body>
</html>