Updated history and example. Fixed bottom margin of submenu
This commit is contained in:
parent
913af51aab
commit
0ddc9407b0
|
@ -3,6 +3,11 @@
|
|||
https://github.com/josdejong/jsoneditor
|
||||
|
||||
|
||||
## not yet released, version 5.7.0
|
||||
|
||||
- Implemented support for template items. Thanks @israelito3000.
|
||||
|
||||
|
||||
## 2017-04-15, version 5.6.0
|
||||
|
||||
- Implemented readonly option for modes `text` and `code.`
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>JSONEditor | JSON schema validation</title>
|
||||
<title>JSONEditor | Item templates</title>
|
||||
|
||||
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
|
||||
<script src="../dist/jsoneditor.js"></script>
|
||||
|
@ -19,33 +19,42 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>JSON schema validation</h1>
|
||||
<h1>Item templates</h1>
|
||||
<p>
|
||||
This example demonstrates JSON schema validation. The JSON object in this example must contain properties <code>firstName</code> and <code>lastName</code>, can can optionally have a property <code>age</code> which must be a positive integer.
|
||||
</p>
|
||||
<p>
|
||||
See <a href="http://json-schema.org/" target="_blank">http://json-schema.org/</a> for more information.
|
||||
Using item templates, the options in the context menu under "insert" and "append" can be extended with extra options, containing a domain specific template like a "Person", "Contact", "Order", "Address", etc.
|
||||
</p>
|
||||
|
||||
<div id="jsoneditor"></div>
|
||||
|
||||
<script>
|
||||
|
||||
var json = {
|
||||
firstName: 'John',
|
||||
lastName: 'Doe',
|
||||
gender: null,
|
||||
age: 28
|
||||
};
|
||||
var json = [
|
||||
{
|
||||
firstName: 'John',
|
||||
lastName: 'Doe',
|
||||
age: 28
|
||||
}
|
||||
];
|
||||
|
||||
var options = {
|
||||
templates: [
|
||||
{
|
||||
"menu": "Special Node",
|
||||
"name": "SpecialNode",
|
||||
"data": {
|
||||
"field1": "value1",
|
||||
"field2": "value2"
|
||||
menu: 'Person',
|
||||
name: 'PersonTemplate',
|
||||
data: {
|
||||
'firstName': 'John',
|
||||
'lastName': 'Do',
|
||||
'age': 28
|
||||
}
|
||||
},
|
||||
{
|
||||
menu: 'Address',
|
||||
name: 'AddressTemplate',
|
||||
data: {
|
||||
'street': "",
|
||||
'city': "",
|
||||
'state': "",
|
||||
'ZIP code': ""
|
||||
}
|
||||
}
|
||||
]
|
||||
|
@ -54,6 +63,7 @@
|
|||
// create the editor
|
||||
var container = document.getElementById('jsoneditor');
|
||||
var editor = new JSONEditor(container, options, json);
|
||||
editor.expandAll();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -321,7 +321,11 @@ ContextMenu.prototype._onExpandItem = function (domItem) {
|
|||
var height = ul.clientHeight; // force a reflow in Firefox
|
||||
setTimeout(function () {
|
||||
if (me.expandedItem == domItem) {
|
||||
ul.style.height = (ul.childNodes.length * 24) + 'px';
|
||||
var childsHeight = 0;
|
||||
for (var i = 0; i < ul.childNodes.length; i++) {
|
||||
childsHeight += ul.childNodes[i].clientHeight;
|
||||
}
|
||||
ul.style.height = childsHeight + 'px';
|
||||
ul.style.padding = '5px 10px';
|
||||
}
|
||||
}, 0);
|
||||
|
|
Loading…
Reference in New Issue