Files
jube-fork/Jube.App/wwwroot/kendo/examples/qrcode/index.html
2022-11-04 13:24:24 +02:00

103 lines
2.7 KiB
HTML
Executable File

<!DOCTYPE html>
<html>
<head>
<title>Basic usage</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" class="k-content">
<div class="qr-wrapper">
<div class="demo-section">
<h3>E-mail</h3>
<div id="qrMail"></div>
</div>
<div class="demo-section">
<h3>URL</h3>
<div id="qrUrl"></div>
</div>
<div class="demo-section">
<h3>Telephone</h3>
<div id="qrTelephone"></div>
</div>
<div class="demo-section">
<h3>Geo Location</h3>
<div id="qrGeoLocation"></div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#qrMail").kendoQRCode({
value: "mailto:[email protected]",
size: 120,
color: "#e15613",
background: "transparent"
});
$("#qrUrl").kendoQRCode({
value: "https://demos.telerik.com/kendo-ui/qrcode/index",
errorCorrection: "M",
size: 120,
border: {
color: "#000000",
width: 5
}
});
$("#qrTelephone").kendoQRCode({
value: "tel:+1-888-365-2779",
errorCorrection: "Q",
size: 120,
color: "#67a814",
border: {
color: "#67a814",
width: 5
}
});
$("#qrGeoLocation").kendoQRCode({
value: "geo:42.65049,23.37925,100",
errorCorrection: "H",
size: 120,
color: "#166a83"
});
});
</script>
<style>
.demo-section {
display: inline-block;
margin: 15px 30px 15px 0;
}
.k-qrcode {
display: inline-block;
margin: 10px 0 0;
border: none;
}
</style>
</div>
</body>
</html>