Fixed USAGE.md
This commit is contained in:
Ray
parent
117e1142a0
commit
34c366396c
419
wiki/USAGE.md
419
wiki/USAGE.md
@ -1,134 +1,299 @@
|
|||||||
JS: LiteRyzJS/Treeview
|
# Usage: v0.2.0.248
|
||||||
|
|
||||||
```md
|
This is the usage guide for [LiteRyzJS/Treeview](/literyzjs-treeview), version 0.2.0.248.
|
||||||
# JS: LiteRyzJS/Treeview
|
|
||||||
|
|
||||||
> Hi, I'm Ray
|
## Usage
|
||||||
|
|
||||||
## Navigation
|
### LiteRyzJS.Treeview(options)
|
||||||
|
|
||||||
- Home
|
Creates a treeview.
|
||||||
- Articles
|
|
||||||
- Photo Albums
|
|
||||||
- Releases
|
|
||||||
- Projects
|
|
||||||
|
|
||||||
## Social Links
|
#### Options
|
||||||
|
|
||||||
- Flickr
|
```javascript
|
||||||
- Git Repository
|
{
|
||||||
- Goodreads
|
ID: "#treeview1",
|
||||||
- Instagram
|
ShowCheckbox: true,
|
||||||
- LinkedIn
|
ShowSelection: true,
|
||||||
- Bluesky
|
ShowIcon: true,
|
||||||
|
EnableGuardian: false,
|
||||||
---
|
EnableCascade: true
|
||||||
|
}
|
||||||
## Project Overview
|
```
|
||||||
|
|
||||||
**Name:** `{{ Content.Name }}`
|
#### Parameters
|
||||||
|
|
||||||
**Description:** `{{ Content.Description }}`
|
| Parameter | Type | Description |
|
||||||
|
|-----------|------|-------------|
|
||||||
**Current Version:** `{{ Content.CurrentVersion }}`
|
| ID | string | The container element for the treeview |
|
||||||
|
| ShowCheckbox | bool | Show checkboxes in treeview |
|
||||||
### Call To Action
|
| ShowSelection | bool | Show selection (highlighting) |
|
||||||
|
| ShowIcon | bool | Show node icon |
|
||||||
The page dynamically renders up to four CTA buttons such as:
|
| EnableGuardian | bool | If true, the parent node is checked if any of its child nodes are checked. |
|
||||||
|
| EnableCascade | bool | If true, the parent node is checked if all of its child nodes are checked. |
|
||||||
- Download
|
|
||||||
- Documentation
|
#### Examples
|
||||||
- Git Repository
|
|
||||||
- Other project links
|
```javascript
|
||||||
|
var treeview1 = new LiteRyzJS.Treeview({
|
||||||
---
|
ID: "#treeview1",
|
||||||
|
ShowCheckbox: true,
|
||||||
## Features
|
ShowSelection: true,
|
||||||
|
ShowIcon: true,
|
||||||
The following section is dynamically populated from `Content.Features`:
|
EnableGuardian: false,
|
||||||
|
EnableCascade: true
|
||||||
- `{{ item }}`
|
});
|
||||||
- `{{ item }}`
|
```
|
||||||
- `{{ item }}`
|
|
||||||
|
### AddItem(options)
|
||||||
---
|
|
||||||
|
Add a node to the treeview
|
||||||
## Releases & Builds
|
|
||||||
|
#### Options
|
||||||
This section is dynamically generated from `Content.History`.
|
|
||||||
|
```javascript
|
||||||
For each release:
|
{
|
||||||
|
ID: null,
|
||||||
### `{{ item.Name }}` (`{{ item.Date }}`)
|
ParentID: null,
|
||||||
|
Name: "",
|
||||||
#### Changelog
|
Hint: "",
|
||||||
|
Value: "",
|
||||||
- `{{ item2 }}`
|
Icon: "folder",
|
||||||
- `{{ item2 }}`
|
Checked: false,
|
||||||
|
Tag: null
|
||||||
#### Downloads
|
}
|
||||||
|
```
|
||||||
| Download | MD5 |
|
|
||||||
|---|---|
|
#### Parameters
|
||||||
| `{{ item2.Name }}` | `{{ item2.MD5 }}` |
|
|
||||||
|
| Parameter | Type | Description |
|
||||||
#### Documentation
|
|-----------|------|-------------|
|
||||||
|
| ID | string | The identifier for this node |
|
||||||
- `{{ item2.Name }}`
|
| ParentID | string | The identifier for the parent node |
|
||||||
|
| Name | string | Label of the node |
|
||||||
---
|
| Hint | string | Hint for the node |
|
||||||
|
| Value | string | Value returned, if checkboxes are enabled and node is checked |
|
||||||
## License & Warranty
|
| Icon | string | Icon of the node, default is "folder" |
|
||||||
|
| Checked | string | Is folder is checked |
|
||||||
This section is dynamically populated from `Content.License`.
|
| Tag | string | Additional object for this node |
|
||||||
|
|
||||||
---
|
#### Examples
|
||||||
|
|
||||||
## Acknowledgements
|
```javascript
|
||||||
|
treeview1.AddItem({
|
||||||
This section is dynamically populated from:
|
ID: "F1",
|
||||||
|
ParentID: null,
|
||||||
- `Content.Acknowledgements`
|
Name: "Folder 1",
|
||||||
- `Content.Attribution`
|
Hint: "Folder 1",
|
||||||
|
Value: "F1",
|
||||||
Example attribution list:
|
Icon: "folder",
|
||||||
|
Checked: false,
|
||||||
- `{{ item.Name }}`
|
Tag: null
|
||||||
|
});
|
||||||
---
|
```
|
||||||
|
|
||||||
## Screenshots
|
### Remove(id)
|
||||||
|
|
||||||
Screenshots are dynamically rendered from `Content.Screenshots`.
|
Remove node from treeview by identifier
|
||||||
|
|
||||||
---
|
#### Parameters
|
||||||
|
|
||||||
## Code Repository
|
| Parameter | Type | Description |
|
||||||
|
|-----------|------|-------------|
|
||||||
Repository buttons are rendered from `Content.Repositories`.
|
| ID | string | The identifier for the node |
|
||||||
|
|
||||||
---
|
#### Examples
|
||||||
|
|
||||||
## Footer
|
```javascript
|
||||||
|
treeview1.Remove("F1");
|
||||||
### Sections
|
```
|
||||||
|
|
||||||
- Home
|
### Clear()
|
||||||
- Articles
|
|
||||||
- Photo Albums
|
Clear all treeview nodes
|
||||||
- Releases
|
|
||||||
- Projects
|
#### Examples
|
||||||
|
|
||||||
### Social
|
```javascript
|
||||||
|
treeview1.Clear();
|
||||||
- Flickr
|
```
|
||||||
- Git Repository
|
|
||||||
- Goodreads
|
### Find(id)
|
||||||
- Instagram
|
|
||||||
- LinkedIn
|
Find a treeview node by its identifier
|
||||||
- Bluesky
|
|
||||||
|
#### Parameters
|
||||||
---
|
|
||||||
|
| Parameter | Type | Description |
|
||||||
Copyright © 2014–2026 Ray Lam. All Rights Reserved.
|
|-----------|------|-------------|
|
||||||
|
| ID | string | The identifier for this node |
|
||||||
|
|
||||||
|
#### Result
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
{
|
||||||
|
ID: "",
|
||||||
|
Node: null,
|
||||||
|
Container: null,
|
||||||
|
Label: "",
|
||||||
|
Value: "",
|
||||||
|
Name: "",
|
||||||
|
Hint: "",
|
||||||
|
ParentID: null,
|
||||||
|
Checked: false,
|
||||||
|
Highlighted: false,
|
||||||
|
Tag: null
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
| Property | Type | Description |
|
||||||
|
|----------|------|-------------|
|
||||||
|
| ID | string | The identifier for this node |
|
||||||
|
| Node | Element | The [li] element of the node |
|
||||||
|
| Container | string | The container [div.li] element of the label component of the node |
|
||||||
|
| Label | string | The label [span] element of the node |
|
||||||
|
| Value | string | The checkbox value of the node |
|
||||||
|
| Name | string | The text label of the node |
|
||||||
|
| Hint | string | The text hint of the node |
|
||||||
|
| ParentID | string | The identifier for the parent node |
|
||||||
|
| Highlighted | bool | True, if highlighted. |
|
||||||
|
| Checked | bool | True, if checked. |
|
||||||
|
| Tag | object | User defined object on this node |
|
||||||
|
|
||||||
|
#### Examples
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let result = treeview1.Find("F1");
|
||||||
|
```
|
||||||
|
|
||||||
|
### FindByName(name)
|
||||||
|
|
||||||
|
Find a treeview node by its name
|
||||||
|
|
||||||
|
#### Parameters
|
||||||
|
|
||||||
|
| Parameter | Type | Description |
|
||||||
|
|-----------|------|-------------|
|
||||||
|
| Name | string | The name of this node |
|
||||||
|
|
||||||
|
#### Result
|
||||||
|
|
||||||
|
Returned an array of node results, see **Find**.
|
||||||
|
|
||||||
|
#### Examples
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let result = treeview1.FindByName("F1");
|
||||||
|
```
|
||||||
|
|
||||||
|
### FindByValue(value)
|
||||||
|
|
||||||
|
Find a treeview node by its value
|
||||||
|
|
||||||
|
#### Parameters
|
||||||
|
|
||||||
|
| Parameter | Type | Description |
|
||||||
|
|-----------|------|-------------|
|
||||||
|
| Value | string | The value of this node |
|
||||||
|
|
||||||
|
#### Result
|
||||||
|
|
||||||
|
Returned an array of node results, see **Find**.
|
||||||
|
|
||||||
|
#### Examples
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let result = treeview1.FindByValue("F1");
|
||||||
|
```
|
||||||
|
|
||||||
|
### GetAllNodes()
|
||||||
|
|
||||||
|
Get an array of all nodes
|
||||||
|
|
||||||
|
#### Result
|
||||||
|
|
||||||
|
Returned an array of node results, see **Find** for details.
|
||||||
|
|
||||||
|
#### Examples
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let result = treeview1.GetAllNodes();
|
||||||
|
```
|
||||||
|
|
||||||
|
### GetCheckedNodes()
|
||||||
|
|
||||||
|
Get an array of all checked nodes
|
||||||
|
|
||||||
|
#### Result
|
||||||
|
|
||||||
|
Returned an array of node results, see **Find** for details.
|
||||||
|
|
||||||
|
#### Examples
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let result = treeview1.GetCheckedNodes();
|
||||||
|
```
|
||||||
|
|
||||||
|
### GetCheckedValues()
|
||||||
|
|
||||||
|
Get an array of values from all checked nodes
|
||||||
|
|
||||||
|
#### Result
|
||||||
|
|
||||||
|
Returned an array of values.
|
||||||
|
|
||||||
|
#### Examples
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let result = treeview1.GetCheckedValues();
|
||||||
|
```
|
||||||
|
|
||||||
|
### GetSelectedNode()
|
||||||
|
|
||||||
|
Get the selected node
|
||||||
|
|
||||||
|
#### Result
|
||||||
|
|
||||||
|
Returned the selected node result, see **Find** for details.
|
||||||
|
|
||||||
|
#### Examples
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let node = treeview1.GetSelectedNode();
|
||||||
|
```
|
||||||
|
|
||||||
|
### ExpandAll()
|
||||||
|
|
||||||
|
Expand all nodes
|
||||||
|
|
||||||
|
#### Examples
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
treeview1.ExpandAll();
|
||||||
|
```
|
||||||
|
|
||||||
|
### CollapseAll()
|
||||||
|
|
||||||
|
Collapse all nodes
|
||||||
|
|
||||||
|
#### Examples
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
treeview1.CollapseAll();
|
||||||
|
```
|
||||||
|
|
||||||
|
### CheckAll(value)
|
||||||
|
|
||||||
|
Check or uncheck all nodes
|
||||||
|
|
||||||
|
#### Parameters
|
||||||
|
|
||||||
|
| Parameter | Type | Description |
|
||||||
|
|-----------|------|-------------|
|
||||||
|
| Value | bool | Check or uncheck all nodes |
|
||||||
|
|
||||||
|
#### Examples
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
treeview1.CheckAll(true);
|
||||||
```
|
```
|
||||||
Loading…
Reference in New Issue
Block a user