All Components

PanelBar / API

Expand / Collapse

Enable / Disable

Add / Remove

 

  • First Item
    • Sub Item 1
    • Sub Item 2
    • Sub Item 3
    • Sub Item 4
  • Second Item
    • Sub Item 1
    • Sub Item 2
    • Sub Item 3
    • Sub Item 4
  • Third Item
    • Sub Item 1
    • Sub Item 2
    • Sub Item 3
    • Sub Item 4
  • Fourth Item
    • Sub Item 1
    • Sub Item 2
    • Sub Item 3
    • Sub Item 4
  • Fifth Item
    • Sub Item 1
    • Sub Item 2
    • Sub Item 3
    • Sub Item 4

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <title>API</title> 
  <meta charset="utf-8"> 
  <link href="../content/shared/styles/examples-offline.css" rel="stylesheet"> 
  <link href="../../styles/kendo.common.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.rtl.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.default.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet"> 
  <script src="../../js/jquery.min.js"></script> 
  <script src="../../js/kendo.all.min.js"></script> 
  <script src="../content/shared/js/console.js"></script> 
  <script>
        
    </script> 
 </head> 
 <body> 
  <a class="offline-button" href="../index.html">Back</a> 
  <div id="example"> 
   <div class="box wide"> 
    <div class="box-col"> 
     <h4>Expand / Collapse</h4> 
     <ul class="options"> 
      <li> <input type="text" value="0" id="selectIndex" class="k-textbox"> <button class="selectItem k-button">Select</button> </li> 
      <li> <button class="triggerItem k-button">Expand/Collapse</button> </li> 
     </ul> 
     <h4>Enable / Disable</h4> 
     <ul class="options"> 
      <li> <button class="toggleItem k-button">Enable/Disable</button> </li> 
     </ul> 
    </div> 
    <div class="box-col"> 
     <h4>Add / Remove</h4> 
     <ul class="options"> 
      <li> <button class="removeItem k-button">Remove</button> </li> 
      <li> <input type="text" value="Item" id="appendText" class="k-textbox"> <button class="appendItem k-button">Append</button> </li> 
     </ul> 
    </div> 
    <div class="box-col"> 
     <h4> </h4> 
     <ul class="options"> 
      <li> <input type="text" value="Item" id="beforeText" class="k-textbox"> <button class="beforeItem k-button">Insert Before</button> </li> 
      <li> <input type="text" value="Item" id="afterText" class="k-textbox"> <button class="afterItem k-button">Insert After</button> </li> 
     </ul> 
    </div> 
   </div> 
   <ul id="panelbar"> 
    <li class="k-state-active"> First Item 
     <ul> 
      <li>Sub Item 1</li> 
      <li>Sub Item 2</li> 
      <li>Sub Item 3</li> 
      <li>Sub Item 4</li> 
     </ul> </li> 
    <li> Second Item 
     <ul> 
      <li>Sub Item 1</li> 
      <li>Sub Item 2</li> 
      <li>Sub Item 3</li> 
      <li>Sub Item 4</li> 
     </ul> </li> 
    <li> Third Item 
     <ul> 
      <li>Sub Item 1</li> 
      <li>Sub Item 2</li> 
      <li>Sub Item 3</li> 
      <li>Sub Item 4</li> 
     </ul> </li> 
    <li> Fourth Item 
     <ul> 
      <li>Sub Item 1</li> 
      <li>Sub Item 2</li> 
      <li>Sub Item 3</li> 
      <li>Sub Item 4</li> 
     </ul> </li> 
    <li> Fifth Item 
     <ul> 
      <li>Sub Item 1</li> 
      <li>Sub Item 2</li> 
      <li>Sub Item 3</li> 
      <li>Sub Item 4</li> 
     </ul> </li> 
   </ul> 
   <script>
                 $(document).ready(function() {
                    var getItem = function (target) {
                            var itemIndexes = target.val().split(/[.,]/),
                                rootItem = panelBar.element.children("li").eq(itemIndexes[0]);

                            return itemIndexes.length > 1 ?
                                rootItem.find(".k-group > .k-item").eq(itemIndexes[1]) :
                                rootItem;
                        },
                        select = function (e) {
                            if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
                                panelBar.select(getItem($("#selectIndex")));
                        },
                        append = function (e) {
                            if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
                                panelBar.append({
                                        text: $("#appendText").val()
                                    }, panelBar.select());
                        },
                        before = function (e) {
                            if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
                                panelBar.insertBefore({
                                    text: $("#beforeText").val()
                                }, panelBar.select());
                        },
                        after = function (e) {
                            if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
                                panelBar.insertAfter({
                                    text: $("#afterText").val()
                                }, panelBar.select());
                        };

                    $(".selectItem").click(select);
                    $("#selectIndex").keypress(select);

                    $(".appendItem").click(append);
                    $("#appendText").keypress(append);

                    $(".beforeItem").click(before);
                    $("#beforeText").keypress(before);

                    $(".afterItem").click(after);
                    $("#afterText").keypress(after);

                    $(".toggleItem").click(function (e) {
                        var item = panelBar.select();
                        panelBar.enable(item, item.hasClass("k-state-disabled"));
                    });

                    $(".triggerItem").click(function (e) {
                        var item = panelBar.select();

                        if (item.hasClass("k-state-active")) {
                            panelBar.collapse(item);
                        } else {
                            panelBar.expand(item);
                        }
                    });

                    $(".removeItem").click(function (e) {
                        panelBar.remove(panelBar.select());
                    });

                });

                var panelBar = $("#panelbar").kendoPanelBar().data("kendoPanelBar");
            </script> 
   <style>
                .box-col {
                    width: 250px;
                    margin-bottom: -20px;
                }
                .box-col .options {
                    margin-bottom: 20px;
                }
                .box .k-textbox {
                    width: 80px;
                }
            </style> 
  </div>   
 </body>
</html>