179 строки
4.8 KiB
HTML
179 строки
4.8 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||
|
|
<head>
|
||
|
|
<title>Essential JS 1: Toolbar Orientation</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/ej.web.all.min.js" type="text/javascript"></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 class="toolhor">
|
||
|
|
<div id="edittoolsh"></div>
|
||
|
|
</div>
|
||
|
|
<br />
|
||
|
|
<div class="toolver">
|
||
|
|
<div id="edittoolsv"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
var toolbarcont;
|
||
|
|
$(function () {
|
||
|
|
// declaration
|
||
|
|
items = [{
|
||
|
|
edid: "1",
|
||
|
|
spriteCss: "editTools cursor",
|
||
|
|
title:"Cursor",
|
||
|
|
|
||
|
|
}, {
|
||
|
|
edid: "2",
|
||
|
|
spriteCss: "editTools select",
|
||
|
|
title:"Select",
|
||
|
|
|
||
|
|
}, {
|
||
|
|
edid: "3",
|
||
|
|
spriteCss: "editTools move",
|
||
|
|
title:"Move",
|
||
|
|
|
||
|
|
}, {
|
||
|
|
edid: "4",
|
||
|
|
spriteCss: "editTools rectselect",
|
||
|
|
title:"Rectselect",
|
||
|
|
|
||
|
|
}, {
|
||
|
|
edid: "5",
|
||
|
|
spriteCss: "editTools roundselect",
|
||
|
|
title:"Roundselect",
|
||
|
|
|
||
|
|
}, {
|
||
|
|
edid: "6",
|
||
|
|
spriteCss: "editTools brush",
|
||
|
|
title:"Brush",
|
||
|
|
|
||
|
|
}, {
|
||
|
|
edid: "7",
|
||
|
|
spriteCss: "editTools pen",
|
||
|
|
title:"Pen",
|
||
|
|
|
||
|
|
}, {
|
||
|
|
edid: "8",
|
||
|
|
spriteCss: "editTools gradient",
|
||
|
|
title:"Gradient",
|
||
|
|
|
||
|
|
}, {
|
||
|
|
edid: "9",
|
||
|
|
spriteCss: "editTools crop",
|
||
|
|
title:"Crop",
|
||
|
|
|
||
|
|
}, {
|
||
|
|
edid: "10",
|
||
|
|
spriteCss: "editTools symbols",
|
||
|
|
title:"Symbols",
|
||
|
|
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
$("#edittoolsv").ejToolbar({
|
||
|
|
width: "48px",
|
||
|
|
dataSource: items,
|
||
|
|
fields: { id: "edid", spriteCssClass: "spriteCss", tooltipText:"title" },
|
||
|
|
orientation: "vertical",
|
||
|
|
});
|
||
|
|
$("#edittoolsh").ejToolbar({
|
||
|
|
dataSource: items,
|
||
|
|
fields: { id: "edid", spriteCssClass: "spriteCss", tooltipText:"title" },
|
||
|
|
orientation: "horizontal",
|
||
|
|
width: "100%"
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style type="text/css" class="cssStyles">
|
||
|
|
.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: 618px;
|
||
|
|
}
|
||
|
|
.office-365 .frame{
|
||
|
|
width: 542px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</body>
|
||
|
|
</html>
|