Added readme
This commit is contained in:
Ray
parent
38473c3861
commit
ac1f2ca509
36
README.md
Normal file
36
README.md
Normal file
@ -0,0 +1,36 @@
|
||||
# BSDialog5
|
||||
|
||||
> BSDialog5 is a JavaScript class for improving Bootstrap 5 modals. Add (and remove) modals to a page dynamically and load content. Bootstrap 5 is required. JQuery is supported but no longer required.
|
||||
|
||||
---
|
||||
|
||||
## Features
|
||||
|
||||
- Add and remove modals into a page (with or without jQuery)
|
||||
- Load modals from URL with the JavaScript Fetch API
|
||||
- Support stacking of multiple modals
|
||||
- Support prompt modals that returns a response
|
||||
- Support movable modals
|
||||
|
||||
---
|
||||
|
||||
## Releases & Builds
|
||||
|
||||
See [Releases](/Ray/bsdialog5/releases)
|
||||
|
||||
## Documentation
|
||||
|
||||
See [Usage](wiki/USAGE.md)
|
||||
|
||||
## Acknowledgements
|
||||
|
||||
This software uses a number of dependencies and assets from third-parties.
|
||||
These developers and artists deserve due credit for their work and for their commitment to sharing their work freely.
|
||||
Each product is released under their own particular license, for more information please visit their websites.
|
||||
|
||||
- [Bootstrap](https://getbootstrap.com/)
|
||||
- [jQuery](https://jquery.com/)
|
||||
|
||||
## License
|
||||
|
||||
This project is licensed under the least restrictive terms of its dependencies, viz. MIT License.
|
||||
192
wiki/USAGE.md
Normal file
192
wiki/USAGE.md
Normal file
@ -0,0 +1,192 @@
|
||||
# Usage: v0.2.0.013
|
||||
|
||||
This is the usage guide for [BSDialog5](/bootstrap-js-bsdialog5), version 0.2.0.013.
|
||||
|
||||
## Show(options)
|
||||
|
||||
Creates a Modal on the page (and loads the body from a URL, if applicable). An existing box will be reused if the ID already exists.
|
||||
|
||||
**Options**
|
||||
|
||||
```javascript
|
||||
{
|
||||
ID: "modalL1",
|
||||
Title: "Modal Title",
|
||||
Message: "Hello Momo!",
|
||||
URL: null,
|
||||
Size: "md",
|
||||
Colour: "secondary"
|
||||
}
|
||||
```
|
||||
|
||||
**Parameters**
|
||||
|
||||
| Parameter | Type | Description |
|
||||
|---|---|---|
|
||||
| ID | string | A unique identifier for the modal, so you can refer to multiple modals. |
|
||||
| Title | string | Label at the top of the modal |
|
||||
| Message | string | Text content of the modal |
|
||||
| URL | URL/string | URL to load into the modal body. Use `null` if loading isn't needed. |
|
||||
| Size | string | Size of the modal (`sm`, `md`, `lg`, `xl`). Default is medium (`md`). |
|
||||
| Colour | CSS/string | CSS style of the close button at the lower-right. Default is "secondary". |
|
||||
|
||||
**Examples**
|
||||
|
||||
```javascript
|
||||
BSDialog5.Show({
|
||||
ID: "modalL1",
|
||||
Title: "Modal Title",
|
||||
Message: "Hello Momo!",
|
||||
URL: null,
|
||||
Size: "md",
|
||||
Colour: "secondary"
|
||||
});
|
||||
```
|
||||
|
||||
## Prompt(options)
|
||||
|
||||
Opens a Prompt modal that returns a value from buttons. The default is "Yes", "No" and "Cancel" buttons. Closing the modal will return an empty string.
|
||||
|
||||
**Options**
|
||||
|
||||
```javascript
|
||||
{
|
||||
Title: "Modal Title",
|
||||
Message: "Are you sure want to wait for a response?",
|
||||
Size: "md",
|
||||
Buttons: [
|
||||
{ Label: "Yes", Value: "Yes", Colour: "primary" },
|
||||
{ Label: "No", Value: "No", Colour: "secondary" },
|
||||
{ Label: "Cancel", Value: "Cancel", Colour: "secondary" }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
**Parameters**
|
||||
|
||||
| Parameter | Type | Description |
|
||||
|---|---|---|
|
||||
| Title | string | Label at the top of the modal |
|
||||
| Message | string | Text content of the modal |
|
||||
| Size | string | Size of the modal (`sm`, `md`, `lg`, `xl`). Default is medium (`md`). |
|
||||
| Buttons | Array of buttons | An array of buttons with individual labels, return values and button styles. Default is Yes/No/Cancel. |
|
||||
|
||||
**Examples**
|
||||
|
||||
```javascript
|
||||
let response = await BSDialog5.Prompt({
|
||||
Title: "Modal Title",
|
||||
Message: "Are you sure want to wait for a response?",
|
||||
Size: "md",
|
||||
Buttons: [
|
||||
{ Label: "Yes", Value: "Yes", Colour: "primary" },
|
||||
{ Label: "No", Value: "No", Colour: "secondary" },
|
||||
{ Label: "Cancel", Value: "Cancel", Colour: "secondary" }
|
||||
]
|
||||
});
|
||||
|
||||
alert(response);
|
||||
```
|
||||
|
||||
## Update(options)
|
||||
|
||||
Change a modal's title, message body, size and/or footer after it is open.
|
||||
|
||||
**Options**
|
||||
|
||||
```javascript
|
||||
{
|
||||
ID: "modalR1",
|
||||
Title: "Modal Changed Title",
|
||||
Body: "Hello momo again!",
|
||||
BodyURL: null,
|
||||
Size: "lg",
|
||||
Footer: null
|
||||
}
|
||||
```
|
||||
|
||||
**Parameters**
|
||||
|
||||
| Parameter | Type | Description |
|
||||
|---|---|---|
|
||||
| ID | string | A unique identifier for the modal |
|
||||
| Title | string | Label at the top of the modal |
|
||||
| Body | string | Text content of the modal |
|
||||
| BodyURL | URL/string | URL to load into the modal body. Use `null` if loading isn't needed. |
|
||||
| Size | string | Size of the modal (`sm`, `md`, `lg`, `xl`). Default is medium (`md`). |
|
||||
| Footer | string | Content of the modal footer. |
|
||||
|
||||
**Examples**
|
||||
|
||||
```javascript
|
||||
BSDialog5.Update({
|
||||
ID: "modalR1",
|
||||
Title: "Modal Changed Title",
|
||||
Body: "Hello momo again!",
|
||||
BodyURL: null,
|
||||
Size: "lg",
|
||||
Footer: null
|
||||
});
|
||||
```
|
||||
|
||||
## Find(id)
|
||||
|
||||
Find Modal by its identifier.
|
||||
|
||||
**Parameters**
|
||||
|
||||
| Parameter | Type | Description |
|
||||
|---|---|---|
|
||||
| id | string | A unique identifier for the modal, so you can refer to multiple modals. |
|
||||
|
||||
**Examples**
|
||||
|
||||
```javascript
|
||||
BSDialog5.Find("exampleModal1");
|
||||
```
|
||||
|
||||
**Returns**
|
||||
|
||||
| Property | Type | Description |
|
||||
|---|---|---|
|
||||
| Title | array of elements | An array of Modal title elements, for the first modal only. |
|
||||
| Body | array of elements | An array of Modal body elements, for the first modal only. |
|
||||
| Footer | array of elements | An array of Modal footer elements, for the first modal only. |
|
||||
| Close | array of elements | An array of *close* elements, for the first modal only. |
|
||||
| Modal | array of elements | An array of Modal elements |
|
||||
|
||||
```javascript
|
||||
{
|
||||
Title: [],
|
||||
Body: [],
|
||||
Footer: [],
|
||||
Close: [],
|
||||
Modal: []
|
||||
}
|
||||
```
|
||||
|
||||
## Close(id)
|
||||
|
||||
Close the Modal by the box identifier.
|
||||
|
||||
**Parameters**
|
||||
|
||||
| Parameter | Type | Description |
|
||||
|---|---|---|
|
||||
| id | string | Unique identifier for the modal |
|
||||
|
||||
**Examples**
|
||||
|
||||
```javascript
|
||||
BSDialog5.Close("exampleModal1");
|
||||
```
|
||||
|
||||
## Clear()
|
||||
|
||||
Close all Modals on the page.
|
||||
|
||||
**Examples**
|
||||
|
||||
```javascript
|
||||
BSDialog5.Clear();
|
||||
```
|
||||
Loading…
Reference in New Issue
Block a user