or
<
head
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"css/kendo/kendo.common.min.css"
/>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"css/kendo/kendo.default.min.css"
/>
<
script
type
=
"text/javascript"
src
=
"js/jquery-1.11.0.min.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"js/jquery-ui-1.10.4.custom.min.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"js/kendo.all.min.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"js/kendo.culture.ja-JP.min.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"js/myJs.js"
></
script
>
<
sj:head
jqueryui
=
"true"
/>
</
head
>
1.
<
div
id
=
"example"
class
=
"k-content"
>
2.
<
div
id
=
"window"
>
3.
WINDOW
4.
</
div
>
5.
6.
<
span
id
=
"undo"
style
=
"display:none"
class
=
"k-button"
>Click here to open the window.</
span
>
7.
</
div
>
$(document).ready(
function
() {
var
window = $(
"#window"
), undo = $(
"#undo"
).bind(
"click"
,
function
() {
window.data(
"kendoWindow"
).open();
undo.hide();
});
var
onClose =
function
() {
undo.show();
}
if
(!window.data(
"kendoWindow"
)) {
window.kendoWindow({
width :
"600px"
,
title :
"About Alvar Aalto"
,
actions : [
"Pin"
,
"Minimize"
,
"Maximize"
,
"Close"
],
close : onClose
});
}
});
<
input
data-role
=
"SimpleWidget"
data-someoption="myoption" />
(
function
($) {
var
kendo = window.kendo,
ui = kendo.ui,
Widget = ui.Widget;
var
SimpleWidget= Widget.extend({
// custom widget stuff
});
})(jQuery);
// Kendo calls this method when a new widget is created
init:
function
(element, options) {
var
that =
this
;
Widget.fn.init.call(
this
, element, options);
}
//List of all options supported and default values
options: {
name:
"SimpleWidget"
,
value:
null
,
width:
"150"
,
someoption:
""
}
init:
function
(element, options) {
...
//Options are accessible via the options
$(that.element).val(options.someoption);
//Our internal widget's options property has also been updated for us
$(that.element).val(that.options.someoption);
...
}
(
function
($) {
var
kendo = window.kendo,
ui = kendo.ui,
Widget = ui.Widget;
var
SimpleWidget = Widget.extend({
// Kendo calls this method when a new widget is created
init:
function
(element, options) {
var
that =
this
;
Widget.fn.init.call(
this
, element, options);
//Our internal widget's options property has been updated for us
$(that.element).val(that.options.someoption);
},
//List of all options supported and default values
options: {
name:
"SimpleWidget"
,
value:
null
,
width:
"150"
,
someoption:
""
,
},
});
ui.plugin(SimpleWidget);
})(jQuery);
var
app = (
function
(win) {
'use strict'
;
var
onDeviceReady =
function
() {
//Do some stuff
};
// Handle "deviceready" event
document.addEventListener(
'deviceready'
, onDeviceReady,
false
);
// Initialize KendoUI mobile application
var
mobileApp =
new
kendo.mobile.Application(document.body, {
transition:
'slide'
,
skin:
'flat'
,
initial:
'bootstrap'
});
return
{
mobileApp: mobileApp
};
}(window));
var
app = app || {};
app.Bootstrap = (
function
() {
'use strict'
var
bootstrapViewModel = (
function
() {
var
show =
function
(e) {
// Check if user is online and do some stuff
// By accessing navigator.connection
};
return
{
show: show
};
}());
return
bootstrapViewModel;
}());
<
body
>
<!--Home-->
<
div
id
=
"bootstrap"
data-role
=
"view"
data-show
=
"app.Bootstrap.show"
>
<
div
class
=
"view-content"
>
<
h1
>My app</
h1
>
<
div
class
=
"content"
></
div
>
</
div
>
</
div
>
....
</
body
>