mirror of
https://github.com/hanzoai/jube-fork.git
synced 2026-11-02 14:29:36 +00:00
151 lines
6.2 KiB
HTML
Executable File
151 lines
6.2 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Form integration</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" style="width:700px">
|
|
<form id="wizard" style="width:500px; margin: 0 auto;" novalidate></form>
|
|
</div>
|
|
<script>
|
|
|
|
$(document).ready(function () {
|
|
|
|
$("#wizard").kendoWizard({
|
|
pager: true,
|
|
contentPosition: "bottom",
|
|
stepper: {
|
|
indicator: true,
|
|
label: true,
|
|
linear: true
|
|
},
|
|
done: function (e) {
|
|
e.originalEvent.preventDefault();
|
|
kendo.alert("Thank you for registering! Registration details will be sent to your email.");
|
|
},
|
|
actionBar: true,
|
|
steps: [{
|
|
title: "Registration",
|
|
buttons: ["next"],
|
|
form: {
|
|
orientation: "horizontal",
|
|
formData: {
|
|
Username: "johny",
|
|
Email: "[email protected]",
|
|
Password: "pass123",
|
|
Birth: new Date()
|
|
},
|
|
items: [
|
|
{ field: "Username", label: "Username:", validation: { required: true } },
|
|
{ field: "Email", label: "Email:", validation: { required: true, email: true } },
|
|
{ field: "Password", label: "Password:", validation: { required: true }, hint: "Hint: enter alphanumeric characters only.", attributes: { type: "password" } },
|
|
{ field: "Birth", label: { text: "Date of Birth:", optional: true } }
|
|
]
|
|
|
|
}
|
|
},
|
|
{
|
|
title: "Personal Details",
|
|
buttons: ["previous", "done"],
|
|
form: {
|
|
formData: {
|
|
FirstName: "John",
|
|
LastName: "Doe",
|
|
Country: "1",
|
|
City: "Strasbourg",
|
|
AddressLine: ""
|
|
},
|
|
layout: "grid",
|
|
grid: {
|
|
cols: 2,
|
|
gutter: 20
|
|
},
|
|
items: [
|
|
{
|
|
type: "group",
|
|
label: "Personal Information",
|
|
layout: "grid",
|
|
grid: { cols: 1, gutter: 10 },
|
|
items: [
|
|
{
|
|
field: "FirstName",
|
|
label: "First Name:",
|
|
validation: { required: true }
|
|
},
|
|
{
|
|
field: "LastName",
|
|
label: "Last Name:",
|
|
validation: { required: true }
|
|
}
|
|
]
|
|
},
|
|
{
|
|
type: "group",
|
|
label: "Shipping Address",
|
|
layout: "grid",
|
|
grid: { cols: 2, gutter: 10 },
|
|
items: [
|
|
{
|
|
field: "Country",
|
|
editor: "DropDownList",
|
|
label: "Country:",
|
|
validation: { required: true },
|
|
colSpan: 1,
|
|
editorOptions: {
|
|
optionLabel: "Select...",
|
|
dataSource: [
|
|
{ Name: "France", Id: 1 },
|
|
{ Name: "Germany", Id: 2 },
|
|
{ Name: "Italy", Id: 3 },
|
|
{ Name: "Spain", Id: 4 }
|
|
],
|
|
dataTextField: "Name",
|
|
dataValueField: "Id"
|
|
}
|
|
},
|
|
{
|
|
field: "City",
|
|
label: "City:",
|
|
validation: { required: true },
|
|
colSpan: 1
|
|
},
|
|
{
|
|
field: "AddressLine",
|
|
label: "Address Line:",
|
|
validation: { required: true },
|
|
colSpan: 2
|
|
},
|
|
]
|
|
}
|
|
],
|
|
},
|
|
}]
|
|
});
|
|
})
|
|
</script>
|
|
</div>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|