or
<
li
class
=
"t-item t-state-default"
>
<
span
class
=
"t-link t-header"
>item1</
span
>
</
li
>
<
div
id
=
"mi-singledetails-mobile"
>
<
div
id
=
"mi-singletemplate-mobile"
>
</
div
>
<
div
id
=
"dt_launchContainer-mobile"
>
<
telerik:RadButton
ID
=
"launchButtonMobile"
runat
=
"server"
Text
=
"Launch Player"
Height
=
"65px"
CssClass
=
"Green"
AutoPostBack
=
"false"
UseSubmitBehavior
=
"false"
OnClientClicking
=
"onPlayerOpenClicking"
ClientIDMode
=
"Static"
EnableViewState
=
"false"
>
<
Icon
SecondaryIconUrl
=
"~/App_Themes/Medportal/images/launchplayer.png"
/>
</
telerik:RadButton
>
</
div
>
</
div
>
<
div
class
=
"t-widget t-window"
style
=
"padding-top: 35px; width: 700px; height: 550px; display: block; top: 255px; left: 610px; -moz-transition: none 0s ease 0s ; opacity: 1; -moz-transform: scale(1);"
><
div
class
=
"t-window-titlebar t-header"
style
=
"margin-top: -35px;"
> <
span
class
=
"t-window-title"
>Details</
span
><
div
class
=
"t-window-actions t-header"
><
a
class
=
"t-window-action t-link"
href
=
"#"
><
span
class
=
"t-icon t-close"
>Close</
span
></
a
></
div
></
div
><
p
id
=
"mobile-details-window"
class
=
"t-window-content t-content"
>
</
p
></
div
>
var tabStrip=$("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabStrip.insertAfter([{text:"New Tab3",content:[null,"http://www.danamy.cn/index.html"]},{text:"New Tab4"}],tabStrip.tabGroup.children("li:last"));
01.
<!doctype html>
02.
<
html
>
03.
<
head
>
04.
<
title
>Basic usage</
title
>
05.
<
link
href
=
"_includes/css/base.css"
rel
=
"stylesheet"
/>
06.
<
link
href
=
"_includes/css/kendo.common.min.css"
rel
=
"stylesheet"
/>
07.
<
link
href
=
"_includes/css/kendo.kendo.min.css"
rel
=
"stylesheet"
/>
08.
<
script
src
=
"_includes/js/jquery.1.6.2.min.js"
></
script
>
09.
<
script
src
=
"_includes/js/kendo.all.min.js"
></
script
>
10.
</
head
>
11.
<
body
>
12.
<
div
id
=
"splitter"
>
13.
<
div
id
=
"vertical"
>
14.
<
div
id
=
"top"
>
15.
<
p
>
16.
Outer splitter : top pane
17.
</
p
>
18.
</
div
>
19.
<
div
>
20.
<
div
id
=
"horizontal"
>
21.
<
div
id
=
"left"
>
22.
<
p
>
23.
Inner splitter :: left pane
24.
</
p
>
25.
</
div
>
26.
<
div
id
=
"center"
>
27.
<
p
>
28.
Inner splitter :: center pane
29.
</
p
>
30.
</
div
>
31.
<
div
id
=
"right"
>
32.
<
p
>
33.
Inner splitter :: right pane
34.
</
p
>
35.
</
div
>
36.
</
div
>
37.
</
div
>
38.
<
div
id
=
"bottom"
>
39.
<
p
>
40.
Outer splitter : bottom pane
41.
</
p
>
42.
</
div
>
43.
</
div
>
44.
45.
<
script
type
=
"text/javascript"
>
46.
$(document).ready(function()
47.
{
48.
$("#splitter #vertical").height($(window).height() - 2)
49.
50.
function onResize(e)
51.
{
52.
console.log("Resized :: Splitter #" + this.element[0].id);
53.
console.log(this.element[0]);
54.
};
55.
56.
$("#vertical").kendoSplitter({
57.
orientation: "vertical",
58.
panes: [
59.
{ collapsible: true, size: "30%" }, // top height
60.
{ collapsible: false, size: "40%" },
61.
{ collapsible: true, size: "30%" } // bottom height
62.
],
63.
resize: onResize
64.
});
65.
66.
$("#horizontal").kendoSplitter({
67.
panes: [
68.
{ collapsible: true, size: "20%" }, // left height
69.
{ collapsible: false, size: "60%" }, // center
70.
{ collapsible: true, size: "20%" } // right height
71.
],
72.
resize: onResize
73.
});
74.
75.
$(window).resize(function()
76.
{
77.
// what do i put here to force resize refresh of all splitters ???
78.
});
79.
});
80.
</
script
>
81.
</
div
>
82.
</
body
>
83.
</
html
>