Append object
for this mode cell will add scrolls automatically,
no needs to specify width/height to attached object
no needs to specify width/height to attached object
</> Source
<!DOCTYPE html>
<html>
<head>
<title>Append object</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
<script src="../../../codebase/dhtmlx.js"></script>
<style>
div#layoutObj {
position: relative;
margin-top: 10px;
margin-left: 10px;
width: 600px;
height: 400px;
}
div#objToAppend1,
div#objToAppend2,
div#objToAppend3,
div#objToAppend4 {
position: relative;
font-family: Roboto, Arial, Helvetica;
font-size: 14px;
color: #404040;
}
</style>
<script>
var myLayout;
function doOnLoad() {
myLayout = new dhtmlXLayoutObject({
parent: "layoutObj",
pattern: "3L"
});
myLayout.cells("b").appendObject("objToAppend1");
myLayout.cells("b").appendObject("objToAppend2");
myLayout.cells("b").appendObject("objToAppend3");
myLayout.cells("b").appendObject("objToAppend4");
}
function doOnUnload() {
if (myLayout != null && myLayout.unload != null) {
myLayout.unload();
myLayout = null;
}
}
</script>
</head>
<body onload="doOnLoad();" onunload="doOnUnload();">
<div id="layoutObj"></div>
<div style="position: relative; margin-top: 45px; margin-left: 10px;">
for this mode cell will add scrolls automatically,<br>
no needs to specify width/height to attached object
</div>
<div id="objToAppend1" style="color: red; display: none;">
<div style="margin: 5px 8px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div id="objToAppend2" style="color: green; display: none;">
<div style="margin: 5px 8px;">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<div id="objToAppend3" style="color: blue; display: none;">
<div style="margin: 5px 8px;">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</div>
<div id="objToAppend4" style="color: darkorange; display: none;">
<div style="margin: 5px 8px;">
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</body>
</html>
Documentation
Check documentation to learn how to use the components and easily implement them in your applications.