156 строки
4.5 KiB
HTML
156 строки
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<title>Essential JS 1: KO Support for Toolbar</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
|
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
|
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
|
<link href="../content/default.css" rel="stylesheet" />
|
|
<link href="../content/default-responsive.css" rel="stylesheet" />
|
|
<!--[if lt IE 9]>
|
|
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript" ></script>
|
|
<![endif]-->
|
|
<!--[if IE 9]><!-->
|
|
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"> </script>
|
|
<!--<![endif]-->
|
|
<script src="../scripts/knockout.min.js"></script>
|
|
<script src="../scripts/ej.web.all.min.js"></script>
|
|
<script src="../scripts/ej.widget.ko.min.js"></script>
|
|
<script src="../scripts/properties.js" type="text/javascript"></script>
|
|
</head>
|
|
<body>
|
|
<div class="content-container-fluid">
|
|
<div class="row">
|
|
<div class="cols-sample-area">
|
|
<div class="frame">
|
|
<div class="control">
|
|
<div id="toolbar1" data-bind="ejToolbar:{ dataSource:dataList, fields:{ id:'edid', spriteCssClass:'spriteCss', tooltipText:'tooltiptext'}, width:width }"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<style type="text/css" class="cssStyles">
|
|
/*controls*/
|
|
.darktheme .cols-sample-area .e-tooltxt .editTools {
|
|
background-image: url('../content/images/toolbar/editToolbar.png');
|
|
}
|
|
|
|
.cols-sample-area .e-tooltxt .editTools {
|
|
display: block;
|
|
background-image: url('../content/images/toolbar/editToolbarl.png');
|
|
height: 26px;
|
|
width: 26px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.e-tooltxt:hover .editTools, .darktheme .cols-sample-area .e-tooltxt:hover .editTools {
|
|
background-image: url('../content/images/toolbar/editToolbarh.png');
|
|
}
|
|
|
|
.editTools.cursor {
|
|
background-position: -0px -0px;
|
|
}
|
|
|
|
.editTools.select {
|
|
background-position: -0px -36px;
|
|
}
|
|
|
|
.editTools.move {
|
|
background-position: -0px -72px;
|
|
}
|
|
|
|
.editTools.rectselect {
|
|
background-position: -0px -108px;
|
|
}
|
|
|
|
.editTools.roundselect {
|
|
background-position: -0px -144px;
|
|
}
|
|
|
|
.editTools.brush {
|
|
background-position: -0px -180px;
|
|
}
|
|
|
|
.editTools.pen {
|
|
background-position: -0px -216px;
|
|
}
|
|
|
|
.editTools.gradient {
|
|
background-position: -0px -252px;
|
|
}
|
|
|
|
.editTools.crop {
|
|
background-position: -0px -288px;
|
|
}
|
|
|
|
.editTools.symbols {
|
|
background-position: -0px -324px;
|
|
}
|
|
.frame{
|
|
width:371px
|
|
}
|
|
.material .frame{
|
|
width: 620px;
|
|
}
|
|
.office-365 .frame{
|
|
width: 542px;
|
|
}
|
|
</style>
|
|
<script>
|
|
$(function () {
|
|
var tool = [
|
|
{
|
|
edid: "1",
|
|
spriteCss: "editTools cursor",
|
|
tooltiptext: "Cursor",
|
|
}, {
|
|
edid: "2",
|
|
spriteCss: "editTools select",
|
|
tooltiptext: "Select",
|
|
}, {
|
|
edid: "3",
|
|
spriteCss: "editTools move",
|
|
tooltiptext: "Move",
|
|
}, {
|
|
edid: "4",
|
|
spriteCss: "editTools rectselect",
|
|
tooltiptext: "Rectangle Select",
|
|
}, {
|
|
edid: "5",
|
|
spriteCss: "editTools roundselect",
|
|
tooltiptext: "Round Select",
|
|
}, {
|
|
edid: "6",
|
|
spriteCss: "editTools brush",
|
|
tooltiptext: "Brushes",
|
|
}, {
|
|
edid: "7",
|
|
spriteCss: "editTools pen",
|
|
tooltiptext: "Pen",
|
|
}, {
|
|
edid: "8",
|
|
spriteCss: "editTools gradient",
|
|
tooltiptext: "Gradients",
|
|
}, {
|
|
edid: "9",
|
|
spriteCss: "editTools crop",
|
|
tooltiptext: "Crop",
|
|
}, {
|
|
edid: "10",
|
|
spriteCss: "editTools symbols",
|
|
tooltiptext: "Symbols",
|
|
}
|
|
|
|
];
|
|
|
|
window.viewModel = {
|
|
dataList: ko.observableArray(tool),
|
|
width: ko.observable("100%"),
|
|
};
|
|
ko.applyBindings(viewModel);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|