Font awesome
| Open | ||
| Cut |
</> Source
<!DOCTYPE html>
<html>
<head>
<title>Font awesome</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/fonts/font_awesome/css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
<script src="../../../codebase/dhtmlx.js"></script>
<style>
table.my_table {
margin: 20px 0px;
}
table.my_table td {
padding-right: 20px;
}
</style>
<script>
var myRibbon;
function doOnLoad() {
myRibbon = new dhtmlXRibbon({
parent: "ribbonObj",
iconset: "awesome",
items: [
{type: "block", text: "Project", list: [
{id: "create", type: "button", text: "Create", img: "fa fa-file-o", imgdis: "fa fa-file-o", isbig: true},
{id: "open", type: "button", text: "Open Project", img: "fa fa-folder-open-o", imgdis: "fa fa-folder-open-o"},
{id: "print", type: "button", text: "Print", img: "fa fa-print", imgdis: "fa fa-print"},
{id: "save", type: "button", text: "Save As...", img: "fa fa-save", imgdis: "fa fa-save"}
]},
{type: "block", text: "Edit", list: [
{id: "cut", type: "button", text: "Cut", img: "fa fa-scissors", imgdis: "fa fa-scissors", isbig: true},
{id: "copy", type: "button", text: "Copy", img: "fa fa-files-o", imgdis: "fa fa-files-o", isbig: true},
{id: "paste", type: "button", text: "Paste", img: "fa fa-clipboard", imgdis: "fa fa-clipboard", isbig: true}
]}
]
});
}
function doOnUnload() {
if (myRibbon && myRibbon.unload) {
myRibbon.unload();
myRibbon = null;
}
}
function setImage(id, img, imgdis) {
myRibbon.setItemImage(id, img);
myRibbon.setItemImageDis(id, imgdis);
};
</script>
</head>
<body onload="doOnLoad();" onunload="doOnUnload();">
<div id="ribbonObj"></div>
<table cellspacing="1" cellpadding="1" class="my_table">
<tr>
<td>Open</td>
<td>
<input type="button" onclick="setImage('open', 'fa fa-file-o', 'fa fa-file-o');" value="open">
<input type="button" onclick="setImage('open', 'fa fa-print', 'fa fa-print');" value="print">
<input type="button" onclick="setImage('open', 'fa fa-save', 'fa fa-save');" value="save">
</td>
<td>
<input type="button" onclick="myRibbon.enable('open');" value="enable">
<input type="button" onclick="myRibbon.disable('open');" value="disable">
</td>
</tr>
<tr>
<td>Cut</td>
<td>
<input type="button" onclick="setImage('cut', 'fa fa-scissors', 'fa fa-scissors');" value="cut">
<input type="button" onclick="setImage('cut', 'fa fa-files-o', 'fa fa-files-o');" value="copy">
<input type="button" onclick="setImage('cut', 'fa fa-clipboard', 'fa fa-clipboard');" value="paste">
</td>
<td>
<input type="button" onclick="myRibbon.enable('cut');" value="enable">
<input type="button" onclick="myRibbon.disable('cut');" value="disable">
</td>
</tr>
</table>
</body>
</html>Documentation
Check documentation to learn how to use the components and easily implement them in your applications.