Проблемы, связанные с разделителем панели и jstree с Javascript

Я пытаюсь объединить библиотеку отображения дерева jstree и многозначную плоскость сплиттера, библиотеку Splitter.js и у меня проблемы.Проблемы, связанные с разделителем панели и jstree с Javascript

Библиотека сплиттеров находится по адресу 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>

источник

2013-10-14 sien

Похоже, что проблема с сплиттер и более поздних версий JQuery.

Этот вопрос обсуждается вопрос:

Splitter.js won't work with new versions of 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-15 02:58:20 sien

Проблемы, связанные с разделителем панели и jstree с Javascript

ответ

Смежные вопросы