Nightfire Webworker Archiv - JavaScript

[]

Operations

Background:

Static Resizable

Animation:

ON OFF

One branch at the time:

ON OFF

[Konfiguration des Scripts]

Hier sehen Sie ein simples Beispiel des tree menu. Um es zu erstellen, benötigen Sie lediglich eine Beschreibung der Baumstruktur und die Definition einiger Hauptattribute.

Die Baumstruktur ist ein komplexes assoziatives JavaScript- Array mit zwei Elementen im ersten Level:

format - Hier definieren wir ein Parameter- Set, welches das Aussehen des Baums beschreibt.

sub - (Abkürzung von 'SubNodes') Beschreibung der hierarchischen Struktur des Menubaums.

Beispiel:

var TREE_NODES={
format:{
//formatting parameters
},
sub:[
//tree structure
]
};

Definition der Baumstruktur

Ein Node (Knotenpunkt) eines Baums definiert ein assoziatives JavaScript- Array. Hauptattribute sind:

html - node caption. Dieser Code wird in eingebunden, wenn der Node- Code erzeugt wird.
url - node url. Wert des HREF Attributes der Links.
target - target frame. Wert des TARGET Attributes der links.
sub - Array mit "Kind"- Elementen.

Beispiele:

var TREE_NODES={
format:{
//formatting parameters
},
sub:[
//three nodes without children
{html:'Node 1', url:"http://unix.nightfire.ch/",
{html:'Node 2', url:"http://unix.nightfire.ch/",
{html:'Node 3', url:"http://unix.nightfire.ch/
]
};

var TREE_NODES={
format:{
//formatting parameters
},
sub:[
//Ein Node mit "Kindern" und zwei ohne
{html:'Node 1', url:"http://unix.nightfire.ch/",
sub:[
{html:'Sub Node 1', url:'#'},
{html:'Sub Node 2', url:'#'}
]
},
{html:'Node 2', url:"http://somewhere.com/'}"
{html:'Node 3', url:"http://somewhere.com/'}
]
};

Formatierung

Die Position des Menus auf der Seite ist absolut. Dafür muss die linke, obere Ecke in der format Sektion definiert werden.

Beispiel:
var TREE_NODES={
format:{
left: 100,
top: 100,
...

Diese Parameter müssen gesetzt werden.

Ebenso muss die Höhe und Breite des Menus bestimmt werden.

Beispiel:
var TREE_NODES={
format:{
...
height: 100,
width: 100,
...

Diese Parameter müssen gesetzt werden.

Wenn Sie einen statischen Hintergrund bevorzugen (Hintergrund bleibt beim öffnen/schliessen unverändert) fügen Sie das Attribut dont_resize_back hinzu und setzen es auf true.

Beispiel:
var TREE_NODES={
format:{
...
dont_resize_back: true,
...

Um den Animationseffekt zu aktivieren, verwenden Sie das animation Attribut.

Beispiel:
var TREE_NODES={
format:{
...
animation: true,
...

[]

Visit javascript tree menu home page for more datail.

Operations


Background:
Static	Resizable
Animation:
ON	OFF
One branch at the time:
ON	OFF