Tree View

From Wiki openElement
Jump to: navigation, search
Path: Elements / Navigation / Tree View

Contents

Description

Tree View allows users to display a hierarchical map of the website.
Example:

Element-Arborescence1.png

Add a Tree View Element

Drag-and-Drop the element Tree View from the elements menu anywhere on the page.
The configuration menu will open automatically.

Configuration

Main Configuration

Element-Arborescence2.png

  • Clicking on a row selects it
  • Double-clicking on a row allows users to modify it
  • Selecting a row, then pressing Delete on the keyboard, deletes it
  • Dragging and dropping the rows moves them in the tree hierarchy


(1): Adds a row as a child to the selected row
(2): Imports the list of pages for the website as children to the selected row
(3): Edit the selected row
(4): Deletes the selected row

Element-Arborescence3.png

  • Collapsed: Checked means that the "node" must be closed/collapsed when the page loads
  • Expanded: Checked means that the "node" must be open/expanded when the page loads.
  • Icon: Icon displayed to left of text
  • Title: Text displayed
  • Link: Page that title links to




Other Properties

  • Collapsed: All "nodes" must be closed/collapsed when the page loads
  • Unique: Only one "node" per tier/level can be open at the same time by visitors of the website. All others will be collapsed/closed automatically.

Design and Presests

To change its appearance, users must override the element's various style zones.

Style Zones (Expert)

Element-Arborescence4.png


WETreeview Folder.png Text With Node: No style by default
WETreeview File.png Text Without Node: No style by default
WETreeview Icon.png Icon: No style by default
WETreeview expandable-hitarea.png Expand Icon:
Default Values:

  • Width: 16px
  • Height: 16 px
  • Background Image: Image (16px/16px)
  • Background Repetition: Fixed


WETreeview lastExpandable-hitarea.png Last Expand Icon:
Default Values:

  • Width: 16px
  • Height: 16 px
  • Background Image: Image (16px/16px)
  • Background Repetition: Fixed


WETreeview collapsable-hitarea.png Collapse Icon:
Default Values:

  • Width: 16px
  • Height: 16 px
  • Background Image: Image (16px/16px)
  • Background Repetition: Fixed


WETreeview lastCollapsable-hitarea.png Last Collapse Icon:
Default Values:

  • Width: 16px
  • Height: 16 px
  • Background Image: Image (16px/16px)
  • Background Repetition: Fixed


WETreeview last.png L-Shaped Line:
Default Values:

  • Background Image: Image (16px/16px)
  • Background Repetition: Fixed
  • Backgournd Position: middle - left
  • Outer Left Margin: 18px
  • Outer Right Margin: 0px
  • Outer Top Margin: 0px
  • Outer Bottom Margin: 0px


WETreeview li.png T-Shaped Line:
Default Values:

  • Background Image: Image (16px/16px)
  • Background Repetition: Fixed
  • Background Position: middle - left
  • Outer Left Margin: 18px
  • Outer Right Margin: 0px
  • Outer Top Margin: 0px
  • Outer Bottom Margin: 0px


WETreeview ul.png Single Line:
Default Values:

  • Background Image: Image (16px/16px)
  • Background Repetition: Repeat Y
  • Background Position: middle - left
Personal tools
Namespaces

Variants
Views
Actions
openElement
Community
Toolbox