71 lines
1.9 KiB
HTML
71 lines
1.9 KiB
HTML
<style>
|
|
.pointer-icon {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.property-list {
|
|
list-style-type: none;
|
|
list-style-image: none;
|
|
padding-left: 26px;
|
|
}
|
|
|
|
.property-name {
|
|
width: 12em;
|
|
display: inline-block;
|
|
}
|
|
|
|
.property-value {
|
|
padding: 0 0.2em;
|
|
min-width: 8em;
|
|
display: inline-block;
|
|
text-align: right;
|
|
}
|
|
</style>
|
|
<div class="ui-widget ui-widget-content ui-corner-all">
|
|
<div class="ui-widget-header">Property Tree</div>
|
|
<div data-bind="template: { name: 'propertytree-template', data: properties }"></div>
|
|
</div>
|
|
<script type="text/html" id="propertytree-template">
|
|
<ul class="property-list" data-bind="foreach: $data">
|
|
<li>
|
|
<span class="ui-icon pointer-icon" style="display: inline-block;"
|
|
data-bind="
|
|
css: {
|
|
'ui-icon-triangle-1-e': hasChildren,
|
|
'ui-icon-triangle-1-se': isExpanded,
|
|
'ui-icon-refresh': hasValue,
|
|
},
|
|
attr: {
|
|
title: hasValue ? 'click to refresh' : 'click to expand/collapse',
|
|
},
|
|
click: toggle,
|
|
"></span>
|
|
<span class="property-name"
|
|
data-bind="
|
|
text: indexedName,
|
|
css: {
|
|
'pointer-icon': hasChildren,
|
|
},
|
|
click: toggle,
|
|
"></span>
|
|
|
|
<span class="property-value ui-state-hover pointer-icon ui-corner-all"
|
|
data-bind="
|
|
text: value,
|
|
visible: hasValue,
|
|
click: valueEdit,
|
|
"></span>
|
|
|
|
<div data-bind="
|
|
template: {
|
|
name: 'propertytree-template',
|
|
data: children
|
|
},
|
|
visible: isExpanded
|
|
"></div>
|
|
</li>
|
|
</ul>
|
|
</script>
|
|
<script type="text/html" id="inplace-editor-template">
|
|
<input style="width: 8em" >
|
|
</script>
|