У меня неприятная проблема с jQuery.Я сделал разборное дерево, используя это: http://docs.jquery.com/Plugins/Treeview Проблема была в том, что его нужно было использовать с сгенерированным HTML.Поэтому я сделал другой jQuery-скрипт, тоже отредактировавший HTML, чтобы быть совместимым со скриптом treeview.HTML должен иметь li и ul с определенными классами, но сгенерированный HTML был просто пустым UL с LI.Вы можете увидеть мой сценарий здесь: (он довольно хорошо задокументирован и, следовательно, вполне понятен)
$(document).ready( function () {
loadPage();
});
function loadPage() {
//Loop through all wanted li-elements
$('div.treeContent ul li').each(function(index) {
//If the li doesn't have an ul-element, we replace it's content with a span around the original content
$(this).not($(this).has('ul')).wrapInner('<span class="file" />');
//If there are ul-elements available
if($(this).has('ul').length > 0) {
var el = null;
for(var i=0; i<$(this).contents().size() && el==null; i++) {
el = $(this).contents().eq(i); //We take the i-element
var text = el.text(); //We take the textnode out of it.
if(text.length < 1 || text.match(/^\s+$/)) {
//The text doesn't contain anything, or only whitespaces. Let's take the next element!
el = null;
}
}
if(el.is('a')) {
el.wrap('<span class="folder"/>');
}
else {
//If the el-var is filled with something NOT empty and NOT only containing spaces:
text = '<span class="folder">' + text + '</span>'; //We change the textnode.
el.replaceWith(text); //We put the textnode back into it.
}
}
});
/*
* Since the scripts were loading at the same time and this is unwanted
* I open the other one when document is ready
*/
$(document).ready(function(){
$("#treeMenu").treeview();
});
}
function openPathMenu() {
//First we get the current URL to look for
var pathname = window.location.href;
var splittedPath = pathname.split("xenit.eu");
//Now the first element of splittedPath will contain the part BEFORE xenit.eu, the second one will contain the part we are looking for!
var URL = splittedPath[1];
//Next we are going to try to find this URL in our tree
$('ul.treeview').find('a').each(function() { //Look for the a-elements in the tree
if($(this).attr('href') == URL) { //Check whether the href-attribute is equal to the URL we're looking for
$(this).addClass('selected');
$(this).parents('li.expandable').each(function() { //Look for li.expandable parents and put them on expanded.
$(this).children("div.hitarea").click(); //By clicking on them.
})
}
})
}
Это прекрасно работает в Firefox.Когда я проверил это в IE8 и Chrome, оказалось, что они дают ошибки.IE8 выдает мне: «Объект не поддерживает это свойство или метод Collaps.js, строка 14, символ 9», а Chrome - «Uncaught TypeError: У объекта # нет метода« has »».что-то в этом роде.
У меня было подозрение, что это должно быть связано с тем, как все загружается.Как вы можете видеть, у меня была проблема с загрузкой скрипта treeview до моего Collaps.js, который, конечно, не работает, поскольку HTML должен быть отформатирован с помощью Collaps.js, иначе скрипт treeview не будет работать.
В скрипте treeview я изменил несколько вещей: я хотел, чтобы мой скрипт закрывал все дерево при загрузке страницы, поэтому я добавил функцию для закрытия li и .each () для закрытия всех liв "TreeView" -функции.
В конце этой «функции» я поместил еще один $ (document) .ready () для вызова функции в Collaps.js: openPathMenu ().(Чтобы открыть дерево по текущему URL), я подумал, что это может вызвать проблему, но когда я это комментирую, он все равно не работает.
Вы можете увидеть те функции, которые я добавил в treeview.js (в конце "treeview: function (settings)") здесь:
//Close all the collapsable li's in the ul.treeview
$("ul.treeview").children("li.collapsable").each(function() {
closeElement($(this), true);
})
/*
* @Author: Trinorae
* A function to close a certain li.collapsable element (and all it's children)
* parameters:
* el: li.collapsable element to close
* childrenToo: close all children too?
*/
function closeElement(el, childrenToo) {
if(childrenToo) {
//Search all "ul li.collapsable"-children of our element
var liCollapsers = el.children("ul").children("li.collapsable");
if(liCollapsers.length > 0) { //If there are "ul li.collapsable"-children
liCollapsers.each(function() {
closeElement($(this)); //Close them too
})
}
}
el.children("div." + CLASSES.hitarea).click(); //Close the element!
}
//Do something after everything is loaded:
$(document).ready(function(){
openPathMenu();
});
Если бы это быловажно: я использую jQuery 1.5.1 Я запускаю это на веб-сайте Drupal 6.Я попробовал свой скипет (частично) локально с этим коротким HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>A Collapsible test</title>
<script src="files/js/jQuery.js"></script>
<script src="files/js/Collaps.js"></script>
<script src="files/js/treeview.js"></script>
<link href="files/css/treeview.css" rel="stylesheet" />
</head>
<body>
<div class="treeContent">
<ul id="treeMenu">
<li>
<a title="About document models and metadata" href="/nl/?q=fred/1.3/manual/About%20document%20models%20and%20metadata.html">About document models and metadata</a>
</li>
<li>
<a title="Google" href="http://www.google.be" target="main">About Fred</a>
</li>
<li>
<a title="Advanced user functions" href="/nl/?q=fred/1.3/manual/Advanced%20user%20functions.html">Advanced user functions</a>
<ul>
<li>
<a title="Browse as user" href="/nl/?q=fred/1.3/manual/Browse%20as%20user.html">Browse as user</a>
</li>
<li>
<a title="Data dictionary" href="/nl/?q=fred/1.3/manual/Data%20dictionary.html">Data dictionary</a>
</li>
</ul>
</li>
//And so on..
И он отлично работает.Я действительно не могу проверить, работает ли openPathMenu (), но я полагаю, что это не имеет значения.Суть в том, что это загрузка в первую очередь и редактирование HTML с моим скриптом, заставляющее работать древовидное представление!
Так что я боюсь, что это тоже может быть проблема с Drupal ..Я надеюсь, что кто-то видит что-то, что я сделал неправильно, и может помочь.(Вполне возможно, что это что-то глупое, поскольку я никогда раньше не использовал jQuery) Извините за нелепое длинное объяснение, но я не знал, как объяснить это короче.