admin lte
This commit is contained in:
68
public/bower_components/admin-lte/docs/javascript/card-refresh.md
vendored
Normal file
68
public/bower_components/admin-lte/docs/javascript/card-refresh.md
vendored
Normal file
@@ -0,0 +1,68 @@
|
||||
---
|
||||
layout: page
|
||||
title: Card Refresh Plugin
|
||||
---
|
||||
|
||||
The card refresh plugin provides the functionality for loading ajax content into the card.
|
||||
|
||||
##### Usage
|
||||
This plugin can be activated as a jQuery plugin or using the data api.
|
||||
|
||||
###### Data API
|
||||
{: .text-bold }
|
||||
|
||||
Activate the plugin by adding a button with `data-card-widget="card-refresh"` to the card and provide the required `data-source="/URL-TO-CONTENT"` option. By doing that, the plugin will automatically create a GET request to the provided URL and render the returned response the `.card-body` section of the card. If you need to process the returned response before rendering, you should use the jQuery API, which provides hooks to deal with the response.
|
||||
|
||||
|
||||
|
||||
###### jQuery
|
||||
{: .text-bold }
|
||||
The jQuery API provides more customizable options that allows the developer to pre-process the request before rendering and post-process it after rendering.
|
||||
|
||||
```js
|
||||
("#my-card").refreshBox(options)
|
||||
```
|
||||
|
||||
##### Options
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Name | Type | Default | Description
|
||||
|-|-|-|-
|
||||
| source | String | '' | The URL to the source.
|
||||
| sourceSelector | String | '' | A selector to get return only the content of the selector.
|
||||
| params | Object | {} | GET query paramaters (example: {search_term: 'layout'}, which renders to URL/?search_term=layout)
|
||||
| trigger | String | `[data-card-widget="card-refresh"]` | The CSS selector to the refresh button
|
||||
| content | String | `.card-body` | The CSS selector to the target where the content should be rendered. This selector should exist within the card.
|
||||
| loadInContent | Boolean | TRUE | Whether to automatically render the content.
|
||||
| loadOnInit | Boolean | TRUE | Init plugin on page load.
|
||||
| responseType | String | '' | Response type (example: 'json' or 'html')
|
||||
| overlayTemplate | String | TRUE | The HTML template for the ajax spinner
|
||||
| onLoadStart | Function | Anonymous Function | Called before the ajax request is made
|
||||
| onLoadDone | Function | Anonymous Function | Called after the ajax request is made. A `response` parameter is passed to the function that hold the server response.
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
##### Events
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Event Type | Description
|
||||
|-|-
|
||||
|loaded.lte.cardrefresh | Triggered after a card is refreshed.
|
||||
|overlay.added.lte.cardrefresh | Triggered after the overlay added to the card.
|
||||
|overlay.removed.lte.cardrefresh | Triggered after the overlay removed from the card.
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$('#my-card [data-card-widget="card-refresh"]').on('loaded.lte.cardrefresh', handleLoadedEvent)`
|
||||
|
||||
|
||||
##### Methods
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Method | Description
|
||||
|-|-
|
||||
|load | Reloads the content and runs the `onLoadStart` and `onLoadDone` hooks
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$('#my-card-widget').Widget('toggle')`
|
||||
195
public/bower_components/admin-lte/docs/javascript/card-widget.md
vendored
Normal file
195
public/bower_components/admin-lte/docs/javascript/card-widget.md
vendored
Normal file
@@ -0,0 +1,195 @@
|
||||
---
|
||||
layout: page
|
||||
title: Card Widget Plugin
|
||||
---
|
||||
|
||||
The card 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-card-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-card-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-card-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-card-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-card-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-card-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-card-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-card-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-card-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-card-widget` selectors.
|
||||
|
||||
```js
|
||||
$('#my-card').CardWidget(options)
|
||||
```
|
||||
|
||||
##### Options
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Name | Type | Default | Description
|
||||
|-|-|-|-
|
||||
|animationSpeed | Number | 300 | Speed of slide down/up animation in milliseconds.
|
||||
|collapseTrigger | String | `[data-card-widget="collapse"]` | jQuery selector to the element responsible for collapsing the box.
|
||||
|removeTrigger | String | `[data-card-widget="remove"]` | jQuery selector to the element responsible for removing the box.
|
||||
|maximizeTrigger | String | `[data-card-widget="maximize"]` | jQuery selector to the element responsible for maximizing 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-card-widget="collapse" data-animation-speed="1000"><i class="fas fa-minus"></i></button>
|
||||
> ```
|
||||
{: .quote-info}
|
||||
|
||||
##### Events
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Event Type | Description
|
||||
|-|-
|
||||
|expanded.lte.cardwidget | Triggered after a card expanded.
|
||||
|collapsed.lte.cardwidget | Triggered after a card collapsed.
|
||||
|maximized.lte.cardwidget | Triggered after a card maximized.
|
||||
|minimized.lte.cardwidget | Triggered after a card minimized.
|
||||
|removed.lte.cardwidget | Triggered after a card removed.
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$('#my-card').on('expanded.lte.cardwidget', 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
|
||||
|maximize | Maximizes the card
|
||||
|minimize | Minimizes the card
|
||||
|toggleMaximize | Toggles the state of the card between maximized and minimized
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$('#my-card-widget').CardWidget('toggle')` or `$('#my-card').CardWidget('toggle')`
|
||||
63
public/bower_components/admin-lte/docs/javascript/control-sidebar.md
vendored
Normal file
63
public/bower_components/admin-lte/docs/javascript/control-sidebar.md
vendored
Normal file
@@ -0,0 +1,63 @@
|
||||
---
|
||||
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
|
||||
|-|-|-|-
|
||||
|controlsidebarSlide | Boolean | TRUE | Whether the sidebar should slide over the content or push the content to make space for itself.
|
||||
|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 to enable auto collapse sidebar on 768 pixels width.
|
||||
> ```html
|
||||
> <a href="#" data-widget="control-sidebar" data-controlsidebar-slide="false">Toggle Control Sidebar</a>
|
||||
> ```
|
||||
{: .quote-info}
|
||||
|
||||
##### Events
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Event Type | Description
|
||||
|-|-
|
||||
|expanded.lte.controlsidebar | Triggered after a control sidebar expands.
|
||||
|collapsed.lte.controlsidebar | Triggered after a control sidebar collapses.
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$('#toggle-button').on('expanded.lte.controlsidebar', handleExpandedEvent)`
|
||||
47
public/bower_components/admin-lte/docs/javascript/direct-chat.md
vendored
Normal file
47
public/bower_components/admin-lte/docs/javascript/direct-chat.md
vendored
Normal file
@@ -0,0 +1,47 @@
|
||||
---
|
||||
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')`
|
||||
|
||||
|
||||
##### Events
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Event Type | Description
|
||||
|-|-
|
||||
|toggled.lte.directchat | Triggered after a direct chat contacts pane is toggled.
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$('#toggle-button').on('toggled.lte.directchat', handleToggledEvent)`
|
||||
41
public/bower_components/admin-lte/docs/javascript/layout.md
vendored
Normal file
41
public/bower_components/admin-lte/docs/javascript/layout.md
vendored
Normal file
@@ -0,0 +1,41 @@
|
||||
---
|
||||
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
|
||||
|panelAutoHeight | Boolean|Numeric | true | Panel Height Correction (`true` = default correction on load/resize; numeric = offset the correction on load/resize)
|
||||
|loginRegisterAutoHeight | Boolean|Integer | true | Login & Register Height Correction (`true` = single correction on load; integer = correction with a interval based on the interger)
|
||||
|---
|
||||
{: .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
|
||||
|fixLoginRegisterHeight | Fix the login & register body height
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$('body').Layout('fixLayoutHeight')`
|
||||
67
public/bower_components/admin-lte/docs/javascript/push-menu.md
vendored
Normal file
67
public/bower_components/admin-lte/docs/javascript/push-menu.md
vendored
Normal file
@@ -0,0 +1,67 @@
|
||||
---
|
||||
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
|
||||
|enableRemember | Boolean | FALSE | Remember sidebar state and set after page refresh.
|
||||
|noTransitionAfterReload | Boolean | TRUE | Hold Transition after page refresh.
|
||||
{: .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.
|
||||
|collapse | Collapses the sidebar menu.
|
||||
|expand | Expands the sidebar menu
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$('[data-widget="pushmenu"]').PushMenu('toggle')`
|
||||
71
public/bower_components/admin-lte/docs/javascript/toasts.md
vendored
Normal file
71
public/bower_components/admin-lte/docs/javascript/toasts.md
vendored
Normal file
@@ -0,0 +1,71 @@
|
||||
---
|
||||
layout: page
|
||||
title: Toasts Plugin
|
||||
---
|
||||
|
||||
The toasts plugin provides simple functionality to create easily a bootstrap toast.
|
||||
|
||||
##### Usage
|
||||
This plugin can be activated as a jQuery plugin.
|
||||
|
||||
###### 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
|
||||
$(document).Toasts('create', {
|
||||
title: 'Toast Title',
|
||||
body: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
##### Options
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Name | Type | Default | Description
|
||||
|-|-|-|-
|
||||
|position | String | Position.TOP_RIGHT | Position of the toast, available options: `topRight`, `topLeft`, `bottomRight` & `bottomLeft`
|
||||
|fixed | Boolean | true | Whether to set toasts container fixed.
|
||||
|autohide | Boolean | false | Whether to auto hide toast
|
||||
|autoremove | Boolean | true | Whether to auto remove toast after closing
|
||||
|delay | Integer | 1000 | Auto Hide delay
|
||||
|fade | Boolean | true | Whether to fade toast
|
||||
|icon | String | null | Icon class (e.g. `fas fa-exclamation-triangle`)
|
||||
|image | String | null | Image url
|
||||
|imageAlt | String | null | Image alt
|
||||
|imageHeight | String | '25px' | Image size of toast
|
||||
|title | String | null | Title of toast
|
||||
|subtitle | String | null | Subtitle of toast
|
||||
|close | Boolean | true | Whether to add close button to toast
|
||||
|body | String | null | Body of toast
|
||||
|class | String | null | Additional classes for the toast
|
||||
|---
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
|
||||
##### Events
|
||||
{: .mt-4}
|
||||
All event are sent to `body`.
|
||||
|
||||
|---
|
||||
| Event Type | Description
|
||||
|-|-
|
||||
|init.lte.toasts | Fired when constructor is done
|
||||
|created.lte.toasts | Fired when the toast is created
|
||||
|removed.lte.toasts | Fired when the toast is removed
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$('body').on('created.lte.toast', handleCreateEvent)`
|
||||
|
||||
|
||||
##### Methods
|
||||
{: .mt-4}
|
||||
|
||||
|---
|
||||
| Method | Description
|
||||
|-|-
|
||||
|create | Creates a toast
|
||||
{: .table .table-bordered .bg-light}
|
||||
|
||||
Example: `$(document).Toasts('create', {title: 'Toast Title'})`
|
||||
39
public/bower_components/admin-lte/docs/javascript/todo-list.md
vendored
Normal file
39
public/bower_components/admin-lte/docs/javascript/todo-list.md
vendored
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}
|
||||
66
public/bower_components/admin-lte/docs/javascript/treeview.md
vendored
Normal file
66
public/bower_components/admin-lte/docs/javascript/treeview.md
vendored
Normal file
@@ -0,0 +1,66 @@
|
||||
---
|
||||
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.
|
||||
|expandSidebar | Boolean | FALSE | Whether to expand sidebar on open menu.
|
||||
|sidebarButtonSelector | String | `[data-widget="pushmenu"]` | Selector of the sidebar button.
|
||||
{: .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)`
|
||||
|
||||
Reference in New Issue
Block a user