Question

我正在使用以下代码来获取jquery splitter插件。但它不起作用。我从网络（jsfiddle）获得了这个代码。它在jsfiddle中工作，而不是在我的系统中为我工作。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
body {
    font-family: Verdana, sans-serif;
    font-size: 12px;
}
.detail-outer-wrap * {
    background-color: #81d948;
    color: #FFF;
}
</style>
<script type="text/javascript">
$(function () {
    setupSplitters();
    $('#toggle').click(function () {
        var splitter = $('.k-content').data('kendoSplitter');
        var curSize = splitter.size('.a');
        splitter.size('.a', curSize === '30%' ? '0%' : '30%');
    });
});

function setupSplitters() {

    $('.k-content').kendoSplitter({
        orientation: 'horizontal',
        panes: [
        // A
        {
            resizable: true,
            collapsible: false,
            max: '90%',
            min: '33%',
            size: '70%'
        },
        // B
        {
            resizable: true,
            collapsible: false,
            max: '67%',
            min: '10%',
            size: '30%'
        }]
    });
}
</script>
</head>

<body>
<div id="log">
  <button id="toggle">Toggle A's size</button>
</div>
<div class="k-content">
  <div class="a">hai</div>
  <div class="b">B</div>
</div>
</body>
</html>

Answer 1

您没有包含所有必要的依赖项：

你的小提琴中的代码引用了

jQuery UI和kendo.all.min.js（除了两个外部css文件）：

enter image description here

请注意外部资源旁边的浅3。这是一个标志，有三个外部资源被引用。

将它们添加到您的本地实例，您应该没问题。

Jquery分离器无法正常工作

1 个答案: