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