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