📄 tree.htm

📁 这是一些关于JavaScript的学习资料希望对大家有用
💻 HTM
字号:
<html>
<head>
<title>Listing 26.4. HTML Navigation Tree, Part 4 - 品络科技 pinluo.com</TITLE>

<script language="JavaScript" type="text/javascript">
<!--

// This global array holds all the tree nodes
var nodes_array = new Array()

// This global variable holds the currently displayed document
var current_document = -1

// Pre-load the images
var temp_image = new Image(22, 16)
temp_image.src = "open.gif"
var temp_image = new Image(22, 16)
temp_image.src = "closed.gif"
var temp_image = new Image(18, 13)
temp_image.src = "plus.gif"
var temp_image = new Image(18, 13)
temp_image.src = "minus.gif"
var temp_image = new Image(22, 16)
temp_image.src = "open_page.gif"
var temp_image = new Image(22, 16)
temp_image.src = "closed_page.gif"


// This function creates a node in the tree with the following arguments:
//    level - The level within the tree hierarchy (0 = top)
//    index - The node's index within the global nodes_array
//    text  - The text displayed in the tree for this node
//    state - Folder: "open" (expanded) or "closed" (collapsed)
//            Document: "open" (displayed) or "closed" (hidden)
//    url   - For a document, the address it will display when clicked

function node_data (level, index, text, state, url) {
    this.level = level
    this.index = index
    this.text = text
    this.state = state
    this.url = url
}

// This function creates a node in the tree; the
// arguments are used by the node_data() function

function create_node(level, text, state, url) {

    // Create a new node array
    var new_node = new Array()
    
    // Put it in the global nodes_array
    var nodes_index = nodes_array.length
    nodes_array[nodes_index] = new_node

    // The first item in the array is the node_data object
    new_node[0] = new node_data(level, nodes_index, text, state, url)
    
    // Return the array
    return new_node
}

// This function adds a child to an existing parent node
function add_child(parent_node, child_node) {

    // We're adding an item to the parent's array, so the array's
    // current length represents the next index of that array
    var next_index = parent_node.length
    
    // Add the child node to the parent's array
    parent_node[next_index] = child_node
    
    // Return the child
    return child_node
}

// This function builds the node of the navigation tree
function build_tree() {

    // Begin with the main node
    main_node = create_node(0, "Main Folder", "closed", "")
    
        // Add the child nodes
        level1_node = add_child(main_node, create_node(1, "Folder 1", "closed", ""))
            level2_node = add_child(level1_node, create_node(2, "Folder 2", "closed", ""))
                level3_node = add_child(level2_node, create_node(3, "Document 1", "closed", "cookie.htm"))
                level3_node = add_child(level2_node, create_node(3, "Document 2", "closed", "cookie1.html"))
            level2_node = add_child(level1_node, create_node(2, "Folder 3", "closed", ""))
                level3_node = add_child(level2_node, create_node(3, "Document 3", "closed", "document3.htm"))
                level3_node = add_child(level2_node, create_node(3, "Document 4", "closed", "document4.htm"))
        level1_node = add_child(main_node, create_node(1, "Folder 4", "closed", ""))
            level2_node = add_child(level1_node, create_node(2, "Folder 5", "closed", ""))
                level3_node = add_child(level2_node, create_node(3, "Document 5", "closed", "document5.htm"))
                level3_node = add_child(level2_node, create_node(3, "Document 6", "closed", "document6.htm"))
            level2_node = add_child(level1_node, create_node(2, "Folder 6", "closed", ""))
                level3_node = add_child(level2_node, create_node(3, "Document 7", "closed", "document7.htm"))
                level3_node = add_child(level2_node, create_node(3, "Document 8", "closed", "document8.htm"))

    // Write the navigation menu
    timeout_id = setTimeout("write_menu()", 50)

}

function write_menu() {

    // Clear the frame and write the basic opening tags
    frames["tree_frame"].document.clear()
    frames["tree_frame"].document.writeln('<html>')
    frames["tree_frame"].document.writeln('<head>')
    frames["tree_frame"].document.writeln('<title>')
    frames["tree_frame"].document.writeln('Menu Frame')
    frames["tree_frame"].document.writeln('<\/title>')
    frames["tree_frame"].document.writeln('<style type="text/css">')
    frames["tree_frame"].document.writeln('<!--')
    frames["tree_frame"].document.writeln('td {font-size: 8pt; font-family: Arial, Helvetica}')
    frames["tree_frame"].document.writeln('-->')
    frames["tree_frame"].document.writeln('<\/style>')
    frames["tree_frame"].document.writeln('<\/head>')
    frames["tree_frame"].document.writeln('<body>')
    frames["tree_frame"].document.writeln('<font style="font-size: 12pt; font-family: Arial, Helvetica">Navigation Menu<\/font>')
    frames["tree_frame"].document.writeln('<hr>')
    frames["tree_frame"].document.writeln('<font style="font-size: 8pt; font-family: Arial, Helvetica">')
    frames["tree_frame"].document.writeln('<a href="javascript:parent.change_all(\'open\')"><img src="plus.gif" border="0"></a>Expand All&nbsp;')
    frames["tree_frame"].document.writeln('<a href="javascript:parent.change_all(\'closed\')"><img src="minus.gif" border="0"></a>Collapse All<p>')
    frames["tree_frame"].document.writeln('<\/font>')
    
    // Create a table for each node
    frames["tree_frame"].document.writeln('<table border="0" cellspacing="0" cellpadding="0">')
    
    // Write the main node
    frames["tree_frame"].document.writeln('<tr>')
    frames["tree_frame"].document.writeln('<td valign="top">')
    frames["tree_frame"].document.writeln('<a href="javascript:parent.toggle_state(\'' + main_node[0].index + '\')">')
    
    if (main_node[0].state == "closed") {
        frames["tree_frame"].document.writeln('<img src="plus.gif" border="0"></a><img src="closed.gif">')
    }
    else {
        frames["tree_frame"].document.writeln('<img src="minus.gif" border="0"></a><img src="open.gif">')
    }
    frames["tree_frame"].document.writeln('<\/td>')
    frames["tree_frame"].document.writeln('<td>')
    frames["tree_frame"].document.writeln(main_node[0].text)
    frames["tree_frame"].document.writeln('<\/td>')
    frames["tree_frame"].document.writeln('<\/tr>')
    frames["tree_frame"].document.writeln("<\/table>")

    // If the main node state is "open", write the child nodes
    if (main_node[0].state == "open") {
        write_children(main_node)
    }
   
    // Finish up
    frames["tree_frame"].document.writeln('<\/body>')
    frames["tree_frame"].document.writeln('<\/html>')
    frames["tree_frame"].document.close()
    setTimeout("writearray()", 1000)

}
function writearray()
{
 frames["content_frame"].document.clear()
    frames["content_frame"].document.writeln('<html>')
    frames["content_frame"].document.writeln('<head>')
    frames["content_frame"].document.writeln('<title>')
    frames["content_frame"].document.writeln('Menu Frame')
    frames["content_frame"].document.writeln('<\/title>')
    frames["content_frame"].document.writeln('<\/head>')
frames["content_frame"].document.writeln('<body>')
for(var i in nodes_array)
{
for(var j in nodes_array[i])
{for(var k in nodes_array[i][j])
frames["content_frame"].document.writeln("@"+i+":"+j+":"+k+"--"+nodes_array[i][j][k]);
frames["content_frame"].document.writeln("<br>");
}
frames["content_frame"].document.writeln("<p>");
}
frames["content_frame"].document.writeln('<\/body>');
frames["content_frame"].document.writeln('<\/html>');
frames["content_frame"].document.close();

}

// This function writes all the child node for whatever
// parent node is specified as the argument. Note that
// this function is called recursively whenever any
// child node has children of its own.

function write_children(parent_node) {

    var child_node
    var indent_width
        
    // Run through all of the parent's child nodes
    // parent_node[0] refers to the parent node itself, so start at 1
    for (var counter = 1; counter < parent_node.length; counter++) {
    
        // Store the child node
        child_node = parent_node[counter]
        
        // First check to see if this is a folder or a document
        var its_a_folder = true
        if (child_node.length == 1) {
            its_a_folder = false
        }

        // Create a table for the child node
        frames["tree_frame"].document.writeln('<table border="0" cellspacing="0" cellpadding="0">')
        frames["tree_frame"].document.writeln('<tr>')
        frames["tree_frame"].document.writeln('<td>')
        
        // Calculate and display the indentation
        indent_width = child_node[0].level * 20
        if (!its_a_folder) {
            
            // Need a bit extra for a document
            indent_width += 20
        }
        frames["tree_frame"].document.writeln('<td>')
        frames["tree_frame"].document.writeln('<img src="invisible.gif" width="' + indent_width + '" height="10">')
        frames["tree_frame"].document.writeln('<\/td>')
        
        // Write the node text
        frames["tree_frame"].document.writeln('<td valign="top">')

        // Handle folders and documents separately
        if (its_a_folder) {

            frames["tree_frame"].document.writeln('<a href="javascript:parent.toggle_state(\'' + child_node[0].index + '\')">')
            if (child_node[0].state == "closed") {
                 frames["tree_frame"].document.write('<img src="plus.gif" border="0"></a><img src="closed.gif">')
            }
            else {
                frames["tree_frame"].document.write('<img src="minus.gif" border="0"></a><img src="open.gif">')
            }
            frames["tree_frame"].document.writeln('<\/td>')
            frames["tree_frame"].document.writeln('<td>')
            frames["tree_frame"].document.writeln(child_node[0].text)
            
            frames["tree_frame"].document.writeln('<\/td>')
            frames["tree_frame"].document.writeln('<\/tr>')
            frames["tree_frame"].document.writeln('<\/table>')

            // If this child's state is "open", recursively call
            // this function to write the child's children (if any)
            if (child_node[0].state == "open") {
                write_children(child_node)
            }
        }
        else {
        
            // Is it the currently displayed document?
            if (child_node[0].index == current_document) {
                frames["tree_frame"].document.writeln('<img src="open_page.gif">')
                frames["tree_frame"].document.writeln('<\/td>')
                frames["tree_frame"].document.writeln('<td>')
                frames["tree_frame"].document.writeln(child_node[0].text)
            }
            else {
                frames["tree_frame"].document.writeln('<a href="javascript:parent.toggle_state(\'' + child_node[0].index + '\')">' + 
                '<img src="closed_page.gif" border="0">')
                frames["tree_frame"].document.writeln('<\/td>')
                frames["tree_frame"].document.writeln('<td>')
                frames["tree_frame"].document.writeln('<a href="javascript:parent.toggle_state(\'' + child_node[0].index + '\')">') 
                frames["tree_frame"].document.writeln(child_node[0].text + '</a>')
            }                        
            frames["tree_frame"].document.writeln('<\/td>')
            frames["tree_frame"].document.writeln('<\/tr>')
            frames["tree_frame"].document.writeln('<\/table>')
        }

        frames["tree_frame"].document.writeln('<\/td>')
        frames["tree_frame"].document.writeln('<\/tr>')
    }
}

function toggle_state(node_index) {
    
    // Get the node from the global nodes_array
    var current_node = nodes_array[node_index]

    // Store the node's current state
    current_state = current_node[0].state
    
    // Change it to the other state
    if (current_state == "open") {
        current_node[0].state = "closed"
    }
    else {
        current_node[0].state = "open"
    }
    
    // Is this a document?
    if (current_node.length == 1) {
        if (current_document != -1) {
            nodes_array[current_document].state = "closed"
        }
        current_document = current_node[0].index
        frames["content_frame"].location = current_node[0].url
    }
    
    // Rewrite the menu
    timeout_id = setTimeout("write_menu()", 50)
}

function change_all(new_state) {

    var current_node

    // Run through the global nodes_array
    for (counter = 0; counter < nodes_array.length; counter++) {
    
        //Store the current node
        current_node = nodes_array[counter]
        
        // Work only with folders
        if (current_node.length > 1) {
            current_node[0].state = new_state
        }
    }

    // Rewrite the menu
    timeout_id = setTimeout("write_menu()", 50)

}

//-->
</script>

</head>

<frameset cols="200,*" onLoad="build_tree()" frameborder="0" border="0" framespacing="0">
    <frame src="treeleft.htm" name="tree_frame"> 
    <frame src="treeright.htm" name="content_frame"> 
</frameset> 

</html>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -