0

我正在尝试将树显示库 jstree 和可调整大小的平面拆分器、Splitter.js 库结合起来，但遇到了问题。

拆分器库位于http://methvin.com/splitter/。jstree 可从http://www.jstree.com/获得

我的目标是让树出现在左侧，内容出现在右侧。

这两个库都是独立工作的，但是当我不知道如何组合它们时。每个位置元素的方式似乎是冲突的。

我目前拥有的是

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" type="text/css" href="../styles/splitterStyle.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>SOPs jsTree</title>
    <script type="text/javascript" src="../_lib/jquery.js"></script>
    <script type="text/javascript" src="../_lib/splitter.js"></script>
    <script type="text/javascript" src="../jquery.jstree.js"></script>
    <script>
    jQuery(function($) {
       $('#elContainer').jstree({core : { animation : 50 }});
       // Breaks if this is added
       // $("#MySplitter").splitter();     
    });
    </script>
    <script>
    $().ready(function() {
       // Also breaks if this is added
       // $("#MySplitter").splitter();
    }); 
    </script>

 </head>
<body>

<div id="MySplitter">

  <div id="elContainer">
    <ul>
      <li id="phtml_1"><a href="someURL">treeRoot</A>
      <ul>
        <li id="phtml_2"><A HREF="someURL">leaf node</A></li>
        <ul>
        <li id="phtml_3"><a href="someURL">another leaf</A></li>
        </ul>
      </ul>
      </li>
    </ul>
  </div>

  <div id="content">
    Some content
  </div>
</div> 

</body>
</html>
4

1 回答 1

0

拆分器和更高版本的 jquery 似乎存在问题。

这个问题讨论了这个问题：

Splitter.js 不适用于新版本的 jQuery

SpYk3HH 的答案是指使用 jquery 布局。这行得通。下面的代码显示了一个示例。

<!DOCTYPE html>
<html>
<head>
<title>Layout Example</title>
<script type="text/javascript" src="_lib/jquery.js"></script>
<script type="text/javascript" src="_lib/jquery-ui-latest.js"></script>
<script type="text/javascript" src="_lib/jquery.layout-latest.js"></script>
<script type="text/javascript" src="jquery.jstree.js"></script>
<script type="text/javascript">  
$(document).ready(function () {
    $('body').layout({ applyDemoStyles: true });
    $('#elContainer').jstree({core : { animation : 50 }});
});
</script>
<script type="text/javascript">
    jQuery(function($) {
       $('#elContainer').jstree({core : { animation : 50 }});
    });
</script>
</head>
<body>
  <div class="ui-layout-center">Center content.</div>
  <div class="ui-layout-north">North</div>
  <div class="ui-layout-west">

    <div id="elContainer">
    <ul>
      <li id="phtml_1"><a href="someURL">treeRoot</A>
      <ul>
        <li id="phtml_2"><A HREF="someURL">leaf node</A></li>
        <ul>
        <li id="phtml_3"><a href="someURL">another leaf</A></li>
        </ul>
      </ul>
      </li>
    </ul>
  </div>

  </div>
</body>
</html>
于 2013-10-15T02:58:20.637 回答