Font select dialog

</> Source
<!DOCTYPE html>
<html>
<head>
	<title>Font select dialog</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#vp {
			height: 600px;
			border: 1px solid #cecece;
		}
		.dhtmlx_skin_material div.dhtmlx_wins_icon {
			display: none;
		}
		.dhtmlx_skin_material div.dhtmlx_window_active div.dhtmlx_wins_title {
			padding-left: 10px;
		}
	</style>
	<script>
		var myForm, formData;
		var dhxWins, w1;
		function doOnLoad() {
			formData = [
				{type: "settings", position: "label-top", labelWidth: "auto", inputWidth: 135, blockOffset: 12},
				{type: "block", inputWidth: "auto", list:[
					{type: "settings", offsetTop: 8},
					{type: "input", label: "Font:"},
					{type: "newcolumn"},
					{type: "input", label: "Font Style:", offsetLeft: 5},
					{type: "newcolumn"},
					{type: "input", label: "Size:", offsetLeft: 5, labelWidth: 78, inputWidth: 70}
				]},
				{type: "block", inputWidth: "auto", list:[
					{type: "settings", offsetTop: 2},
					{type: "select", name: "sel_font", label: "", options:[
						{value: "Arial", text: "Arial"},
						{value: "Arial Black", text: "Arial Black"},
						{value: "Calibri", text: "Calibri"},
						{value: "Comic Sans MS", text: "Comic Sans MS"},
						{value: "Consolas", text: "Consolas"},
						{value: "Courier New", text: "Courier New"},
						{value: "Georgia", text: "Georgia"},
						{value: "Impact", text: "Impact"},
						{value: "Lucida Console", text: "Lucida Console"},
						{value: "Lucida Sans Unicode", text: "Lucida Sans Unicode"},
						{value: "Microsoft Sans Serif", text: "Microsoft Sans Serif"},
						{value: "Segoe Print", text: "Segoe Print"},
						{value: "Segoe Script", text: "Segoe Script"},
						{value: "Segoe UI", text: "Segoe UI"},
						{value: "Symbol", text: "Symbol"},
						{value: "Tahoma", text: "Tahoma"},
						{value: "Times New Roman", text: "Times New Roman"},
						{value: "Trebuchet MS", text: "Trebuchet MS"},
						{value: "Verdana", text: "Verdana"}
					]},
					{type: "newcolumn"},
					{type: "select", name: "sel_type", label: "", offsetLeft: 5, options:[
						{value: "regular", text: "Regular"},
						{value: "italic", text: "Italic"},
						{value: "bold", text: "Bold"},
						{value: "bold italic", text: "Bold Italic"}
					]},
					{type: "newcolumn"},
					{type: "select", name: "sel_size", label: "", offsetLeft: 5, inputWidth: 70, options:[
						{value: "8", text: "8"},
						{value: "9", text: "9"},
						{value: "10", text: "10"},
						{value: "11", text: "11"},
						{value: "12", text: "12"},
						{value: "14", text: "14"},
						{value: "16", text: "16"},
						{value: "18", text: "18"},
						{value: "20", text: "20"}
					]}
				]},
				{type: "block", inputWidth: "auto", list:[

					{type: "fieldset", label: "Effects", inputWidth: 148, offsetTop: 5, list:[
						{type: "checkbox", label: "Strikeout", position: "label-right"},
						{type: "checkbox", label: "Underline", position: "label-right"},
						{type: "select", label: "Color:", position: "label-left", inputWidth: 76, offsetTop: 5, options:[
							{value: "black", text: "Black"}
						]}
					]},
					{type: "newcolumn"},
					{type: "block", inputWidth: "auto", blockOffset: 0, list:[
						{type: "fieldset", inputWidth:  198, label: "Sample", offsetTop: 5, offsetLeft: 5, list:[
							{type: "container", name: "sample", inputWidth: "auto", inputHeight: 48}
						]},
						{type: "select", label: "Script:", position: "label-top", inputWidth: 198, offsetTop: 5, offsetLeft: 5, options:[
							{value: "western", text: "Western"}
						]}
					]}

				]},
				{type: "block", inputWidth: "auto", list: [
					{type: "settings", offsetTop: 10},
					{type: "button", value: "Confirm", offsetLeft: 100},
					{type: "newcolumn"},
					{type: "button", value: "Cancel"}
				]}

			];

			// init windows
			dhxWins = new dhtmlXWindows();
			dhxWins.attachViewportTo("vp");
			w1 = dhxWins.createWindow("w1", 10, 10, 410, 500);
			w1.setText("Font");
			//w1.denyResize();
			w1.denyPark();
			w1.button("park").hide();
			w1.button("help").show();

			myForm = w1.attachForm(formData);

			// change select size
			for (var a in {sel_font:1,sel_type:1,sel_size:1}) myForm.getSelect(a).size = 7;

			// configure sample block
			myForm.getContainer("sample").innerHTML = "<div style='border: 1px solid #ddd; width: 153px;height: 35px;text-align:center;line-height:33px;'>AaBbXxYy</div>";

		}
	</script>
</head>
<body onload="doOnLoad();">
	<div id="vp"></div>
</body>
</html>

Documentation

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