All Components

Splitter / Basic usage

Inner splitter / left pane

Resizable and collapsible.

Inner splitter / center pane

Resizable only.

Inner splitter / right pane

Resizable and collapsible.

Outer splitter / middle pane

Resizable only.

Outer splitter / bottom pane

Non-resizable and non-collapsible.

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <title>Basic usage</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 id="vertical"> 
    <div id="top-pane"> 
     <div id="horizontal" style="height: 100%; width: 100%;"> 
      <div id="left-pane"> 
       <div class="pane-content"> 
        <h3>Inner splitter / left pane</h3> 
        <p>Resizable and collapsible.</p> 
       </div> 
      </div> 
      <div id="center-pane"> 
       <div class="pane-content"> 
        <h3>Inner splitter / center pane</h3> 
        <p>Resizable only.</p> 
       </div> 
      </div> 
      <div id="right-pane"> 
       <div class="pane-content"> 
        <h3>Inner splitter / right pane</h3> 
        <p>Resizable and collapsible.</p> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div id="middle-pane"> 
     <div class="pane-content"> 
      <h3>Outer splitter / middle pane</h3> 
      <p>Resizable only.</p> 
     </div> 
    </div> 
    <div id="bottom-pane"> 
     <div class="pane-content"> 
      <h3>Outer splitter / bottom pane</h3> 
      <p>Non-resizable and non-collapsible.</p> 
     </div> 
    </div> 
   </div> 
   <script>
                $(document).ready(function() {
                    $("#vertical").kendoSplitter({
                        orientation: "vertical",
                        panes: [
                            { collapsible: false },
                            { collapsible: false, size: "100px" },
                            { collapsible: false, resizable: false, size: "100px" }
                        ]
                    });

                    $("#horizontal").kendoSplitter({
                        panes: [
                            { collapsible: true },
                            { collapsible: false },
                            { collapsible: true}
                        ]
                    });
                });
            </script> 
   <style>
                #vertical {
                    height: 380px;
                    margin: 0 auto;
                }

                #middle-pane { background-color: rgba(60, 70, 80, 0.10); }
                #bottom-pane { background-color: rgba(60, 70, 80, 0.15); }
                #left-pane, #center-pane, #right-pane  { background-color: rgba(60, 70, 80, 0.05); }

                .pane-content {
                    padding: 0 10px;
                }
            </style> 
  </div>   
 </body>
</html>