xml/json formats for text
from xml | from json |
<item id = "info" // required, will generated automatically if empty type = "text" // required, item type text = "dhtmlxToolbar Demo" // required, item text, use span style='color:red;' to customize if any title = "Tooltip here" // optional, tooltip for item hidden = "true" // optional, hide item > // optional, userdata <userdata name="p1">value1</userdata> <userdata name="p2">value2</userdata> </item> |
{ id: "info" // required, will generated automatically if empty type: "text" // required, item type text: "dhtmlxToolbar Demo" // required, item text, use span style='color:red;' to customize if any title: "Tooltip here" // optional, tooltip for item hidden: true // optional, hide item userdata: { // optional, userdata p1: "value1" // userdara, name:value pairs p2: "value2" } } |
The purpose of this demo is to show you list of available xml and json attributes in action
</> Source
<!DOCTYPE html>
<html>
<head>
<title>xml/json formats for text</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>
table.my_table td {
text-align: left;
vertical-align: top;
padding-right: 20px;
padding-bottom: 10px;
font-family: Tahoma;
}
table.my_table td.item_type {
height: 20px;
font-size: 12px;
vertical-align: middle;
}
pre.my_code {
font-size: 11px;
}
</style>
<script>
var myToolbarXML;
var myToolbarJSON;
function doOnLoad() {
myToolbarXML = new dhtmlXToolbarObject({
parent: "toolbarObjXML",
icons_path: "../common/imgs/",
xml: "../common/all_items/text.xml",
onload: function(){logUserData("myToolbarXML", this);}
});
myToolbarJSON = new dhtmlXToolbarObject({
parent: "toolbarObjJSON",
icons_path: "../common/imgs/",
json: "../common/all_items/text.json",
onload: function(){logUserData("myToolbarJSON", this);}
});
}
function logUserData(tbName, tbInst) {
var userData = {
my_data_name: tbInst.getUserData("info", "my_data_name"),
more_info: tbInst.getUserData("info", "more_info")
};
// console.log(tbName, userData);
}
</script>
</head>
<body onload="doOnLoad();">
<table border="0" cellspacing="0" cellpadding="0" class="my_table" width="100%">
<tr>
<td width="50%">from xml</td>
<td width="50%">from json</td>
</tr>
<tr>
<td><div style="height: 150px;"><div id="toolbarObjXML"></div></div></td>
<td><div style="height: 150px;"><div id="toolbarObjJSON"></div></div></td>
</tr>
<tr>
<td>
<pre class="my_code"><item
id = "info" // required, will generated automatically if empty
type = "text" // required, item type
text = "dhtmlxToolbar Demo" // required, item text, use span style='color:red;' to customize if any
title = "Tooltip here" // optional, tooltip for item
hidden = "true" // optional, hide item
>
// optional, userdata
<userdata name="p1">value1</userdata>
<userdata name="p2">value2</userdata>
</item></pre>
</td>
<td>
<pre class="my_code">{
id: "info" // required, will generated automatically if empty
type: "text" // required, item type
text: "dhtmlxToolbar Demo" // required, item text, use span style='color:red;' to customize if any
title: "Tooltip here" // optional, tooltip for item
hidden: true // optional, hide item
userdata: { // optional, userdata
p1: "value1" // userdara, name:value pairs
p2: "value2"
}
}</pre>
</td>
</tr>
</table>
<div>
The purpose of this demo is to show you list of available xml and json attributes in action
</div>
</body>
</html>
Documentation
Check documentation to learn how to use the components and easily implement them in your applications.