This code works fine.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Layout - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div id="pg">pg</div>
<script type="text/javascript">
var data = {
"total": 7, "rows": [
{ "name": "Name", "value": "Bill Smith", "group": "ID Settings", "editor": "text" },
{ "name": "Address", "value": "", "group": "ID Settings", "editor": "text" },
{ "name": "Age", "value": "40", "group": "ID Settings", "editor": "numberbox" },
{ "name": "Birthday", "value": "01/02/2012", "group": "ID Settings", "editor": "datebox" },
{ "name": "SSN", "value": "123-456-7890", "group": "ID Settings", "editor": "text" },
{
"name": "Email", "value": "bill@gmail.com", "group": "Marketing Settings", "editor": {
"type": "validatebox",
"options": {
"validType": "email"
}
}
},
{
"name": "FrequentBuyer", "value": "false", "group": "Marketing Settings", "editor": {
"type": "checkbox",
"options": {
"on": true,
"off": false
}
}
}
]
};
(function ($) {
$.fn.myeasyUI = function (opts) {
return main(opts, this);
};
function main(opts, $element) {
console.log(opts);
if (!opts || !opts.plugin) { return $element; }
$element[opts.plugin](opts.plugincontent);
if (opts.contentarray instanceof Object) {
$.each(opts.contentarray, function (i, o) {
if (opts.plugin=='layout'){
$element[opts.plugin]('add', o);
var p = $element[opts.plugin]('panel', o.region);
var c = $('<div></div>').appendTo(p);
} else if (opts.plugin=='accordion'){
$element[opts.plugin]('add', o);
var panels = $element[opts.plugin]('panels');
var p = panels[panels.length-1];
var c = $('<div></div>').appendTo(p);
} else if (opts.plugin=='tabs'){
$element[opts.plugin]('add', o);
var panels = $element[opts.plugin]('tabs');
var p = panels[panels.length-1];
var c = $('<div></div>').appendTo(p);
} else {
var c = $('<div></div>').appendTo($element);
}
main(o, c);
// $element[opts.plugin]('add', main(o, $element));
});
}
return $element;
}
})(jQuery);
$('#pg').myeasyUI({
plugin: 'layout'
, plugincontent: { fit: true }
, contentarray: [{
region: 'west', width: '33%', title: 'west', split: true, plugin: 'propertygrid', plugincontent: {fit:true, showGroup: true, scrollbarSize: 0, data:data }
}, {
region: 'center', title: 'center', split: true, plugin: 'accordion', plugincontent: {fit:true}, contentarray: [{ title: 'accordion1', height: 300, content: 'accordion1' }, { title: 'accordion2', height: 300, plugin: 'propertygrid', plugincontent: {fit:true, showGroup: true, scrollbarSize: 0, data: data } }]
}, {
region: 'east', split: true, title: 'east', width: '33%', plugin: 'tabs', plugincontent: { fit: true, tabHeight: 20 }, contentarray: [{ title: 'tab1', content: 'tab1' }, { title: 'tab2', plugin: 'propertygrid', plugincontent: { fit:true, showGroup: true, scrollbarSize: 0, data: data } }]
}]
});
</script>
</body>
</html>
