xml/json formats for buttonInput
from xml | from json |
<item id = "filter" // required, will generated automatically if empty type = "buttonInput" // required, item type value = "Text inside input" // optional, text inside input title = "Tooltip here" // optional, tooltip for item enabled = "false" // optional, disable item hidden = "true" // optional, hide item width = "120" // optional, input width > // optional, userdata <userdata name="p1">value1</userdata> <userdata name="p2">value2</userdata> </item> |
{ id: "filter" // required, will generated automatically if empty type: "buttonInput" // required, item type value: "Text inside input" // optional, text inside input title: "Tooltip here" // optional, tooltip for item enabled: false // optional, disable item hidden: true // optional, hide item width: 120 // optional, input width userdata: { // optional, userdata p1: "value1" // userdara, name:value pairs p2: "value2" } // deprecated: disabled: true // => enabled: false text: "Text inside input" // => value: "Text inside input" } |
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 buttonInput</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/button_input.xml",
onload: function(){logUserData("myToolbarXML", this);}
});
myToolbarJSON = new dhtmlXToolbarObject({
parent: "toolbarObjJSON",
icons_path: "../common/imgs/",
json: "../common/all_items/button_input.json",
onload: function(){logUserData("myToolbarJSON", this);}
});
}
function logUserData(tbName, tbInst) {
var userData = {
my_data_name: tbInst.getUserData("filter", "my_data_name"),
more_info: tbInst.getUserData("filter", "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 = "filter" // required, will generated automatically if empty
type = "buttonInput" // required, item type
value = "Text inside input" // optional, text inside input
title = "Tooltip here" // optional, tooltip for item
enabled = "false" // optional, disable item
hidden = "true" // optional, hide item
width = "120" // optional, input width
>
// optional, userdata
<userdata name="p1">value1</userdata>
<userdata name="p2">value2</userdata>
</item></pre>
</td>
<td>
<pre class="my_code">{
id: "filter" // required, will generated automatically if empty
type: "buttonInput" // required, item type
value: "Text inside input" // optional, text inside input
title: "Tooltip here" // optional, tooltip for item
enabled: false // optional, disable item
hidden: true // optional, hide item
width: 120 // optional, input width
userdata: { // optional, userdata
p1: "value1" // userdara, name:value pairs
p2: "value2"
}
// deprecated:
disabled: true // => enabled: false
text: "Text inside input" // => value: "Text inside input"
}</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.