examples/DHTML_example.html

<HTML>
<HEAD>
<STYLE TYPE="text/css">

    .listClass { font-family: Courier; font-size: 10pt; }
    .listItemClass { list-style: none; }
    .expandedItemClass { list-style: circle; font-weight: bold; }
    .linkClass { text-decoration: none; }
    .linkClass:hover { text-decoration: underline; }
    
    H1 { font-family: Ariel, Helvetica, sans-serif;  }
    PRE { padding: 10px; border: 1px solid #666666; background: #CCCCCC; }
            
</STYLE>
<TITLE>Tree::Simple::View::DHTML::DHTML Example</TITLE>

<SCRIPT LANGUAGE="javascript">
function toggleList(tree_id) {
    var element = document.getElementById(tree_id);
    if (element) {
        if (element.style.display == 'none') {
            element.style.display = 'block';    
        }
        else {
            element.style.display = 'none';    
        }
    }
}
</SCRIPT>

</HEAD>
<BODY>
<H1>Tree::Simple::View::DHTML::DHTML Examples</H1>
<DIV STYLE="font-family: sans-serif;">For each example given, we show the code, followed by the results of the HTML it produces. These bare all DHTML examples, so the tree can be expanded and collapsed by clicking on the links.</DIV>
<HR>
<PRE>
my $tree_view = Tree::Simple::View::DHTML->new($tree);
print $tree_view->javascript();
print $tree_view->expandAll();
</PRE>
<UL>
<LI><A HREF='javascript:void(0);' onClick='toggleList("0x1828fbc_0x1834230_1")'>Tree-Simple-View</A></LI>
<UL ID='0x1828fbc_0x1834230_1'>
<LI><A HREF='javascript:void(0);' onClick='toggleList("0x1828fa4_0x1834230_2")'>lib</A></LI>
<UL ID='0x1828fa4_0x1834230_2'>
<LI><A HREF='javascript:void(0);' onClick='toggleList("0x1829028_0x1834230_3")'>Tree</A></LI>
<UL ID='0x1829028_0x1834230_3'>
<LI><A HREF='javascript:void(0);' onClick='toggleList("0x1829088_0x1834230_4")'>Simple</A></LI>
<UL ID='0x1829088_0x1834230_4'>
<LI>View.pm</LI>
<LI><A HREF='javascript:void(0);' onClick='toggleList("0x1829148_0x1834230_5")'>View</A></LI>
<UL ID='0x1829148_0x1834230_5'>
<LI>HTML.pm</LI>
<LI>DHTML.pm</LI>
</UL></UL></UL></UL>
<LI>Makefile.PL</LI>
<LI>MANIFEST</LI>
<LI>README</LI>
<LI>Changes</LI>
<LI><A HREF='javascript:void(0);' onClick='toggleList("0x1807204_0x1834230_6")'>t</A></LI>
<UL ID='0x1807204_0x1834230_6'>
<LI>10_Tree_Simple_View_test.t</LI>
<LI>20_Tree_Simple_View_HTML_test.t</LI>
<LI>30_Tree_Simple_View_DHTML_test.t</LI>
</UL></UL></UL><HR>
<PRE>
my $tree_view = Tree::Simple::View::DHTML->new($tree);
print $tree_view->javascript();
print $tree_view->expandPath(qw(Tree-Simple-View lib Tree));
</PRE>
<UL>
<LI><A HREF='javascript:void(0);' onClick='toggleList("0x1828fbc_0x1834230_7")'>Tree-Simple-View</A></LI>
<UL ID='0x1828fbc_0x1834230_7' STYLE='display: block;'>
<LI><A HREF='javascript:void(0);' onClick='toggleList("0x1828fa4_0x1834230_8")'>lib</A></LI>
<UL ID='0x1828fa4_0x1834230_8' STYLE='display: block;'>
<LI><A HREF='javascript:void(0);' onClick='toggleList("0x1829028_0x1834230_9")'>Tree</A></LI>
<UL ID='0x1829028_0x1834230_9' STYLE='display: block;'>
<LI><A HREF='javascript:void(0);' onClick='toggleList("0x1829088_0x1834230_10")'>Simple</A></LI>
<UL ID='0x1829088_0x1834230_10' STYLE='display: none;'>
<LI>View.pm</LI>
<LI><A HREF='javascript:void(0);' onClick='toggleList("0x1829148_0x1834230_11")'>View</A></LI>
<UL ID='0x1829148_0x1834230_11' STYLE='display: none;'>
<LI>HTML.pm</LI>
<LI>DHTML.pm</LI>
</UL></UL></UL></UL>
<LI>Makefile.PL</LI>
<LI>MANIFEST</LI>
<LI>README</LI>
<LI>Changes</LI>
<LI><A HREF='javascript:void(0);' onClick='toggleList("0x1807204_0x1834230_12")'>t</A></LI>
<UL ID='0x1807204_0x1834230_12' STYLE='display: none;'>
<LI>10_Tree_Simple_View_test.t</LI>
<LI>20_Tree_Simple_View_HTML_test.t</LI>
<LI>30_Tree_Simple_View_DHTML_test.t</LI>
</UL></UL></UL><HR>
<PRE>
# view source to see the CSS class definitions
my $tree_view = Tree::Simple::View::DHTML->new($tree => (
                    list_css_class => "listClass",
                    list_item_css_class => "listItemClass",
                    expanded_item_css_class => "expandedItemClass",   
                    link_css_class => "linkClass",
                    node_formatter => sub {
                        my ($t) = @_;
                        # add a trailing slash to all our 'directories'
                        return $t->getNodeValue() . "/" unless $t->isLeaf();
                        return $t->getNodeValue();
                        }                                            
                    ));
print $tree_view->javascript();                            
print $tree_view->expandAll();
</PRE>
<UL CLASS='listClass'>
<LI CLASS='expandedItemClass'><A CLASS='linkClass' HREF='javascript:void(0);' onClick='toggleList("0x1828fbc_0x1834744_1")'>Tree-Simple-View/</A></LI>
<UL CLASS='listClass' ID='0x1828fbc_0x1834744_1'>
<LI CLASS='expandedItemClass'><A CLASS='linkClass' HREF='javascript:void(0);' onClick='toggleList("0x1828fa4_0x1834744_2")'>lib/</A></LI>
<UL CLASS='listClass' ID='0x1828fa4_0x1834744_2'>
<LI CLASS='expandedItemClass'><A CLASS='linkClass' HREF='javascript:void(0);' onClick='toggleList("0x1829028_0x1834744_3")'>Tree/</A></LI>
<UL CLASS='listClass' ID='0x1829028_0x1834744_3'>
<LI CLASS='expandedItemClass'><A CLASS='linkClass' HREF='javascript:void(0);' onClick='toggleList("0x1829088_0x1834744_4")'>Simple/</A></LI>
<UL CLASS='listClass' ID='0x1829088_0x1834744_4'>
<LI CLASS='listItemClass'>View.pm</LI>
<LI CLASS='expandedItemClass'><A CLASS='linkClass' HREF='javascript:void(0);' onClick='toggleList("0x1829148_0x1834744_5")'>View/</A></LI>
<UL CLASS='listClass' ID='0x1829148_0x1834744_5'>
<LI CLASS='listItemClass'>HTML.pm</LI>
<LI CLASS='listItemClass'>DHTML.pm</LI>
</UL></UL></UL></UL>
<LI CLASS='listItemClass'>Makefile.PL</LI>
<LI CLASS='listItemClass'>MANIFEST</LI>
<LI CLASS='listItemClass'>README</LI>
<LI CLASS='listItemClass'>Changes</LI>
<LI CLASS='expandedItemClass'><A CLASS='linkClass' HREF='javascript:void(0);' onClick='toggleList("0x1807204_0x1834744_6")'>t/</A></LI>
<UL CLASS='listClass' ID='0x1807204_0x1834744_6'>
<LI CLASS='listItemClass'>10_Tree_Simple_View_test.t</LI>
<LI CLASS='listItemClass'>20_Tree_Simple_View_HTML_test.t</LI>
<LI CLASS='listItemClass'>30_Tree_Simple_View_DHTML_test.t</LI>
</UL></UL></UL><HR>
<PRE>
# view source to see the CSS class definitions
my $tree_view = Tree::Simple::View::DHTML->new($tree => (
                    list_css_class => "listClass",
                    list_item_css_class => "listItemClass",
                    expanded_item_css_class => "expandedItemClass",   
                    link_css_class => "linkClass",
                    node_formatter => sub {
                        my ($t) = @_;
                        # add a trailing slash to all our 'directories'
                        return $t->getNodeValue() . "/" unless $t->isLeaf();
                        return $t->getNodeValue();
                        }                                              
                    ));
print $tree_view->javascript();                            
print $tree_view->expandPath(qw(Tree-Simple-View lib Tree Simple));
</PRE>
<UL CLASS='listClass'>
<LI CLASS='expandedItemClass'><A CLASS='linkClass' HREF='javascript:void(0);' onClick='toggleList("0x1828fbc_0x1834744_7")'>Tree-Simple-View/</A></LI>
<UL CLASS='listClass' STYLE='display: block;' ID='0x1828fbc_0x1834744_7'>
<LI CLASS='expandedItemClass'><A CLASS='linkClass' HREF='javascript:void(0);' onClick='toggleList("0x1828fa4_0x1834744_8")'>lib/</A></LI>
<UL CLASS='listClass' STYLE='display: block;' ID='0x1828fa4_0x1834744_8'>
<LI CLASS='expandedItemClass'><A CLASS='linkClass' HREF='javascript:void(0);' onClick='toggleList("0x1829028_0x1834744_9")'>Tree/</A></LI>
<UL CLASS='listClass' STYLE='display: block;' ID='0x1829028_0x1834744_9'>
<LI CLASS='expandedItemClass'><A CLASS='linkClass' HREF='javascript:void(0);' onClick='toggleList("0x1829088_0x1834744_10")'>Simple/</A></LI>
<UL CLASS='listClass' STYLE='display: block;' ID='0x1829088_0x1834744_10'>
<LI CLASS='listItemClass'>View.pm</LI>
<LI CLASS='expandedItemClass'><A CLASS='linkClass' HREF='javascript:void(0);' onClick='toggleList("0x1829148_0x1834744_11")'>View/</A></LI>
<UL CLASS='listClass' STYLE='display: none;' ID='0x1829148_0x1834744_11'>
<LI CLASS='listItemClass'>HTML.pm</LI>
<LI CLASS='listItemClass'>DHTML.pm</LI>
</UL></UL></UL></UL>
<LI CLASS='listItemClass'>Makefile.PL</LI>
<LI CLASS='listItemClass'>MANIFEST</LI>
<LI CLASS='listItemClass'>README</LI>
<LI CLASS='listItemClass'>Changes</LI>
<LI CLASS='expandedItemClass'><A CLASS='linkClass' HREF='javascript:void(0);' onClick='toggleList("0x1807204_0x1834744_12")'>t/</A></LI>
<UL CLASS='listClass' STYLE='display: none;' ID='0x1807204_0x1834744_12'>
<LI CLASS='listItemClass'>10_Tree_Simple_View_test.t</LI>
<LI CLASS='listItemClass'>20_Tree_Simple_View_HTML_test.t</LI>
<LI CLASS='listItemClass'>30_Tree_Simple_View_DHTML_test.t</LI>
</UL></UL></UL><PRE>
my $tree_view = Tree::Simple::View::DHTML->new(Tree::Simple=HASH(0x1806a04) => (
                    list_css => "font-family: Times",
                    list_item_css => "list-style: circle;",
                    expanded_item_css => "list-style: none;",   
                    link_css => "color: #336699;", 
                    form_element_formatter => sub {
                        my ($t) = @_;
                        return "&lt;INPUT TYPE='checkbox' NAME='tree_id' onClick='alert(this.value)' VALUE='" . $t->getNodeValue() . "'&gt;"
                        }
                    ));
print $tree_view->javascript();                            
print $tree_view->expandAll();
</PRE>
<UL STYLE='font-family: Times;'>
<LI STYLE='list-style: none;'><INPUT TYPE='checkbox' NAME='tree_id' onClick='alert(this.value)' VALUE='Tree-Simple-View'><A STYLE='color: #336699;' HREF='javascript:void(0);' onClick='toggleList("0x1828fbc_0x1835d50_1")'>Tree-Simple-View</A></LI>
<UL STYLE='font-family: Times;' ID='0x1828fbc_0x1835d50_1'>
<LI STYLE='list-style: none;'><INPUT TYPE='checkbox' NAME='tree_id' onClick='alert(this.value)' VALUE='lib'><A STYLE='color: #336699;' HREF='javascript:void(0);' onClick='toggleList("0x1828fa4_0x1835d50_2")'>lib</A></LI>
<UL STYLE='font-family: Times;' ID='0x1828fa4_0x1835d50_2'>
<LI STYLE='list-style: none;'><INPUT TYPE='checkbox' NAME='tree_id' onClick='alert(this.value)' VALUE='Tree'><A STYLE='color: #336699;' HREF='javascript:void(0);' onClick='toggleList("0x1829028_0x1835d50_3")'>Tree</A></LI>
<UL STYLE='font-family: Times;' ID='0x1829028_0x1835d50_3'>
<LI STYLE='list-style: none;'><INPUT TYPE='checkbox' NAME='tree_id' onClick='alert(this.value)' VALUE='Simple'><A STYLE='color: #336699;' HREF='javascript:void(0);' onClick='toggleList("0x1829088_0x1835d50_4")'>Simple</A></LI>
<UL STYLE='font-family: Times;' ID='0x1829088_0x1835d50_4'>
<LI STYLE='list-style: circle;'><INPUT TYPE='checkbox' NAME='tree_id' onClick='alert(this.value)' VALUE='View.pm'>View.pm</LI>
<LI STYLE='list-style: none;'><INPUT TYPE='checkbox' NAME='tree_id' onClick='alert(this.value)' VALUE='View'><A STYLE='color: #336699;' HREF='javascript:void(0);' onClick='toggleList("0x1829148_0x1835d50_5")'>View</A></LI>
<UL STYLE='font-family: Times;' ID='0x1829148_0x1835d50_5'>
<LI STYLE='list-style: circle;'><INPUT TYPE='checkbox' NAME='tree_id' onClick='alert(this.value)' VALUE='HTML.pm'>HTML.pm</LI>
<LI STYLE='list-style: circle;'><INPUT TYPE='checkbox' NAME='tree_id' onClick='alert(this.value)' VALUE='DHTML.pm'>DHTML.pm</LI>
</UL></UL></UL></UL>
<LI STYLE='list-style: circle;'><INPUT TYPE='checkbox' NAME='tree_id' onClick='alert(this.value)' VALUE='Makefile.PL'>Makefile.PL</LI>
<LI STYLE='list-style: circle;'><INPUT TYPE='checkbox' NAME='tree_id' onClick='alert(this.value)' VALUE='MANIFEST'>MANIFEST</LI>
<LI STYLE='list-style: circle;'><INPUT TYPE='checkbox' NAME='tree_id' onClick='alert(this.value)' VALUE='README'>README</LI>
<LI STYLE='list-style: circle;'><INPUT TYPE='checkbox' NAME='tree_id' onClick='alert(this.value)' VALUE='Changes'>Changes</LI>
<LI STYLE='list-style: none;'><INPUT TYPE='checkbox' NAME='tree_id' onClick='alert(this.value)' VALUE='t'><A STYLE='color: #336699;' HREF='javascript:void(0);' onClick='toggleList("0x1807204_0x1835d50_6")'>t</A></LI>
<UL STYLE='font-family: Times;' ID='0x1807204_0x1835d50_6'>
<LI STYLE='list-style: circle;'><INPUT TYPE='checkbox' NAME='tree_id' onClick='alert(this.value)' VALUE='10_Tree_Simple_View_test.t'>10_Tree_Simple_View_test.t</LI>
<LI STYLE='list-style: circle;'><INPUT TYPE='checkbox' NAME='tree_id' onClick='alert(this.value)' VALUE='20_Tree_Simple_View_HTML_test.t'>20_Tree_Simple_View_HTML_test.t</LI>
<LI STYLE='list-style: circle;'><INPUT TYPE='checkbox' NAME='tree_id' onClick='alert(this.value)' VALUE='30_Tree_Simple_View_DHTML_test.t'>30_Tree_Simple_View_DHTML_test.t</LI>
</UL></UL></UL><HR>
<PRE>
my $tree_view = Tree::Simple::View::DHTML->new(Tree::Simple=HASH(0x1806a04) => (
                    list_css => "font-family: Times",
                    list_item_css => "list-style: circle;",
                    expanded_item_css => "list-style: none;",   
                    link_css => "color: #336699;", 
                    form_element_formatter => sub {
                        my ($t) = @_;
                        return "&lt;INPUT TYPE='checkbox' NAME='tree_id' onClick='alert(this.value)' VALUE='" . $t->getNodeValue() . "'&gt;"
                        }
                    ));
print $tree_view->javascript();                            
print $tree_view->expandPath(qw(Tree-Simple-View t));
</PRE>
<UL STYLE='font-family: Times;'>
<LI STYLE='list-style: none;'><INPUT TYPE='checkbox' NAME='tree_id' onClick='alert(this.value)' VALUE='Tree-Simple-View'><A STYLE='color: #336699;' HREF='javascript:void(0);' onClick='toggleList("0x1828fbc_0x1835d50_7")'>Tree-Simple-View</A></LI>
<UL STYLE='font-family: Times; display: block;' ID='0x1828fbc_0x1835d50_7'>
<LI STYLE='list-style: none;'><INPUT TYPE='checkbox' NAME='tree_id' onClick='alert(this.value)' VALUE='lib'><A STYLE='color: #336699;' HREF='javascript:void(0);' onClick='toggleList("0x1828fa4_0x1835d50_8")'>lib</A></LI>
<UL STYLE='font-family: Times; display: none;' ID='0x1828fa4_0x1835d50_8'>
<LI STYLE='list-style: none;'><INPUT TYPE='checkbox' NAME='tree_id' onClick='alert(this.value)' VALUE='Tree'><A STYLE='color: #336699;' HREF='javascript:void(0);' onClick='toggleList("0x1829028_0x1835d50_9")'>Tree</A></LI>
<UL STYLE='font-family: Times; display: none;' ID='0x1829028_0x1835d50_9'>
<LI STYLE='list-style: none;'><INPUT TYPE='checkbox' NAME='tree_id' onClick='alert(this.value)' VALUE='Simple'><A STYLE='color: #336699;' HREF='javascript:void(0);' onClick='toggleList("0x1829088_0x1835d50_10")'>Simple</A></LI>
<UL STYLE='font-family: Times; display: none;' ID='0x1829088_0x1835d50_10'>
<LI STYLE='list-style: circle;'><INPUT TYPE='checkbox' NAME='tree_id' onClick='alert(this.value)' VALUE='View.pm'>View.pm</LI>
<LI STYLE='list-style: none;'><INPUT TYPE='checkbox' NAME='tree_id' onClick='alert(this.value)' VALUE='View'><A STYLE='color: #336699;' HREF='javascript:void(0);' onClick='toggleList("0x1829148_0x1835d50_11")'>View</A></LI>
<UL STYLE='font-family: Times; display: none;' ID='0x1829148_0x1835d50_11'>
<LI STYLE='list-style: circle;'><INPUT TYPE='checkbox' NAME='tree_id' onClick='alert(this.value)' VALUE='HTML.pm'>HTML.pm</LI>
<LI STYLE='list-style: circle;'><INPUT TYPE='checkbox' NAME='tree_id' onClick='alert(this.value)' VALUE='DHTML.pm'>DHTML.pm</LI>
</UL></UL></UL></UL>
<LI STYLE='list-style: circle;'><INPUT TYPE='checkbox' NAME='tree_id' onClick='alert(this.value)' VALUE='Makefile.PL'>Makefile.PL</LI>
<LI STYLE='list-style: circle;'><INPUT TYPE='checkbox' NAME='tree_id' onClick='alert(this.value)' VALUE='MANIFEST'>MANIFEST</LI>
<LI STYLE='list-style: circle;'><INPUT TYPE='checkbox' NAME='tree_id' onClick='alert(this.value)' VALUE='README'>README</LI>
<LI STYLE='list-style: circle;'><INPUT TYPE='checkbox' NAME='tree_id' onClick='alert(this.value)' VALUE='Changes'>Changes</LI>
<LI STYLE='list-style: none;'><INPUT TYPE='checkbox' NAME='tree_id' onClick='alert(this.value)' VALUE='t'><A STYLE='color: #336699;' HREF='javascript:void(0);' onClick='toggleList("0x1807204_0x1835d50_12")'>t</A></LI>
<UL STYLE='font-family: Times; display: block;' ID='0x1807204_0x1835d50_12'>
<LI STYLE='list-style: circle;'><INPUT TYPE='checkbox' NAME='tree_id' onClick='alert(this.value)' VALUE='10_Tree_Simple_View_test.t'>10_Tree_Simple_View_test.t</LI>
<LI STYLE='list-style: circle;'><INPUT TYPE='checkbox' NAME='tree_id' onClick='alert(this.value)' VALUE='20_Tree_Simple_View_HTML_test.t'>20_Tree_Simple_View_HTML_test.t</LI>
<LI STYLE='list-style: circle;'><INPUT TYPE='checkbox' NAME='tree_id' onClick='alert(this.value)' VALUE='30_Tree_Simple_View_DHTML_test.t'>30_Tree_Simple_View_DHTML_test.t</LI>
</UL></UL></UL><HR>
<DIV ALIGN="center" STYLE="font-family: sans-serif; font-size: 10pt; color: #666666;">
Copyright 2004 by Infinity Interactive, Inc.
<BR>
<A HREF="http://www.iinteractive.com">http://www.iinteractive.com</A></DIV>
</BODY>
</HTML>
	Global
`s`	Focus search bar
`?`	Bring up this help dialog
	GitHub
`g` `p`	Go to pull requests
`g` `i`	go to github issues (only if github is preferred repository)
	POD
`g` `a`	Go to author
`g` `c`	Go to changes
`g` `i`	Go to issues
`g` `d`	Go to dist
`g` `r`	Go to repository/SCM
`g` `s`	Go to source
`g` `b`	Go to file browse
	Search terms
module: (e.g. module:Plugin)
distribution: (e.g. distribution:Dancer auth)
author: (e.g. author:SONGMU Redis)
version: (e.g. version:1.00)