Search im tree menu
Michael Wiegand
- javascript
Ich habe eine html-Seite erstellt (siehe unten) die ein tree menu (aus selfhtml)beinhaltet. Ich möchte nun nach Einträgen in diesem tree menu suchen. Die Suchfunktion habe ich von der Webseite (http://www.perlunity.de/javascript/scripts/javascript_0167_main.shtml). Funktioniert auch wunderbar, wenn der tree geöffnet ist. Ich möchte aber gerne das sich der tree öffnet und der Entrag markiert wird, wenn dieser gefunden wird.
Kann mir da jemand helfen?
Hier der Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Neue Seite 1</title>
<title>Beispiel</title>
<script type="text/javascript">
/*
* Ist aus selfhtml
*
* Fügt den Listeneinträgen Eventhandler und CSS Klassen hinzu,
* um die Menüpunkte am Anfang zu schließen.
*
* menu: Referenz auf die Liste.
* data: String, der die Nummern aufgeklappter Menüpunkte enthält.
*/
function treeMenu_init(menu, data) {
var array = new Array(0);
if(data != null && data != "") {
array = data.match(/\d+/g);
}
var items = menu.getElementsByTagName("li");
for(var i = 0; i < items.length; i++) {
items[i].onclick = treeMenu_handleClick;
if(!treeMenu_contains(treeMenu_getClasses(items[i]), "treeMenu_opened")
&& items[i].getElementsByTagName("ul").length
+ items[i].getElementsByTagName("ol").length > 0) {
var classes = treeMenu_getClasses(items[i]);
if(array.length > 0 && array[0] == i) {
classes.push("treeMenu_opened")
}
else {
classes.push("treeMenu_closed")
}
items[i].className = classes.join(" ");
if(array.length > 0 && array[0] == i) {
array.shift();
}
}
}
}
/*
* Ändert die Klasse eines angeclickten Listenelements, sodass
* geöffnete Menüpunkte geschlossen und geschlossene geöffnet
* werden.
*
* event: Das Event Objekt, dass der Browser übergibt.
*/
function treeMenu_handleClick(event) {
if(event == null) { //Workaround für die fehlenden DOM Eigenschaften im IE
event = window.event;
event.currentTarget = event.srcElement;
while(event.currentTarget.nodeName.toLowerCase() != "li") {
event.currentTarget = event.currentTarget.parentNode;
}
event.cancelBubble = true;
}
else {
event.stopPropagation();
}
var array = treeMenu_getClasses(event.currentTarget);
for(var i = 0; i < array.length; i++) {
if(array[i] == "treeMenu_closed") {
array[i] = "treeMenu_opened";
}
else if(array[i] == "treeMenu_opened") {
array[i] = "treeMenu_closed"
}
}
event.currentTarget.className = array.join(" ");
}
/*
* Gibt alle Klassen zurück, die einem HTML-Element zugeordnet sind.
*
* element: Das HTML-Element
* return: Die zugeordneten Klassen.
*/
function treeMenu_getClasses(element) {
if(element.className) {
return element.className.match(/[^ \t\n\r]+/g);
}
else {
return new Array(0);
}
}
/*
* Überprüft, ob ein Array ein bestimmtes Element enthält.
*
* array: Das Array
* element: Das Element
* return: true, wenn das Array das Element enthält.
*/
function treeMenu_contains(array, element) {
for(var i = 0; i < array.length; i++) {
if(array[i] == element) {
return true;
}
}
return false;
}
/*
* Gibt einen String zurück, indem die Nummern aller geöffneten
* Menüpunkte stehen.
*
* menu: Referenz auf die Liste
* return: Der String
*/
function treeMenu_store(menu) {
var result = new Array();;
var items = menu.getElementsByTagName("li");
for(var i = 0; i < items.length; i++) {
if(treeMenu_contains(treeMenu_getClasses(items[i]), "treeMenu_opened")) {
result.push(i);
}
}
return result.join(" ");
}
/*
* Start
* Search im Dokument
* http://www.perlunity.de/javascript/scripts/javascript_0167_main.shtml
*/
var IE4 = (document.all);
var win = window; // window to search.
var n = 0;
function findInPage(str) {
var txt, i, found,v;
if (str == "")
return false;
// Find next occurance of the given string on the page, wrap around to the
// start of the page if necessary.
if (IE4)
{
txt = win.document.body.createTextRange();
// Find the nth match from the top of the page.
for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) {
txt.moveStart("character", 1);
txt.moveEnd("textedit");
}
// If found, mark it and scroll it into view.
if (found)
{
txt.moveStart("character", -1);
txt.findText(str);
txt.select();
txt.scrollIntoView();
n++;
//alert (n);
}
// Otherwise, start over at the top of the page and find first match.
else
{
if (n > 0)
{
n = 0;
findInPage(str);
}
// Not found anywhere, give message.
else
alert("Nichts gefunden.");
}
}
return false;
}
/*
* Search im Dokument
* http://www.perlunity.de/javascript/scripts/javascript_0167_main.shtml
* Ende
*/
</script>
<style type="text/css">
li.treeMenu_opened ul {
display: block;
}
li.treeMenu_closed ul {
display: none;
}
</style>
</head>
<body onload="treeMenu_init(document.getElementById('menu'), '')">
<form name="search" onSubmit="return findInPage(this.string.value);">
<font size=3><input name="string" type="text" size=15 onChange="n = 0;"></font>
<input type="submit" value="Suchen" >
</form>
<b>Welche Schnittstellen bestehen zum PLS?</b>
<ul id="menu">
<li type=square><b>ADAM</b>
<ul>
<li type=circle>PETER
<ul>
<li type=circle>PAUL</li>
</ul>
</li>
<li type=circle>TEST</li>
<li type=circle>VERSUCH</li>
</ul>
</li>
<li type=square><b>EVA</b>
<ul>
<li type=circle>PETER
<ul>
<li type=circle>PAUL</li>
</ul>
</li>
<li type=circle>PETRA</li>
<li type=circle>TINA</li>
</ul>
</li>
</ul>
</body>
</html>
Hell-O!
Die Suchfunktion habe ich von der Webseite (http://www.perlunity.de/javascript/scripts/javascript_0167_main.shtml). Funktioniert auch wunderbar, wenn der tree geöffnet ist.
Bevor du anfängst, an dem Script herumzuschrauben, solltest du dir bewusst sein, dass dein Script in modernen Browsern nicht funktionieren wird, einzig der IE dürfte keine Zicken machen. Zwar sind einige Browser mit dem all-Objekt vertraut (Opera und Mozilla), eine Abfrage des Objektes allerdings liefert IIRC stets "False". Du solltest dich nach einem moderneren Script umschauen (bereits die ersten Treffer einer entsprechenden Google-Suche sehen recht vielversprechend aus).
Wenn du mit dieser Unzulänglichkeit leben kannst und willst, dann poste bitte einen Link zu einer Beispielseite, damit man sich nicht durch den von dir geposteten Quellcode wühlen muss.
Siechfred
wenn mir als absoluten Frischling in Sachen Forum, mal bitte sagen könntest was "posten" bedeuted.
Hallo Michael,
was "posten" bedeuted.
Posten bedeuted, eine Nachricht (ein Posting) im Forum zu schreiben, also, das was du gerade gemacht hast.
Du wirst das hier vielleicht lesen wollen: http://forum.de.selfhtml.org/hilfe/
Gruß,
Dieter