Tree for documentation : Documentation : GUI Components JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » GUI Components » Documentation »

 

Tree for documentation




<html>
<head>
<style type="text/css">
/**
 colors, backgrounds, borders, link indication 
**/

body {
  background: #fff;
  color: #000;
}

#main {
  border-top: 1px solid #999;
}

#banner {
  background-color: #fff
}

#banner {
  border-top: 1px solid #369;
}

#poweredby {
  display: block;
  float: left;
  height: 38px;
  width: 102px;
  background: url(../treeimages/poweredb.gif) no-repeat;
  border-bottom: none;
}

#ee, #cn {
  border: none;
}

#collabnet {
  background-color: #222; 
  color: #fff; 
  border-bottom: 1px solid #000;
}

#cnlogo {
  display: block;
  height: 15px;
  width: 150px;
  background: url(../treeimages/product_.gif) no-repeat;
  border-bottom: none;
  vertical-align: top;
}

/*Tab sets*/

.tabs td, .tabs th {
  background-image: url(../treeimages/nw_min00.gif);
  background-repeat: no-repeat;
}

.tabset {
  background-color: #eee;
  border-bottom: 1px solid #888;
  border-right: 1px solid #888;
}

.tabset .tabset {
  border: 1px solid #ccc;
  border-top: 5px solid #ddd;
}

.tabset .tabs th {  
  background-color: #ddd;
  border-left: 1px solid #eee;
}

.tabset .tabs td {
  border-left: 1px solid #eee;
}

.tabset .tabs td, .tabset  .tabs th {
  background-image: url(../treeimages/nw_min_e.gif);
  background-repeat: no-repeat;
}

/*Navigation*/

.navgroup dd li, #projecttools div, #communitytools div {
  background-image: url(../treeimages/strich00.gif);
  background-repeat: no-repeat;
  background-position: .5em .5em;
}

.navgroup dd li.header {
  background-image: none;
}

.navgroup {
  background: #efefef;
}

.navgroup dt {
  border-bottom: 1px solid #666;
  border-right: 1px solid #666;
  background: #ddd;
  color: #555;
}

.navgroup dd {
  border-right: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
}

#helptext dt {
  background-image: url(../treeimages/icon_hel.gif);
  background-repeat: no-repeat;
  background-position: 97%;
}

#helptext {
  background-color: #ffc;
}

#helptext dt {
  border-bottom: 1px solid #996;
  border-right: 1px solid #996;
  background-color: #cc9;
}

#helptext dd {
  border-bottom: 1px solid #cc9;
  border-right: 1px solid #cc9;
}

#mytools dt, #projecttools dt, #admintools dt, #communitytools dt {
  background-color: #ddd;
  border: none;
}

.navgroup dl dt {  
  background-color: #fff !important;
}

.navgroup dl dd {  
  border: none !important;
}

#mytools dd, #projecttools dd, #admintools dd, #communitytools dd {
  background-color: #fff;
  border-right: none;
  border-bottom: none;
  border-top: 1px solid #999;
}

#mytools, #projecttools, #admintools, #communitytools {
  background-color: #ddd;
  border-right: 1px solid #666;
  border-bottom: 1px solid #666;
}

/*Functnbars*/

.functnbar {
  background-image: url(../treeimages/nw_maj_r.gif);
  background-repeat: no-repeat;
}

.functnbar, .functnbar2 {
  background-color: #aaa;
}

.functnbar2 {
  background-image: url(../treeimages/sw_maj_r.gif);
  background-repeat: no-repeat;
  background-position: bottom left;
}

.functnbar3 {
  background-color: #ddd;
  background-repeat: no-repeat;
  background-image: url(../treeimages/sw_maj_r.gif);
  background-position: bottom left;
}

.functnbar4 {
  background-color: #888;
}

.tabset .functnbar {
  background-image: url(../treeimages/nw_maj_s.gif);
}

.tabset .functnbar2, .tabset .functnbar3 {
  background-image: url(../treeimages/sw_maj_s.gif);
}

/*Links*/

a:link, #navcol a:link, #navcol a:visited, #bodycol a:link, #tasknav a:link, .tasknav a:visited {  
  color: #03c;
}

a:visited, #helptext a:visited, #bodycol a:visited {
  color: #609;
} 

.tasknav a:visited {
        color: #03c !important;
}

a:link.selfref, a:visited.selfref {
  color: #555 !important;
  text-decoration: none;
}

a:active, a:hover, #navcol a:active, #navcol a:hover {
  color: #f30 !important;
}

.functnbar4 a, .functnbar4 a:link, .functnbar4 a:visited {
  color: #fff !important;
}

#navcol a, #breadcrumbs a {
  text-decoration: none;
}

/*Tables*/

.a td, .a, #rightcol div.siteinfo .a {
  background: #ddd;
}

.b td, .b, #rightcol div.siteinfo .b {
  background: #efefef;
}

table td.c, .c {
  background: #bbb;
}

th, .docs th {
  background-color: #bbb;
} 

.axial th {
  background-color: #ddd;
  color: black;
}

body .grid td {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  background-color: transparent;
}

.legend th, .bars th {
  background-color: #fff;
}

/*Messaging*/

.errormessage, .warningmessage, .donemessage, .infomessage {
  border-top: 5px solid #900;
  border-left: 1px solid #900;
  background-image: url(../treeimages/icon_err.gif);
  background-repeat: no-repeat;
  background-position: 5px 1.33em;
}

.warningmessage {
  background-image: url(../treeimages/icon_war.gif);
  border-color: #c60;
}

.donemessage {
  background-image: url(../treeimages/icon_suc.gif);
  border-color: #090;
}

.infomessage {
  background-image: url(../treeimages/icon_inf.gif);
  border-color: #069;
}

.errormark, .warningmark, .donemark, .infomark {
  background: url(icon_ers.gif) no-repeat;
}

.warningmark {
  background-image: url(icon_was.gif);
}

.donemark {
  background-image: url(icon_sud.gif);
}

.infomark {
  background-image: url(icon_ing.gif);
}

/*Widgets*/

.colbar {
  background: #eee;
  border-color: #999 #eee #eee #999;
  border-width: 1px;
  border-style: solid;
}

#breadcrumbs {
  border-top: 1px solid #fff;
  background-color: #ccc;
}

fieldset {
    border-color: #ccc #999 #999 #ccc;
    border-width: 1px;
    border-style: solid;
}

img {
  border: none;
}

.expandedwaste {
  background: url(expanded.gif) no-repeat;
  background-position: .2em .2em;
}

.collapsedwaste {
  background: url(collapse.gif) no-repeat;
  background-position: .2em .2em;
}

.filebrowse .expanded, .filebrowse-alt .expanded {
  background-image: url(expanded.gif);
  background-repeat: no-repeat;
  background-position: .2em .2em;
}

.filebrowse .collapsed, .filebrowse-alt .collapsed {
  background-image: url(collapse.gif);
  background-repeat: no-repeat;
  background-position: .2em .2em;
}

.filebrowse .leafnode, .filebrowse-alt .leafnode {
  background-image: url(icon_fol.gif);
  background-repeat: no-repeat;
}

.filebrowse .leaf, .filebrowse-alt .leaf {
  background-image: url(icon_doc.gif);
  background-repeat: no-repeat;
}

.sortup {
  background: url(icon_sor.gif) no-repeat;
}

.sortdown {
  background: url(icon_sos.gif) no-repeat;
}

a.collapsedwaste {
  background: url(collapse.gif) no-repeat;
  border: none;
}

a.expandedwaste, a.collapsedwaste, a.sortdown, a.sortup, a.expanded, a.collapsed, a.leaf, a.leafnode {
  border: none;
}

.docinfo {
  background: url(icon_dod.gif) no-repeat;
}

.dirinfo {
  background: url(icon_fom.gif) no-repeat;
}

.helplink {
  cursor: help;
}

#topmodule {
  background-color: #ddd;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #aaa;
}

#topmodule #projectname {
  border-right: 2px solid #aaa;
}

#topmodule #issueid {
  border-right: 1px solid #aaa;
}

#topmodule td {
  padding: 2px 8px;
}

.cvsdiff, .cvsblame {
  background-color: #ccc;
}

.cvsdiffadd {
  background-color: #afa;
}

.cvsdiffremove {
  background-color: #faa;
}

.cvsdiffchanges1, .cvsdiffchanges2 {
  background-color: #ff7;
}

#rightcol div.www, #rightcol div.help {
  border: 1px solid #ddd;
}

#rightcol div.siteinfo h2 {
  background-color: #bbb !important;
}

.band1 {
  color: #fff;
  background-color: #663;
}

.band2 {
  color: #fff;
  background-color: #66C;
}

.band3 {
  background-color: #C99;
}

.band4 {
  background-color: #CFF;
}

.band5 {
  color: #fff;
  background-color: #336;
}

.band6 {
  color: #fff;
  background-color: #966;
}

.band7 {
  background-color: #9CC;
}

.band8 {
  background-color: #FFC;
}

.band9 {
  color: #fff;
  background-color: #633;
}

.band10 {
  color: #fff;
  background-color: #699;
}

.band11 {
  background-color: #CC9;
}

.band12 {
  background-color: #CCF;
}

.band13 {
  color: #fff;
  background-color: #366;
}

.band14 {
  color: #fff;
  background-color: #996;
}

.band15 {
  background-color: #99C;
}

.band16 {
  background-color: #FCC;
}

.red {
  color:#f00;
  }

.green {
  color:#060;
}

.blue {
  color:#036;
}

.purple{
  color:#339;
}

  
/*Headings*/

h1 em {
  color: #777;
}

.h3 h3, .h4 h4 {
  background-color: #fff;
}

.tabset .h3 h3, .tabset .h4 h4 {
  background-color: #eee;
}

.h2 {
  border-left: 1px solid #333;
}

.h3, .h4 {
  border-top: 3px solid #666;
  border-left: none;
}

.h4 {
  border-top: 1px solid #666;
  border-left: none;
}

.h2 h2 {
  color: #fff;
  background-color: #333;
}

.h2 h2 a:link, .h2 h2 a:visited {
  color: #fff !important;
  text-decoration: underline;
}

/*Tabs*/

.tabs th {
  border-right: 1px solid #333;
  background-color: #eee;
  color: #fff;
  border-left: 1px solid #fff;
}

#toptabs th {
  background-color: #ddd;
}
  
.tabs td {
  background-color: #999;
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
}

.tabs th, .tabs th a:link, .tabs th a:visited {
  color: #555 !important;
}

.tabs td, .tabs td a:link, .tabs td a:visited {
  color: #fff !important;
}

#toptabs {
  background-color: #fff;
  border-bottom: 6px solid #ddd;
}

/*Calendar*/

.calendarweek {
  background-color: #ccc;
}

.calendarweeklabel {
  background-color: #aaa;
}

.calendardays, calendarperiod {
  border: 1px solid #999;
}

.calendardays table, .calendarperiod table {
  background-color: #ccc;
  }

.calendarmonths {
  background-color: #9bf;
  border-color: #ccf #69c #69c #ccf;
  border-width: 1px;
  border-style: solid;
}

.calendartoday {
  background-color: #ee9;
  border-color: #999 #777 #69c #aaa;
  border-width: 1px;
  border-style: solid;
}

.periodax, .periodbx, .currentperiod {
  border-bottom: 1px solid #eee;
}

.periodax {
  background-color: #9cc;
}

.periodbx {
  background-color: #ac9;
}

.currentperiod, #today {
  background-color: #ee9;
}

.othermonthday, .othermonthday a {
  background-color: #ddd;
  color: #888;
}

.calendarday {
  background-color: #fff;
}

/** 
 font and text properties, exclusive of link indication, alignment, text-indent 
**/

body, input, select {
  font-family: Verdana, Helvetica, Arial, sans-serif;
}

code, pre {
  font-family: 'Andale Mono', Courier, monospace;
}

body, pre, code {
  font-size: x-small;
  voice-family: ""}"";
  voice-family: inherit;
  font-size: small;
}

#bodycol, #bodycol table td, #bodycol table th {
  font-size: 95%;
  line-height:135%;
}

#bodycol table table td, #bodycol table table th {
  font-size: 100%;
}

/* a workaround for netscape 7 bug. has to come right after the previous line-height declaration */

input {
  line-height:100%;
}

h1 {
  font-weight: normal;
  font-size: medium;
  voice-family: ""}"";
  voice-family: inherit;
  font-size: large;
}

h2, h3, h4, h1 small, #rightcol h2 {
  font-size: x-small;
  voice-family: ""}"";
  voice-family: inherit;
  font-size: small;
}

.h4 h4, li.selection ul {
  font-weight: normal;
}

small, div#footer, #login, .tabs th, .tabs td, #bodycol .tabs th, #bodycol .tabs td,  #navcol, input, select, .paginate, .functnbar, .functnbar2, .functnbar3, .functnbar4, #breadcrumbs, .courtesylinks, .colbar, .tasknav, #sidebar, .legend, .bars, #rightcol div.www, #rightcol div.siteinfo { /*may need to add div#footer table, #rightcol div.help */
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: xx-small;
  voice-family: ""}"";
  voice-family: inherit;
  font-size: x-small;
}

.tabs td, .tabs th, dt, .tasknav .selfref, #login .username, .selection, .functnbar4 a, fieldset legend, .cumulative td, .rollupactivity td, #today {
  font-weight: bold;
}

h1 em {
  font-style: normal;
}

#banner h2 {
  font-size: 1.25em;
}

table {
  font-size: 1em;
}

del {
  text-decoration: line-through;
}

.tabs a {
  text-decoration: none;
}

caption {
  font-size: x-small;
}

caption em {
  font-weight: bold;
}

/** 
 box properties (exclusive of borders), positioning, alignments, list types, text-indent 
**/

#bodycol h1 {
  margin-top: .6em;
  margin-bottom: .5em;
}

p, ul, ol, dl, table.bars {
  margin-top: .67em;
  margin-bottom: .67em;
}

#bodycol {
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 12px;
  width: 100%;
  voice-family: ""}"";
  voice-family: inherit;
  width: auto;
}

html>body #bodycol {
  width: auto;
}

.h2 p, .h3 p, .h4 p, .h2 dt, .h3 dt, .h4 dt {
  margin-right: 7px;
  margin-left: 7px;
}

body {
  padding: 1em;
}

body.composite {
  margin: 0;
  padding: 0;
}

#login {
  float: right;
  text-align: right;
  white-space: nowrap;
}
  
#poweredby {
  margin: 0 8px 100px 0;
}

#collabnet {
  padding: 1px 7px;
}

#banner {
  padding: 8px;
}

/*Headings*/

h2 {
  margin-top: 0;
}

.h2 {
  margin-top: 1.67em;
}

h2, h3, h4 {
  margin-bottom: 0;
}

#banner h2 {
  margin: 0;
}

h2, h3, h4 {
  clear: both;
}

.h3 h3, .h4 h4 {
  margin: 0.75em;
  padding: 0 4px;
  position: relative;
  top: -.75em;
  display: inline;
  left: 0; 
}

div.h2 {
  margin: 1.5em 0 .67em;
}

.h2 {
  padding-left: 0.75em;
}

#banner h2 {
  padding: 5px  5px 0px 10px;  
}

.h3, .h4 {
  margin: 1.5em 0 .67em;
  padding: 0 0 .5em 0;
}

.h2 h2 {
    padding: 3px 3px 3px .65em;
  margin-right: 2px;
  margin-left: -0.75em;
  margin-bottom: 0.75em;
}

/*Widgets*/

form {
  margin: 0;
}

ol ol {
  list-style-type: lower-alpha;
}

ol ol ol {
  list-style-type: lower-roman;
}

.tasknav {
  margin-bottom: 1.33em;
}

#rightcol div.www {
  padding: 0 .5em;
}

div.a, div.b {
  margin: 2px 0;
  padding: 3px;
}

.functnbar, .functnbar2, .functnbar3, .functnbar4 {
  padding: 5px 1em;
  margin: .67em 2px;
}

.functnbar3 {
  padding: 3px 1em;
  margin-top: 0;
}

.functnbar4 {
  margin: 2px 2px 0px 2px;
    white-space: nowrap;
}

#topmodule {
  margin: -1px -2px 0 -4px  
}

#topmodule td {
  vertical-align: middle;
}

.right {
  text-align: right !important;
}

.center {
  text-align: center !important;
}

body .stb {
  margin-top: 1em;
  text-indent: 0;
}

body .mtb {
  margin-top: 2em;
  text-indent: 0;
}

.courtesylinks {
  margin-top: 1em;
  padding-top: 1em;
}

dd {
  margin-bottom: .67em;
}

.tier1 {
  margin-left: 0;
}

.tier2 {
  margin-left: 1.5em;
}

.tier3 {
  margin-left: 3em;
}

.tier4 {
  margin-left: 4.5em;
}

.tier5 {
  margin-left: 6em;
}

.tier6 {
  margin-left: 7.5em;
}

.tier7 {
  margin-left: 9em;
}

.tier8 {
  margin-left: 10.5em;
}

.tier9 {
  margin-left: 12em;
}

.tier10 {
  margin-left: 13.5em;
}

.filebrowse .expanded, .filebrowse .collapsed {
  padding-left: 18px;
}

.filebrowse .leafnode, .filebrowse .leaf {
  padding-left: 20px;
}

.filebrowse-alt .expanded, .filebrowse-alt .collapsed, .filebrowse-alt .leaf, .filebrowse-alt .leafnode, .expandedwaste, .collapsedwaste, .sortup, .sortdown {
  /* hide from macie5*/
  float: left;
  /* resume */
  display: inline-block;
  height: 15px;
  width: 18px;
  padding-left: 0 !important;
}

.filebrowse-alt .leaf, .filebrowse-alt .leafnode, .sortup, .sortdown {
  width: 20px;
}

.filebrowse ul, .filebrowse-alt ul {
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
}

.filebrowse ul ul, .filebrowse-alt ul ul {
  margin-left: 1.5em;
  margin-top: 0;
  padding-top: .67em;
}

.filebrowse li, .filebrowse-alt li {
  margin-bottom: .67em;
}

td.filebrowse h3 {
  margin-top: 0;
}

.alt, .hide {
  display: none;
}

fieldset {
  width: 100%;
  margin-bottom: 3px;
}

#breadcrumbs {
  padding: 2px 8px;
}

.fieldset {
  padding: .67em;
}

.colbar {
  margin: 2px;
  padding: 2px;
}

#footer { 
  padding-left: 8px 
}

.selectiongroup {
  padding-left: 1.5em;
}

.inputgroup2 {
  padding-left: 3em;
}

.inputgroup3 {
  white-space: nowrap;
}

.removedbox {
  float: left;
  margin-right: 10px; 
}

.floatright {
  float: right;
}

div.strut7 {
  width: 7em;
}

div.strut8 {
  width: 8em;
}

div.strut13 {
  width: 13em;
}

div.strut14 {
  width: 14em;
}

.strut15 {
  width: 15em;
}

.printbreak {/* this may need to be .app .printbreak */
  border-top: 2px #000 solid;
}
  
.printbreak {   /* this may need to be .app .printbreak */
  margin-top: 20px;
}

div.printbreak {
  page-break-after: always !important;
}
  
.messagechild {
  padding-left: 34px;
}

.functnbar4 a {
  padding-right: 0.5em;
  padding-left: 0.5em;
}

#rightcol div.siteinfo h2 {
  padding: 3px;
  margin-top: .5em;
}
  
/*Tab sets*/

#toptabs {
  margin: 0;
  padding-top: .67em;
  padding-left: 8px; 
}

.tabs {
  margin-top: .67em;
  margin-right: 2px;
  margin-left: 8px;
  padding-left: 8px;
}

.h2 .h3 .tabs , .h2 .h4 .tabs {
  margin-left: 1.75em;
}

#toptabs .tabs {
  margin-left: 0px;
}
  
#toptabs .tabs th, #toptabs .tabs td, .tabs td, .tabs th {
  padding: 3px 9px;
}

.tabset, .tabset .tabset {
  padding: .67em;
}

/*Navigation*/

.navgroup dd li.header {
  margin-top: 4px;
}

.navgroup li {
  margin-top: 7px;
  padding-left: 10px;
  list-style-type: none;
}

.navgroup, .navgroup dt, .navgroup dd, .navgroup ul, .navgroup li {
  margin: 0;
  padding: 0;
}

.navgroup li {
  display: block;
}

.navgroup {
    margin-top: 2px;
  margin-bottom: 6px;
}

.navgroup dd {
  padding: 4px 4px 4px 0;
}

.navgroup dt {
  padding: 4px;
}

.navgroup dl dt {
  padding: 0;
}

.navgroup dd li, .navgroup dd div {
  padding-bottom: .3em;
  padding-left: 1em;
}

.navgroup dd li li {
  margin-top: .3em;
  padding-bottom: 0;
}

#navcol, #navcol .strut {
  width: 15em;
}

#mytools dd, #projecttools dd, #admintools dd, #communitytools dd {
  padding-top: .33em;
}

#mytools, #projecttools, #admintools, #communitytools {
  padding: 0 6px 6px 6px;
  margin: -1px 0 6px -2px;
}

#mytools dt, #projecttools dt, #admintools dt, #communitytools dt {
  padding-left: 2px;
}

.navgroup dl dt {
  padding-left: 0 !important;
}

/*Tables*/

th, td {
  padding: 1px 2px 1px 2px;
}

th, td {
  text-align: left;
  vertical-align: top;
}

.axial th, .axial th .strut {
  text-align: right;
}

.axial td th {
  text-align: left;
}

.axial th, .axial th .strut {
  width: 12em;
}

.legend th, .bars th {
  text-align: right;
  padding-left: 1em;
}

.bars th {
  width: 12em;
}

caption {
  text-align: left;
}

/*Messaging*/

.errormessage, .warningmessage, .donemessage, .infomessage, .docinfo, .dirinfo {
  margin: .67em 0;
  padding: .33em 0 .67em 42px;
  min-height: 32px;
}

.errormark, .warningmark, .donemark, .infomark {
  padding-left: 20px;
  min-height: 15px;
}

/*Calendar*/

.calendarbody {
  margin: 17px;
}

.calendarweeklabel {
  text-align: center;
  padding-bottom: 7px;
}

.calendartoday, .calendarmonths {
  padding: 0 2px 0 3px;
}

.periodax, .periodbx, .currentperiod, .calendarday {
  text-align: right;
}

.periodax, .periodbx, .currentperiod, .othermonthday, .othermonthday a, .calendarday {
  padding-bottom: 7px;
}

/*Specific to Project Dashboard*/

#projectperformance {
  padding: 10px;
}
  
.effort {
  margin-left: 50px;
}

.effortbar1, .effortbar2 {
  position: absolute;
}

.dashboardchart {
    padding: 5px;
  margin: 2px 2px 0px 2px;
  text-align: center;
}

.statusnotstarted, .statusontrack, .statuscaution, .statusslip, .statusended {
  width: 50px;
  height: 10px;
  white-space: nowrap;
}

.indenttable th .strut {
  width: 16em;
}

.cumulative td, .subtotal {
  background-color: #bbb;
}

.rollupactivity td {
  background-color: #ddd;
}

.effortbar1 {
  background-color: #79f;
}

.effortbar2 {
  background-color: #aaa;
}

.dashboardchart {
  background-color: #ddd;
}

table td.statusnotstarted, .statusnotstarted {
  background: #cca;
}

table td.statusontrack, .statusontrack {
  background: #6c6;
}

table td.statuscaution, .statuscaution {
  background: #fc6;
}

table td.statusalert, .statusalert {
  background: #f30;
}

table td.statusended, .statusended {
  background: #ccc;
}

/*Specific to Help Docs*/

body.docs #toc li, body.docs #toc li li {
  background-image: url(strich00.gif);
  background-repeat: no-repeat;
  background-position: .5em .5em;
}

body.docs div#toc {
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: xx-small;
  voice-family: ""}"";
  voice-family: inherit;
  font-size: x-small;
}

body.docs div.docs {
  background-color: #fff;
  border-left: 1px solid #ddd;
  border-top: 1px solid #ddd;
}

body.docs {
  background: #eee url(help_log.gif) top right no-repeat !important;
}

body#legalnotices {
  background-image: none !important;
}

body.docs #toc {
  position: absolute;
  top: 61px;
  left: 0px;
  width: 120px;
  padding: 0 20px 0 0;
}

body.docs #toc ul, #toc ol {
  margin-left: 0;
  padding-left: 0;
}

body.docs #toc li {
  margin-top: 7px;
  padding-left: 10px;
  list-style-type: none;
}

body.docs div.docs {
  margin: 61px 0 0 150px;
  padding: 1em 2em 1em 1em !important;
}

.docs h3, .docs h4 {
  margin-bottom: .1em;
  padding-top: .3em;
}

body.docs {
  margin: 0;
  padding: 0;
}

.docs {
  line-height: 1.4;
}

.docs h1 {
  font-weight: bold;
}
.docs h2 {
  border-bottom: 2px solid #666;
  margin: 0;
  margin-top: 1em;
}

.docs h3 {
  border-bottom: 1px solid #666;
  margin: 0;
      margin-top: 1em;
}

.docs h4 {
  font-weight: bold;
  margin-top: 1em;
}

.doclayout th {
  background-color: #fff;
}

.doclayout th {
  width: 12em;
}

.docs dt { 
       margin-top: 20px;
}
body, ol, li, h2 { padding:0; margin: 0; }


ol#root {  padding-left: 5px; margin-top: 2px; margin-bottom: 1px; list-style: none;}
#root ol {  padding-left: 5px; margin-top: 2px; margin-bottom: 1px; list-style: none;}
#root li { margin-bottom: 1px; padding-left: 5px;  margin-top: 2px; font-size: x-small; }

.panel { border-bottom: 1px solid #999; margin-bottom: 2px; margin-top: 2px; background: #eee; }

#root ul { margin-bottom: 1px; margin-top: 2px; list-style-position: inside; } 

#root a { text-decoration: none; }


.folder { background: url(../treeimages/folder-c.gif)  no-repeat; float: left; height: 14px; width: 26px; padding-right: 3px }
.doc { background: url(../treeimages/file0000.gif) no-repeat; float: left; height: 14px; width: 12px; padding-right: 3px; margin-left: 20px;}


/*CollabNet branding*/

#banner, #toptabs {
  background-color: #663;
}

#banner {
  border-top: 1px solid #996;
}

#banner {
  padding: 1px;
  padding-left: 12px;
  padding-top: 15px;
}
  
.application th, .app th {
  background-color: #ddc;
}

.axial th {
  background-color: #ddc;
}

#toptabs td, #toptabs th {
  background-image: url(../treeimages/nw_min_6.gif);
}

#toptabs td {
  border-bottom: 1px solid #666;
  border-right: 1px solid #333;
  border-left: 1px solid #663;
}

#toptabs th {
        border-left: 1px solid #663;
}

.h2 h2 {
  background-color: #663;
}

.h2 {
  border-left: 1px solid #663;
}
  
.h3 {
  border-top: 6px solid #663;
}

h3 {
  color: #663;
}

#login, #login a {
  color: #fff;
}  

#login a:hover {
  color: #ccf !important;
}  

#toptabs td, .tabs th {
  background-color: #eed;
}

#toptabs th, .tabs td {
  background-color: #cc9;
}

#toptabs {
  border-bottom: 6px solid #cc9;
}

.tabset {
  background-color: #eed;
}

#toptabs .tabs th, #toptabs th a:link, #toptabs th a:visited, .tabs th, .tabs th a:link, .tabs th a:visited {
  color: #000 !important;
}

.tabs td, .tabs td a:link, .tabs td a:visited, #toptabs .tabs td, #toptabs td a:link, #toptabs td a:visited {
  color: #555 !important;
}

.tabset .b td, .tabset .a td {
  background-color: #ddd;
}

#navcol a:link, #navcol a:visited {
  color: #000;
}

a:active, a:hover, #leftcol a:active, #leftcol a:hover, #highlights a:active, #highlights a:hover {
  color: #036 !important;
}

#helptext dt {
  background-color: #dd9;
}

#highlights {
  background: #eed;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
}        

#highlights a:link, #highlights a:visited {
  color: black;
}

#highlights {
  margin: 0;
  padding: 6px;
}

#mainhighlights {
  margin-top: 1em
  }

#mainhighlights td div {
  margin: .5em
  }

#mainhighlights th {
  background: #dd9;
  }

#mainhighlights td {
  background: #ffc;
  }

#mainhighlights, #mainhighlights td, #mainhighlights th {
  font-size: xx-small;
  voice-family: ""}"";
  voice-family: inherit;
  font-size: x-small;
}

#mainhighlights td {
  border-right: 1px solid #cc9;
  border-bottom: 1px solid #cc9;
}

#mainhighlights th {
  border-right: 1px solid #996;
  border-bottom: 1px solid #996;
}

.navgroup dt {
  background: #dd9;
}

.navgroup {
  background: #eed;
  color: #000;
}

#mytools, #projecttools, #admintools, #communitytools, #mytools dt, #projecttools dt, #admintools dt, #communitytools dt {
  background-color: #dd9;
  color: #000 !important;
}

#searchbox dt, #helptext dt {
  color: #000 !important;
}

.a td { 
  background: #eee;
}

.b td { 
   background: #eee;
}


#rightcol div.siteinfo .a {
  background: #eee;
}

#rightcol div.siteinfo h2 {
  background-color: #663 !important;
  color: #fff !important;
}

#bodycol .application a:visited, #bodycol .app a:visited #bodycol .tasknav a:visited {
  color: purple !important;
}

.readyset h3, .readyset h4 {
  padding: 3px;
  padding-left: 5px;
  margin-right: 2px;
  margin-left: 2px;
  margin-bottom: 0;
  clear: both;
}


.readyset .axial th {
  text-align: right;
  white-space: nowrap;
}

dd { 
  margin-bottom: .67em; 
}

.tier1 { margin-left: 0; }
.tier2 { margin-left: 1.5em; }
.tier3 { margin-left: 3em; }
.tier4 { margin-left: 4.5em; }

.level1 { padding-left: 0; }
.level2 { padding-left: 1em; }
.level3 { padding-left: 2em; }
.level4 { padding-left: 3em; }


/* additions specific to ReadySET */

tr ul, tr ol, tr p { 
  margin-top: 0; 
}
tr ul { 
  margin-left: 0px; padding-left: 2em; 
}


.sticky {
  padding: 3px;
  margin-right: 2px;
  margin-bottom: 3px;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

.tip {
  padding: 3px;
  margin-right: 2px;
  margin-bottom: 3px;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

.todo {
  padding: 3px;
  margin-right: 2px;
  margin-bottom: 3px;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

#processimpact {
  border: 1px solid;
  padding: 3px;
  margin-right: 2px;
  margin-bottom: 2px;
}

.footnote {
  width: 80%;
  border-top: solid #aaa 1px;
  font-size: x-small;
  padding-top: 3px;
  margin-top: 3em;
}

.reusablefragment {
  padding: 6px;
  margin-top: 3em;
  margin-bottom: 3em;
}

.sample1, .sample2, .sample3, .sample4 {
  padding-right: 2px;
  margin-bottom: 4px;
}

.legal1 {
  border: 2px solid;
  padding: 3px;
  text-align: center !important;
  font-size: xx-large;
  font-weight: bold;
  display: none;
}

.linklist a { 
  display: block; 
}

.sub { 
  padding-left: 1em;  
}

:target {
  border: 2px solid red; 
}

.footnote {
  /* To hide footnotes, change "block" to "none". */
   display: block;
}


.sticky {
  background: #ffc;
  border-right-color: #aaa;
  border-bottom-color: #aaa;
}

.tip {
  background: #ffc;
  background-image: 'url(../treeimages/tip00000.gif)';
  background-repeat: no-repeat;
  background-position: top left;
  border-right-color: #aaa;
  border-bottom-color: #aaa;
  padding-left: 36px;
  min-width: 30px; min-height: 30px;
 /* filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='tip.png',sizingMethod='scale'); */
}


.todo {
  background: #ffc;
  background-image: 'url(../treeimages/todo0000.gif)';
  background-repeat: no-repeat;
  background-position: top left;
  border-right-color: #aaa;
  border-bottom-color: #aaa;
  padding-left: 36px;
   min-width: 30px; min-height: 30px;
 /* filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,src='todo.png',sizingMethod=scale); */
}



#processimpact {
  background: #eee;
  border-color: #aaa;
  background-image: 'url(../treeimages/gears000.gif)';
  background-repeat: no-repeat;
  background-position: top left;
  padding-left: 36px;
  min-width: 30px; min-height: 30px;
 /* filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gears.png',sizingMethod='scale'); */
}

.reusablefragment {
  background: #eee;
  border: 2px dashed;
}

.sample1 { border-right: 4px double #500; }
.sample2 { border-right: 4px double #050; }
.sample3 { border-right: 4px double #005; }
.sample4 { border-right: 4px double #505; }

a.def { 
  text-decoration: none; 
  border-bottom: dashed 1px blue;
  cursor: help;
}

.legal1 {
/* display: block !important; */
  background: #eee;
  border-color: #aaa;
}

#navcol div.body  {
  background-image: none;
}
#navcol div.body  {
  padding-bottom: .3em;
  padding-left: 0px;
  padding-right: 0px;
  margin-right: 0;
}
#navcol div.body  div {
  margin-top: .3em;
  padding-bottom: 0;
}
.navgroup .body {
  border-top: 1px solid #aaa;
}

.navgroup .body {
  padding: 0px;
  margin: 0em;
}

.navgroup .label {
  padding: 4px;
}


/* EyeBrowse message reader */
.tabset pre {
 background-color: #fff;
 border: 1px solid #ccc;
 padding-left: 4px;
 padding-top: 4px;
}
</style>


<script language=javascript>
function toggle(elm) {

var newDisplay = "none";
 elm.style.backgroundImage = 'url(treeimages/folder-c.gif)';
 var e = elm.nextSibling; 
 while (e != null) {
  if (e.tagName == "OL" || e.tagName == "ol") {
   if (e.style.display == "none") {
    newDisplay = "block";
    elm.style.backgroundImage = 'url(treeimages/folder-c.gif)';
   }
   break;
  }
  e = e.nextSibling;
 }
 while (e != null) {
  if (e.tagName == "OL" || e.tagName == "ol") e.style.display = newDisplay;
  e = e.nextSibling;
 }
}

function collapseAll(tags) {
 for (i = 0; i < tags.length; i++) {
  var lists = document.getElementsByTagName(tags[i]);
  for (var j = 0; j < lists.length; j++) 
   lists[j].style.display = "none";
   var e = document.getElementById("root");
   e.style.display = "block";
 }
}

function openBookMark() {
 var h = location.hash;
 if (h == "") h = "default";
 if (h == "#") h = "default";
 var ids = h.split(/[#.]/);
 for (i = 0; i < ids.length; i++) {
  if (ids[i] != "") toggle(document.getElementById(ids[i]));
 }
}

</script>

<script language=javascript>
var current=new Array();
var ready=new Array();
var num=1;

function out(obj)
{
var str="";
for(i in obj)str=str +i + "  ";
return str;
}

function getid(str)
{
s=str.slice(0,str.length-3);
return s;
}

function del(obj)
{
while(obj.hasChildNodes())
    {
    del(obj.childNodes[0]);
    }
obj.parentNode.removeChild(obj);
}

function getlen(obj)
{
j=0;
for(k in obj)
    {
    j=j+1;
    }
return j;
}


function obj_more(e)
{
var s=(e.target)?e.target:e.srcElement;

id=getid(s.id);

s=document.getElementById(id);
sa=document.getElementById(id+"an1");

if(ready[s.id]==false)
    {
    addbranch(s,current[s.id],false,false);
    ready[s.id]=true;
    }
    else 
    {
    toggle(sa);
    }
}




function init(parent,obj,isid,parid)
{
if(parent==null)parent=document.body;
if(isid)obj=document.getElementById(obj);

if(parid)parent=document.getElementById(parent);
div0=document.createElement("div");
div0.style.border="dashed 1px #000";
div0.style.padding="3px"; 
div0.style.margin=" 3px";
ol0=document.createElement("ol");
ol0.id="rootol";
li0=document.createElement("li");
li0.id="root";
ol0.appendChild(li0);
div0.appendChild(ol0);
parent.appendChild(div0);
addbranch("root",obj,true,false)
}




function addbranch(parent,obj,parent_isid,isid)
{
if(isid)obj=document.getElementById(obj);
if(parent_isid)parent=document.getElementById(parent);


ol0=document.createElement("ol");
ol0.style.border="thin solid";
for(i in obj)
    {
    li1=document.createElement("li");
    a1=document.createElement("a");
    a1.className="doc";
    proptext=document.createTextNode(i);
    try 
  {
  proptext1=document.createTextNode(obj[i]);
  }
  catch(ex0)
  {
  proptext1=document.createTextNode("error");
  }
    li1.appendChild(a1);
    a2=document.createElement("a");
    table1=document.createElement("table");
    tr1=document.createElement("tr");
    
    td2=document.createElement("td");
    td2.appendChild(proptext);
    td2.style.border="thin solid";
    td3=document.createElement("td");
    td3.appendChild(proptext1);
    td3.style.border="thin solid";

    
    try
  {
  if (getlen(obj[i])>0)
      {
      a1.className="folder";
      li1.id=num;
      ol0.id=num+"ol";
      try
    {
    current[num]=obj[i];
    ready[num]=false;
    td3.id=num+"td3";
    td2.id=num+"td2";
    a1.id=num+"an1";
    num=num+1;
    }
    catch(ex1)
    {
    };
      var success=(a2.addEventListener)?a2.addEventListener("click",obj_more,false):a2.attachEvent("onclick",obj_more);
          
  
      }
  }
  catch(ex2)
  {
  alert(ex2);
  }
    
    
    tr1.appendChild(td2);
    tr1.appendChild(td3);
    table1.appendChild(tr1);
    a2.appendChild(table1);
    li1.appendChild(a2);
    
    ol0.appendChild(li1);
    }
parent.appendChild(ol0);
}
</script>

<script type='text/javascript'>

</script>

    <title>Javascript Tree</title>
    <link href="mainstyle.css" rel="stylesheet" type="text/css"> 


<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
</head>

<body onLoad="init(null,window,false,false);">
<h2>BETA2</h2>
<script>
</script>

</body>
</html>


           
       

Download : Download nav_jstree.zip nav_jstree.zip


-

Leave a Comment / Note


Vérification Refresh
  
Enter code
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

Navioo GUI Components
» Documentation
Ajax Layer Ajax Layer
Data Type Data Type
Date Time Date Time
Development Development
Document Document
Event Event
Event onMethod Event onMethod
Form Control Form Control
GUI Components GUI Components
HTML HTML
Javascript CollectionsJavascript Collections
Javascript Objects Javascript Objects
Language Basics Language Basics
Node Operation Node Operation
Object Oriented Object Oriented
Page Components Page Components
Security Security
Style Layout Style Layout
Table Table
Utilities Utilities
Window Browser Window Browser