mirror of
https://github.com/hanzoai/jube-fork.git
synced 2026-11-02 14:29:36 +00:00
157 lines
6.0 KiB
HTML
Executable File
157 lines
6.0 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Integration with Editors</title>
|
|
<meta charset="utf-8">
|
|
<link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
|
|
<link href="../../styles/kendo.common.min.css" rel="stylesheet">
|
|
<link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
|
|
<link href="../../styles/kendo.default.min.css" rel="stylesheet">
|
|
<link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
|
|
<script src="../../js/jquery.min.js"></script>
|
|
<script src="../../js/jszip.min.js"></script>
|
|
<script src="../../js/kendo.all.min.js"></script>
|
|
<script src="../content/shared/js/console.js"></script>
|
|
<script>
|
|
|
|
</script>
|
|
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<a class="offline-button" href="../index.html">Back</a>
|
|
|
|
<div id="example">
|
|
<div class="demo-section k-content wide">
|
|
<h4>Cutomize the element</h4>
|
|
<div id="toolbar"></div>
|
|
</div>
|
|
<div class="box wide">
|
|
<div id="target"></div>
|
|
</div>
|
|
|
|
<script>
|
|
var target;
|
|
$(document).ready(function() {
|
|
target = $("#target");
|
|
$("#toolbar").kendoToolBar({
|
|
resizable: false,
|
|
items: [
|
|
{ template: "<label>SHAPE:</label><input id='shape' />" },
|
|
{ type: "separator" },
|
|
{ template: "<label>H:</label><input id='height' style='width: 70px;' type='text' />" },
|
|
{ template: "<label>W:</label><input id='width' style='width: 70px;' type='text' />" },
|
|
{ type: "separator" },
|
|
{ template: "<label>POSITION:</label>" },
|
|
{
|
|
type: "buttonGroup",
|
|
buttons: [
|
|
{ text: "Left", togglable: true, group: "position" },
|
|
{ text: "Center", togglable: true, group: "position", selected: true },
|
|
{ text: "Right", togglable: true, group: "position" }
|
|
]
|
|
},
|
|
{ type: "separator" },
|
|
{ template: "<label>BACKGROUND:</label><div type='color' id='background-picker'></div>" },
|
|
{ type: "separator" },
|
|
{ template: "<label>BORDER:</label><div type='color' id='border-picker'></div>" },
|
|
{ template: "<input id='border-style' style='width: 100px;' />" },
|
|
],
|
|
toggle: function(e) {
|
|
var position = e.target.text().toLowerCase();
|
|
|
|
if (position == "center") {
|
|
position = "none";
|
|
}
|
|
|
|
target.css("float", position);
|
|
}
|
|
});
|
|
|
|
$("#shape").kendoDropDownList({
|
|
dataTextField: "text",
|
|
dataValueField: "value",
|
|
dataSource: [
|
|
{ text: "Rectangle", value: 0 },
|
|
{ text: "Rounded rectangle", value: 30 },
|
|
{ text: "Circle/Ellipse", value: 300 }
|
|
],
|
|
change: function() {
|
|
target.css("border-radius", parseInt(this.value()));
|
|
}
|
|
});
|
|
|
|
$("#border-style").kendoDropDownList({
|
|
dataTextField: "text",
|
|
dataValueField: "value",
|
|
dataSource: [
|
|
{ text: "Solid", value: "solid" },
|
|
{ text: "Dashed", value: "dashed" },
|
|
{ text: "Dotted", value: "dotted" }
|
|
],
|
|
change: function() {
|
|
target.css("border-style", this.value());
|
|
}
|
|
});
|
|
|
|
$("#background-picker").kendoColorPicker({
|
|
value: "#ffffff",
|
|
buttons: false,
|
|
change: function() {
|
|
target.css("background-color", this.value());
|
|
}
|
|
});
|
|
|
|
$("#border-picker").kendoColorPicker({
|
|
value: "#333333",
|
|
buttons: false,
|
|
change: function() {
|
|
target.css("border-color", this.value());
|
|
}
|
|
});
|
|
|
|
$("#height, #width").kendoNumericTextBox({
|
|
value: 150,
|
|
decimals: 0,
|
|
format: "n0",
|
|
max: 300,
|
|
min: 50,
|
|
change: function() {
|
|
var dimension = this.element.attr("id");
|
|
|
|
target.css(dimension, this.value());
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
#toolbar {
|
|
margin: 1em 0;
|
|
}
|
|
|
|
#toolbar label {
|
|
font-size: .85em;
|
|
font-weight: bold;
|
|
}
|
|
#toolbar .k-separator {
|
|
margin: 0 .9em;
|
|
}
|
|
#target {
|
|
border: 3px solid #333333;
|
|
border-radius: 0;
|
|
background-color: #ffffff;
|
|
height: 150px;
|
|
width: 150px;
|
|
margin: 0 auto;
|
|
}
|
|
</style>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|