All components dhtmlxToolbar Init on page Object API extended init

Object API extended init

</> Source
<!DOCTYPE html>
<html>
<head>
	<title>Object API extended init</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>
	<script>
		var myToolbar;
		function doOnLoad() {
			toolbar = new dhtmlXToolbarObject({
				parent: "toolbarObj",
				icon_path: "../common/imgs/",
				items: [
					{type: "buttonSelect", id: "new", text: "New", img: "new.gif", img_disabled: "new_dis.gif", options:[
						{id: "new_text", type: "obj", text: "Text Document", img: "text_document.gif"},
						{id: "new_excel", type: "obj", text: "Stylesheet", img: "stylesheet.gif"},
						{id: "new_db", type: "obj", text: "Database", img: "database.gif"},
						{id: "new_pp", type: "obj", text: "Presentation", img: "presentation.gif"},
						{id: "new_s1", type: "sep" },
						{id: "new_other", type: "obj", text: "Other", img: "other.gif"}
					]},
					{type: "separator", id: "sep1"},
					{type: "button", id: "open", img: "open.gif"},
					{type: "buttonTwoState", id: "autosave", text: "Autosave", img: "save.gif", pressed: true, tooltip: "Autosave every 5 minutes"},
					{type: "button", id: "save_as", text: "Save As...", disabled: true, img: "save_as.gif", img_disabled: "save_as_dis.gif"},
					{type: "separator", id: "sep2"},
					{type: "buttonInput", id: "inp", text: "Input", width: 50},
					{type: "slider", id: "sld", length: 70, value_min: 10, value_max: 100, value_now: 70, text_min: "10 MBit", text_max: "100 MBit", tip_template: "Limit connection speed to %v MBit"},
					{type: "separator", id: "sep3"},
					{type: "button", id: "cut", img: "cut.gif"},
					{type: "button", id: "copy", img: "copy.gif"},
					{type: "buttonTwoState", id: "paste", img: "paste.gif"},
					{type: "separator", id: "sep4"},
					{type: "buttonSelect", id: "print", text: "Print", img: "print.gif", img_disabled: "print_dis.gif", options:[
						{id: "print_page", type: "obj", text: "Page", img: "page.gif"},
						{id: "print_range", type: "obj", text: "Page Range", img: 'page_range.gif'},
						{id: "print_sel", type: "obj", text: "Selection", img: 'selection.gif'},
						{id: "print_sep1", type: "sep"},
						{id: "print_cfg", type: "obj", text: "Settings", img: 'settings.gif'}
					]},
					{type: "separator", id: "sep5"},
					{type: "text", id: "info", text: "dhtmlxToolbar Demo"}
				]
			});
		}
	</script>
</head>
<body onload="doOnLoad();">
	<div style="height: 150px;">
		<div id="toolbarObj"></div>
	</div>
</body>
</html>

Documentation

Check documentation to learn how to use the components and easily implement them in your applications.