• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 26. JavaScript Project: Creating... > Stage 4: Adding Graphics and Other I...

Stage 4: Adding Graphics and Other Interface Enhancements

Although our menu is fully functional, it isn't exactly a work of art. To get it ready for prime time, we need to gussy it up a bit to make it look nicer and to help out the user with extra visual clues. Listing 26.4 shows the completed page, and I discuss the enhancements at the end of the script.

Code Listing 26.4. The Final Script

<html>
<head>
<title>Listing 26.4. HTML Navigation Tree, Part 4</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", 
                                "open", ""))
            level2_node = add_child(level1_node, create_node(2, "Folder 2", 
                                    "open", ""))
                level3_node = add_child(level2_node, create_node(3, "Document 1", 
                                        "closed", "document1.htm"))
                level3_node = add_child(level2_node, create_node(3, "Document 2", 
                                        "closed", "document2.htm"))
            level2_node = add_child(level1_node, create_node(2, "Folder 3", 
                                    "open", ""))
                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", 
                                "open", ""))
            level2_node = add_child(level1_node, create_node(2, "Folder 5", 
                                    "open", ""))
                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",
                                    "open", ""))
                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('<\/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()

}

// 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"></a>')
                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 is 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="26.1a.htm" name="tree_frame">
    <frame src="26.1b.htm" name="content_frame">
</frameset> 

</html>


					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint