<!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>
![UI開發架構Kendo React R3 2021更新亮點——新的 React 元件[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)