further docs changes
- removed CardRefresh from menu while not exist - removed data-accordion="true" from sidebar nav - updated assets - created javascript/layout - finished javascript/push-menu - created javascript/treeview - created javascript/widget - finished javascript/control-sidebar - created javascript/direct-chat - created javascript/todo-list
This commit is contained in:
REJack
parent
fe693889dd
commit
f61e3a04d6
|
|
@ -64,8 +64,8 @@ navigation:
|
|||
url: javascript/treeview.html
|
||||
- title: Widget
|
||||
url: javascript/widget.html
|
||||
- title: CardRefresh
|
||||
url: javascript/card-refresh.html
|
||||
# - title: CardRefresh
|
||||
# url: javascript/card-refresh.html
|
||||
- title: Control Sidebar
|
||||
url: javascript/control-sidebar.html
|
||||
- title: Direct Chat
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
</a>
|
||||
<div class="sidebar">
|
||||
<nav class="mt-2">
|
||||
<ul class="nav nav-pills nav-sidebar nav-child-indent flex-column" data-widget="treeview" role="menu" data-accordion="true">
|
||||
<ul class="nav nav-pills nav-sidebar nav-child-indent flex-column" data-widget="treeview" role="menu">
|
||||
{% for item in site.navigation %}
|
||||
{% assign subitem_active = 'false' %}
|
||||
{% for subitem in item.subitems %}
|
||||
|
|
|
|||
|
|
@ -1051,7 +1051,7 @@
|
|||
$(this).data(DATA_KEY, typeof config === 'string' ? data : config);
|
||||
}
|
||||
|
||||
if (typeof config === 'string' && config.match(/remove|toggle/)) {
|
||||
if (typeof config === 'string' && config.match(/remove|toggle|toggleMaximize/)) {
|
||||
data[config]();
|
||||
} else if (typeof config === 'object') {
|
||||
data._init($(this));
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
2
docs/assets/js/adminlte.min.js
vendored
2
docs/assets/js/adminlte.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -38,5 +38,5 @@ The following code should be placed within the `.wrapper` div. I prefer to place
|
|||
Once you create the sidebar, you will need a toggle button to open/close it. By adding the attribute data-toggle="control-sidebar" to any button, it will automatically act as the toggle button.
|
||||
|
||||
```html
|
||||
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#">Toggle Control Sidebar</a>
|
||||
<a class="nav-link" data-widget="control-sidebar" href="#">Toggle Control Sidebar</a>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -2,3 +2,59 @@
|
|||
layout: page
|
||||
title: Control Sidebar Plugin
|
||||
---
|
||||
|
||||
The control sidebar component is part of AdminLTE's layout as the right sidebar.
|
||||
|
||||
##### Usage
|
||||
This plugin can be activated as a jQuery plugin or using the data api. To activate the plugin, you must first add the HTML markup to your layout, then create the toggle button as shown below.
|
||||
|
||||
###### HTML Markup
|
||||
{: .text-bold }
|
||||
```html
|
||||
<!-- Control Sidebar -->
|
||||
<aside class="control-sidebar control-sidebar-dark">
|
||||
<!-- Control sidebar content goes here -->
|
||||
</aside>
|
||||
<!-- /.control-sidebar -->
|
||||
```
|
||||
|
||||
###### Data api
|
||||
{: .text-bold }
|
||||
Add `data-widget="control-sidebar"` to any button or a element to activate the plugin.
|
||||
|
||||
```html
|
||||
<a href="#" data-widget="control-sidebar">Toggle Control Sidebar</a>
|
||||
```
|
||||
|
||||
###### jQuery
|
||||
{: .text-bold }
|
||||
Just like all other AdminLTE plugins, you can also activate the toggle button using jQuery by running the following example.
|
||||
```js
|
||||
$("#my-toggle-button").ControlSidebar('toggle');
|
||||
```
|
||||
|
||||
##### Options
|
||||
|
||||
|---
|
||||
| Name | Type | Default | Description
|
||||
|-|-|-|-
|
||||
|slide | Boolean | TRUE | Whether the sidebar should slide over the content or push the content to make space for itself.
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
> ##### Tip!
|
||||
> You can use any option via the data-attributes like this to enable auto collapse sidebar on 768 pixels width.
|
||||
> ```html
|
||||
> <a href="#" data-widget="control-sidebar" data-slide="false">Toggle Control Sidebar</a>
|
||||
> ```
|
||||
{: .quote-info}
|
||||
|
||||
##### Events
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Event Type | Description
|
||||
|-|-
|
||||
| |
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$('#toggle-button').on('shown.lte.control.sidebar', handleExpandedEvent)`
|
||||
|
|
|
|||
35
docs/javascript/direct-chat.md
Normal file
35
docs/javascript/direct-chat.md
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
---
|
||||
layout: page
|
||||
title: Direct Chat Plugin
|
||||
---
|
||||
|
||||
The direct chat plugin provides simple functionality to the direct chat component.
|
||||
|
||||
##### Usage
|
||||
This plugin can be activated as a jQuery plugin or using the data api.
|
||||
|
||||
###### Data API
|
||||
{: .text-bold }
|
||||
Add `data-widget="chat-pane-toggle"` to a button to activate the plugin.
|
||||
```html
|
||||
<button class="btn btn-primary" data-widget="chat-pane-toggle">Toggle Chat Pane</button>
|
||||
```
|
||||
|
||||
###### jQuery
|
||||
{: .text-bold }
|
||||
The jQuery API provides more customizable options that allows the developer to handle checking and unchecking the todo list checkbox events.
|
||||
```js
|
||||
$('#chat-pane-toggle').DirectChat('toggle')
|
||||
```
|
||||
|
||||
|
||||
##### Methods
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Method | Description
|
||||
|-|-
|
||||
|toggle | Toggles the state of the chat pane between hidden and visible.
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$('#chat-pane-toggle').DirectChat('toggle')`
|
||||
38
docs/javascript/layout.md
Normal file
38
docs/javascript/layout.md
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
---
|
||||
layout: page
|
||||
title: Layout Plugin
|
||||
---
|
||||
|
||||
The layout plugin manages the layout in case of css failure to reset the height or width of the content.
|
||||
|
||||
##### Usage
|
||||
This plugin is activated automatically upon window load.
|
||||
|
||||
##### Options
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Name | Type | Default | Description
|
||||
|-|-|-|-
|
||||
|scrollbarTheme | Boolean | `os-theme-light` | Scrollbar Theme used while SideBar Fixed
|
||||
|scrollbarAutoHide | Boolean | `l` | Scrollbar auto-hide trigger
|
||||
|---
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
> ##### Tip!
|
||||
> You can use any option via the data-attributes like this.
|
||||
> ```html
|
||||
> <body data-scrollbar-auto-hide="n">...</body>
|
||||
> ```
|
||||
{: .quote-info}
|
||||
|
||||
##### Methods
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Method | Description
|
||||
|-|-
|
||||
|fixLayoutHeight | Fix the content / control sidebar height and activates OverlayScrollbars for sidebar / control sidebar
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$('body').Layout('fixLayoutHeight')`
|
||||
|
|
@ -2,3 +2,63 @@
|
|||
layout: page
|
||||
title: Push Menu Plugin
|
||||
---
|
||||
|
||||
The PushMenu plugin controls the toggle button of the main sidebar.
|
||||
|
||||
##### Usage
|
||||
This plugin can be activated as a jQuery plugin or using the data api.
|
||||
|
||||
###### Data API
|
||||
{: .text-bold }
|
||||
Add `data-widget="pushmenu"` to a button to activate the plugin.
|
||||
```html
|
||||
<button class="btn btn-primary" data-widget="pushmenu">Toggle Sidebar</button>
|
||||
```
|
||||
|
||||
###### jQuery
|
||||
{: .text-bold }
|
||||
```js
|
||||
$('.sidebar-toggle-btn').PushMenu(options)
|
||||
```
|
||||
|
||||
##### Options
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Name | Type | Default | Description
|
||||
|-|-|-|-
|
||||
|autoCollapseSize | Boolean/Number | FALSE | Screen width in pixels to trigger auto collapse sidebar
|
||||
|screenCollapseSize | Number | 768 | Screen width in pixels for small screens.
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
> ##### Tip!
|
||||
> You can use any option via the data-attributes like this to enable auto collapse sidebar on 768 pixels width.
|
||||
> ```html
|
||||
> <button class="btn btn-primary" data-widget="pushmenu" data-auto-collapse-size="768">Toggle Sidebar</button>
|
||||
> ```
|
||||
{: .quote-info}
|
||||
|
||||
|
||||
##### Events
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Event Type | Description
|
||||
|-|-
|
||||
|collapsed.lte.pushmenu | Fired when the sidebar collapsed.
|
||||
|shown.lte.pushmenu | Fired when the sidebar shown.
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$(document).on('shown.lte.pushmenu', handleExpandedEvent)`
|
||||
|
||||
|
||||
##### Methods
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Method | Description
|
||||
|-|-
|
||||
|toggle | Toggles the state of the menu between expanded and collapsed.
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$('[data-widget="pushmenu"]').PushMenu('toggle')`
|
||||
|
|
|
|||
39
docs/javascript/todo-list.md
Normal file
39
docs/javascript/todo-list.md
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
---
|
||||
layout: page
|
||||
title: Todo List Plugin
|
||||
---
|
||||
|
||||
The todo list plugin provides simple functionality to the todo list component.
|
||||
|
||||
##### Usage
|
||||
This plugin can be activated as a jQuery plugin or using the data api.
|
||||
|
||||
###### Data API
|
||||
{: .text-bold }
|
||||
Activate the plugin by adding `data-widget="todo-list"` to the ul element. If you need to provide onCheck and onUncheck methods, please use the jQuery API.
|
||||
|
||||
###### jQuery
|
||||
{: .text-bold }
|
||||
The jQuery API provides more customizable options that allows the developer to handle checking and unchecking the todo list checkbox events.
|
||||
```js
|
||||
$('#my-todo-list').TodoList({
|
||||
onCheck: function(checkbox) {
|
||||
// Do something when the checkbox is checked
|
||||
},
|
||||
onUnCheck: function(checkbox) {
|
||||
// Do something after the checkbox has been unchecked
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
##### Options
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Name | Type | Default | Description
|
||||
|-|-|-|-
|
||||
|onCheck | Function | Anonymous Function | Handle checkbox onCheck event. The checkbox is passed as parameter to the function.
|
||||
|onUnCheck | Function | Anonymous Function | Handle checkbox onUnCheck event. The checkbox is passed as parameter to the function.
|
||||
|---
|
||||
{: .table .table-bordered .bg-light}
|
||||
64
docs/javascript/treeview.md
Normal file
64
docs/javascript/treeview.md
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
---
|
||||
layout: page
|
||||
title: Treeview Plugin
|
||||
---
|
||||
|
||||
The Treeview plugin converts a nested list into a tree view where sub menus can be expanded.
|
||||
|
||||
##### Usage
|
||||
This plugin can be activated as a jQuery plugin or using the data api.
|
||||
|
||||
###### Data API
|
||||
{: .text-bold }
|
||||
|
||||
Add `data-widget="treeview"` to any `ul` or `ol` element to activate the plugin.
|
||||
|
||||
```html
|
||||
<ul data-widget="treeview">
|
||||
<li><a href="#">One Level</a></li>
|
||||
<li class="treeview">
|
||||
<a href="#">Multilevel</a>
|
||||
<ul class="treeview-menu">
|
||||
<li><a href="#">Level 2</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
###### jQuery
|
||||
{: .text-bold }
|
||||
```js
|
||||
$('ul').Treeview(options)
|
||||
```
|
||||
|
||||
##### Options
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Name | Type | Default | Description
|
||||
|-|-|-|-
|
||||
|animationSpeed | Number | 300 | Speed of slide down/up animation in milliseconds.
|
||||
|accordion | Boolean | TRUE | Whether to collapse the open menu when expanding another.
|
||||
|trigger | String | `[data-widget="treeview"] .nav-link` | Selector of the element that should respond to the click and result in expanding or collapsing it sibling sub menu.
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
> ##### Tip!
|
||||
> You can use any option via the data-attributes like this.
|
||||
> ```html
|
||||
> <ul data-widget="treeview" data-accordion="false">...</ul>
|
||||
> ```
|
||||
{: .quote-info}
|
||||
|
||||
##### Events
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Event Type | Description
|
||||
|-|-
|
||||
|expanded.lte.treeview | Triggered after a sub menu expands.
|
||||
|collapsed.lte.treeview | Triggered after a sub menu collapses.
|
||||
|load.lte.treeview | Triggered after the plugin initialized via data api.
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$('ul').on('expanded.lte.treeview', handleExpandedEvent)`
|
||||
|
||||
192
docs/javascript/widget.md
Normal file
192
docs/javascript/widget.md
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
---
|
||||
layout: page
|
||||
title: Widget Plugin
|
||||
---
|
||||
|
||||
The widget plugin provides the functionality for collapsing, expanding and removing a card.
|
||||
|
||||
##### Usage
|
||||
This plugin can be activated as a jQuery plugin or using the data api.
|
||||
|
||||
###### Data API
|
||||
{: .text-bold }
|
||||
|
||||
This plugin provides two data-api attributes. Any element using one of the following attributes should be placed within the `.card-tools` div, which is usually in the card header. For more information about the [card HTML structure]({% link components/cards.md %}), visit the card component documentation
|
||||
|
||||
`data-widget="collapse"`
|
||||
<br />
|
||||
This attribute, when attached to a button, allows the box to be collapsed/expanded when clicked.
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Collapsible Card Example</h3>
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-8" markdown="1">
|
||||
```html
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Collapsible Card Example</h3>
|
||||
<div class="card-tools">
|
||||
<!-- Collapse Button -->
|
||||
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i></button>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
```
|
||||
{: .max-height-300}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
`data-widget="remove"`
|
||||
<br />
|
||||
This attribute, when attached to a button, allows the box to be removed when clicked.
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Removable Card Example</h3>
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-8" markdown="1">
|
||||
```html
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Removable Card Example</h3>
|
||||
<div class="card-tools">
|
||||
<!-- Remove Button -->
|
||||
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i></button>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
```
|
||||
{: .max-height-300}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
`data-widget="maximize"`
|
||||
<br />
|
||||
This attribute, when attached to a button, allows the box to be maximize/minimize when clicked.
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Maximizable Card Example</h3>
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-widget="maximize"><i class="fas fa-expand"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-8" markdown="1">
|
||||
```html
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Maximizable Card Example</h3>
|
||||
<div class="card-tools">
|
||||
<!-- Maximize Button -->
|
||||
<button type="button" class="btn btn-tool" data-widget="maximize"><i class="fas fa-expand"></i></button>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
```
|
||||
{: .max-height-300}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
###### jQuery
|
||||
{: .text-bold }
|
||||
To activate any button using jQuery, you must provide the removeTrigger and collapseTrigger options. Otherwise, the plugin will assume the default `data-widget` selectors.
|
||||
|
||||
```js
|
||||
$('#my-card').Widget(options)
|
||||
```
|
||||
|
||||
##### Options
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Name | Type | Default | Description
|
||||
|-|-|-|-
|
||||
|animationSpeed | Number | 300 | Speed of slide down/up animation in milliseconds.
|
||||
|collapseTrigger | String | `[data-widget="remove"]` | jQuery selector to the element responsible for collapsing the box.
|
||||
|removeTrigger | String | `[data-widget="collapse"]` | jQuery selector to the element responsible for removing the box.
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
> ##### Tip!
|
||||
> You can use any option via the data-attributes like this.
|
||||
> ```html
|
||||
> <button type="button" class="btn btn-tool" data-widget="collapse" data-animation-speed="1000"><i class="fas fa-minus"></i></button>
|
||||
> ```
|
||||
{: .quote-info}
|
||||
|
||||
##### Events
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Event Type | Description
|
||||
|-|-
|
||||
|expanded.lte.widget | Triggered after a card expanded.
|
||||
|collapsed.lte.widget | Triggered after a card collapsed.
|
||||
|maximized.lte.widget | Triggered after a card maximized.
|
||||
|minimized.lte.widget | Triggered after a card minimized.
|
||||
|removed.lte.widget | Triggered after a card removed.
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$('#my-card').on('expanded.lte.widget', handleExpandedEvent)`
|
||||
|
||||
|
||||
##### Methods
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Method | Description
|
||||
|-|-
|
||||
|collapse | Collapses the card
|
||||
|expand | Expands the card
|
||||
|remove | Removes the card
|
||||
|toggle | Toggles the state of the card between expanded and collapsed
|
||||
|toggleMaximize | Toggles the state of the card between maximized and minimized
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$('#my-card-widget').Widget('toggle')`
|
||||
Loading…
Reference in a new issue