kendo ui PanelBar menu jquery 操作
蔡辰钊
<!DOCTYPE html
>
<html>
<head>
<base
href=
"http://demos.telerik.com/kendo-ui/panelbar/index"
>
<style>
html {
font-size:
14px;
font-family:
Arial,
Helvetica,
sans-serif;
}
<
/style>
<title></title>
<link
rel=
"stylesheet"
href=
"https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-material.min.css"
/>
<link
rel=
"stylesheet"
href=
"https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.min.css"
/>
<link
rel=
"stylesheet"
href=
"https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.mobile.min.css"
/>
<script
src=
"https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"
>
<
/script>
<script
src=
"https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"
>
<
/script>
</head>
<body>
<input
type=
"button"
id=
"btnTop"
value=
"Open Top panelbar"
>
<input
type=
"button"
id=
"btnLow"
value=
"Open Low panelbar"
>
<div
id=
"example"
>
<ul
id=
"panelbar"
>
<!--<li class="k-state-active">
<span class="k-link k-state-selected">My Teammates</span>
<div style="padding: 10px;">
<div class="teamMate">
<img src="../content/web/panelbar/andrew.jpg" alt="Andrew Fuller">
<div class="details">
<h2>Andrew Fuller</h2>
<p>Team Lead</p>
</div>
</div>
<div class="teamMate">
<img src="../content/web/panelbar/nancy.jpg" alt="Nancy Leverling">
<div class="details">
<h2>Nancy Leverling</h2>
<p>Sales Associate</p>
</div>
</div>
<div class="teamMate">
<img src="../content/web/panelbar/robert.jpg" alt="Robert King">
<div class="details">
<h2>Robert King</h2>
<p>Business System Analyst</p>
</div>
</div>
</div>
</li>-->
<li
id=
"TopLi"
>
<span
id=
"TopSpan"
>My Teammates
</span>
<div
style=
"padding: 10px;"
>
<div
class=
"teamMate"
>
<img
src=
"../content/web/panelbar/andrew.jpg"
alt=
"Andrew Fuller"
>
<div
class=
"details"
>
<h2>Andrew Fuller
</h2>
<p>Team Lead
</p>
</div>
</div>
<div
class=
"teamMate"
>
<img
src=
"../content/web/panelbar/nancy.jpg"
alt=
"Nancy Leverling"
>
<div
class=
"details"
>
<h2>Nancy Leverling
</h2>
<p>Sales Associate
</p>
</div>
</div>
<div
class=
"teamMate"
>
<img
src=
"../content/web/panelbar/robert.jpg"
alt=
"Robert King"
>
<div
class=
"details"
>
<h2>Robert King
</h2>
<p>Business System Analyst
</p>
</div>
</div>
</div>
</li>
<li
id=
"LowLi"
>
<span
id=
"LowSpan"
> Projects
</span>
<ul>
<li>New Business Plan
</li>
<li>
Sales Forecasts
<ul>
<li>Q1 Forecast
</li>
<li>Q2 Forecast
</li>
<li>Q3 Forecast
</li>
<li>Q4 Forecast
</li>
</ul>
</li>
<li>Sales Reports
</li>
</ul>
</li>
</ul>
<style>
#panelbar {
max-width:
400px;
margin:
0
auto;
}
.teamMate h2 {
font-size:
1.4em;
font-weight:
normal;
padding-top:
20px;
}
.teamMate p {
margin:
0;
}
.teamMate img {
display:
inline-block;
margin:
5px
15px
5px
5px;
border:
1px
solid
#ccc;
border-radius:
50%;
}
.details {
display:
inline-block;
vertical-align:
top;
}
<
/style>
<script>
$(document).ready(
function () {
var bar = $(
"#panelbar").kendoPanelBar({
expandMode:
"single",
animation: {
// fade-out closing items over 1000 milliseconds
collapse: {
duration:
1000,
effects:
"fadeOut"
},
// fade-in and expand opening items over 500 milliseconds
expand: {
duration:
500,
effects:
"expandVertical fadeIn"
}
}
});
//イベントを触れる(トップ開ける)
$(
"#btnTop").click(
function () {
$(
'#TopSpan').trigger(
"click");
});
//イベントを触れる(下閉じる)
$(
"#btnLow").click(
function () {
$(
'#LowSpan').trigger(
"click");
});
});
<
/script>
</div>
</body>
</html>
http://docs.telerik.com/kendo-ui/api/javascript/ui/panelbar
http://docs.telerik.com/kendo-ui/api/javascript/ui/button
http://docs.telerik.com/kendo-ui/api/javascript/ui/menu
<ul id="menu">
<li>Item 1
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
</ul>
<script>
$("#menu").kendoMenu({
animation: { open: {
effects: "zoomIn",
duration: 100
} }
});
</script>
<script>
$("#menu").kendoMenu({
direction: "top left"
});
</script>
<script>
$("#menu").kendoMenu();
// get a reference to the menu widget
var menu = $("#menu").data("kendoMenu");
// disable the li menu item with the id "secondItem"
menu.enable("#secondItem", false);
</script>
/
http://docs.telerik.com/kendo-ui/api/javascript/ui/toolbar 单多选按钮
<!DOCTYPE html>
<
html>
<
head>
<
meta
charset=
"utf-8"/>
<
title>Kendo UI Snippet</
title>
<
link
rel=
"stylesheet"
href=
"https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css"/>
<
link
rel=
"stylesheet"
href=
"https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.rtl.min.css"/>
<
link
rel=
"stylesheet"
href=
"https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.silver.min.css"/>
<
link
rel=
"stylesheet"
href=
"https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.mobile.all.min.css"/>
<
script
src=
"https://code.jquery.com/jquery-1.12.4.min.js"></
script>
<
script
src=
"https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></
script>
</
head>
<
body>
●シングル選択
<
div
id=
"toolbar"></
div>
●マルチ選択
<
div
id=
"toolbar2"></
div>
<
script>
$(
"#toolbar").
kendoToolBar({
items: [
{
type:
"buttonGroup",
// attributes: { "class": "red" },
buttons: [
{ text:
"foo", togglable:
true, group:
"myGroup" ,id:
"foo", selected:
true},
{ text:
"bar", togglable:
true, group:
"myGroup",id:
"bar" ,enable:
false },
{ text:
"baz", togglable:
true, group:
"myGroup",id:
"baz" }
]
}
]
});
$(
"#toolbar2").
kendoToolBar({
items: [
{
type:
"buttonGroup",
buttons: [
{ text:
"foo", togglable:
true, selected:
true },
{ text:
"bar", togglable:
true },
]
}
]
});
</
script>
</
body>
</
html>
类似资料：