kendo ui PanelBar menu jquery 操作

来源：互联网发布：sql2000还原数据库编辑：程序博客网时间：2024/05/29 16:06

<!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: 0auto;
}

.teamMate h2 {
font-size: 1.4em;
font-weight: normal;
padding-top: 20px;
}

.teamMate p {
margin: 0;
}

.teamMate img {
display: inline-block;
margin: 5px15px5px5px;
border: 1pxsolid#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>

阅读全文

0 0