kendo ui PanelBar menu jquery 操作

最新推荐文章于 2021-03-12 13:44:30 发布

努力成为好爸爸

最新推荐文章于 2021-03-12 13:44:30 发布

阅读量575

点赞数

分类专栏：第三方控件相关 Kendo UI

本文链接：https://blog.csdn.net/jsjpanxiaoyu/article/details/76836859

版权

第三方控件相关同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

Kendo UI

12 篇文章 0 订阅

订阅专栏

 
  <!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>

努力成为好爸爸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
kendo ui PanelBar menu jquery 操作

html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; } My Teammat
复制链接

扫一扫