File manager - Edit - /home/autoph/public_html/projects/api/public/javascript.tar
Back
todo-list.md 0000644 00000002232 15025016457 0007010 0 ustar 00 --- 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} toasts.md 0000644 00000003760 15025016457 0006416 0 ustar 00 --- 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'})` treeview.md 0000644 00000004047 15025016457 0006732 0 ustar 00 --- 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="nav-item"> <a class="nav-link" href="#">Multilevel</a> <ul class="nav-treeview"> <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} > ##### IMPORTANT! > If you want to use a multiple treeview's beside the main-sidebar treeview, > then you need to add to all treeview's a ID-tag. > ```html > <ul data-widget="treeview" id="someIdNameOrSo" data-accordion="false">...</ul> > ``` {: .quote-danger} ##### 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)` card-widget.md 0000644 00000013514 15025016457 0007271 0 ustar 00 --- 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 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"` 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"` 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"` 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')` direct-chat.md 0000644 00000002130 15025016457 0007256 0 ustar 00 --- 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 toggle the chat contact pane. ```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)` expandable-tables.md 0000644 00000004765 15025016457 0010462 0 ustar 00 --- layout: page title: Expandable Table Plugin --- The expandable table plugin provides simple functionality to create expandable tables. ##### Example Code ```html <table class="table table-bordered table-hover"> <tbody> <tr data-widget="expandable-table" aria-expanded="false"> <td>183</td> </tr> <tr class="expandable-body"> <td> <p> <!-- YOUR EXPANDABLE TABLE BODY HERE --> </p> </td> </tr> <tr data-widget="expandable-table" aria-expanded="true"> <td>219</td> </tr> <tr class="expandable-body"> <td> <p> <!-- YOUR EXPANDABLE TABLE BODY HERE --> </p> </td> </tr> <tr data-widget="expandable-table" aria-expanded="true"> <td>657</td> </tr> <tr class="expandable-body"> <td> <p> <!-- YOUR EXPANDABLE TABLE BODY HERE --> </p> </td> </tr> </tbody> </table> ``` {: .max-height-300} > ##### Tip! > You can control the default visibility with ` aria-expanded="false"`/` aria-expanded="true"` via the expandable table header. {: .quote-info} ##### Usage This plugin can be activated as a jQuery plugin or using the data api. ###### Data API {: .text-bold } Add `data-widget="expandable-table"` to a table row to activate the plugin and place a new table row below with the `.expandable-body`-class. ```html <tr data-widget="expandable-table" aria-expanded="true"> <td>657</td> </tr> <tr class="expandable-body"> <td> <p> </p> </td> </tr> ``` > ##### Tip! > To get the correct slide up/down animation place a `div` or `p`-tag inside your expandable table body. {: .quote-info} ###### jQuery {: .text-bold } The jQuery API provides more customizable options that allows the developer to toggle the visibilty state of one table row. ```js $('#expandable-table-header-row').ExpandableTable('toggleRow') ``` ##### Methods {: .mt-4} |--- | Method | Description |-|- |toggleRow | Toggles the state of the expandable table body between hidden and visible. {: .table .table-bordered .bg-light} Example: `$('#expandable-table-header-row').ExpandableTable('toggleRow')` ##### Events {: .mt-4} |--- | Event Type | Description |-|- |expanded.lte.expandableTable | Triggered after a expandable table body is expanded. |collapsed.lte.expandableTable | Triggered after a expandable table body is collapsed. {: .table .table-bordered .bg-light} Example: `$('#expandable-table-header-row').on('expanded.lte.expandableTable', handleToggledEvent)` sidebar-search.md 0000644 00000004144 15025016457 0007752 0 ustar 00 --- layout: page title: Sidebar Search Plugin --- The sidebar search plugin provides the functionality to search menu items from the sidebar menu entries. ##### Usage This plugin can be activated as a jQuery plugin or using the data API. ###### Data API {: .text-bold } Activate the plugin by adding the following data-attribue `data-widget="sidebar-search"` to a input-group inside the sidebar. You can use the HTML Markup below for a quick start. ###### 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 ("[data-widget="sidebar-search"]").SidebarSearch(options) ``` ##### HTML Markup Place this HTML Markup after `div.user-panel`. ```html <div class="form-inline"> <div class="input-group" data-widget="sidebar-search"> <input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search"> <div class="input-group-append"> <button class="btn btn-sidebar"> <i class="fas fa-search fa-fw"></i> </button> </div> </div> </div> ``` ##### Options {: .mt-4} |--- | Name | Type | Default | Description |-|-|-|- | arrowSign | String | '->' | Arrow Sign between the menu item path. | minLength | Number | 3 | Min search query length. | maxResults | Number | 7 | Max search results to display. | highlightName | Boolean | TRUE | Whether to highlight menu item name. | highlightPath | Boolean | FALSE | Whether to highlight menu item path. | highlightClass | String | 'text-light' | Hightlight class. | notFoundText | String | 'No element found! | Response text if no menu item found. {: .table .table-bordered .bg-light} ##### Methods {: .mt-4} |--- | Method | Description |-|- |init | Init's the SidebarSearch Plugin and registers all visible menu items. |toggle | Toggles the search dropdown list. |close | Closes the search dropdown list. |open | Opens the search dropdown list. |search | Triggers a search. {: .table .table-bordered .bg-light} Example: `$('[data-widget="sidebar-search"]').SidebarSearch('toggle')` card-refresh.md 0000644 00000006277 15025016457 0007454 0 ustar 00 --- 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 [data-card-widget="card-refresh"]').CardRefresh(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. | loadErrorTemplate | Boolean | TRUE | Whether to append the `errorTemplate` to the card when an ajax error occurs. | responseType | String | '' | Response type (example: 'json' or 'html') | overlayTemplate | String | TRUE | The HTML template for the ajax spinner | errorTemplate | String | `'<span class="text-danger"></span>'` | The HTML template for an ajax error message | 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. | onLoadFail | Function | Anonymous Function | Called if the ajax request fails. `jqXHR`, `textStatus` and `errorThrown` parameters are passed to the function. {: .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 [data-card-widget="card-refresh"]').CardRefresh('load')` layout.md 0000644 00000003071 15025016457 0006411 0 ustar 00 --- 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 | String | `os-theme-light` | Scrollbar Theme used while SideBar Fixed |scrollbarAutoHide | String | `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) |panelAutoHeightMode | String | `min-height` | Panel Height Mode (`min-height` = sets the `min-height`-attribute to the content-wrapper; `height` = sets `height`-attribute to the content-wrapper) |preloadDuration | Integer | 200 | Preloader Duration (Set in milliseconds) |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')` control-sidebar.md 0000644 00000005004 15025016457 0010161 0 ustar 00 --- 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 |target | String | `.control-sidebar` | Target control-sidebar to handle multiple control-sidebars. |animationSpeed | Boolean | `300` | Set the animation/transition speed equals to the scss transition speed. {: .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. |collapsed-done.lte.controlsidebar | Triggered after a control sidebar is fully collapsed. {: .table .table-bordered .bg-light} Example: `$('#toggle-button').on('expanded.lte.controlsidebar', handleExpandedEvent)` ##### Methods {: .mt-4} |--- | Method | Description |-|- |collapse | Collapses the control-sidebar |show | Show's the control-sidebar |toggle | Toggles the state of the control-sidebar expanded and collapsed {: .table .table-bordered .bg-light} Example: `$('#toggle-button').ControlSidebar('toggle')` push-menu.md 0000644 00000003551 15025016457 0007020 0 ustar 00 --- 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. |animationSpeed | Boolean | `300` | Set the animation/transition speed equals to the scss transition speed. {: .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. |collapsed-done.lte.pushmenu | Fired when the sidebar is fully 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')` iframe.md 0000644 00000012270 15025016457 0006340 0 ustar 00 --- layout: page title: IFrame Plugin --- The iframe plugin provides the functionality to open sidebar & navbar items in a tabbed iframe. ##### Required Markup To get the iframe 100% working you need the following content-wrapper markup: ```html <div class="content-wrapper iframe-mode" data-widget="iframe" data-loading-screen="750"> <div class="nav navbar navbar-expand-lg navbar-white navbar-light border-bottom p-0"> <a class="nav-link bg-danger" href="#" data-widget="iframe-close">Close</a> <ul class="navbar-nav" role="tablist"></ul> </div> <div class="tab-content"> <div class="tab-empty"> <h2 class="display-4">No tab selected!</h2> </div> <div class="tab-loading"> <div> <h2 class="display-4">Tab is loading <i class="fa fa-sync fa-spin"></i></h2> </div> </div> </div> </div> ``` ###### Markup with Default IFrame Tab ```html <div class="content-wrapper iframe-mode" data-widget="iframe" data-loading-screen="750"> <div class="nav navbar navbar-expand navbar-white navbar-light border-bottom p-0"> <div class="nav-item dropdown"> <a class="nav-link bg-danger dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Close</a> <div class="dropdown-menu mt-0"> <a class="dropdown-item" href="#" data-widget="iframe-close" data-type="all">Close All</a> <a class="dropdown-item" href="#" data-widget="iframe-close" data-type="all-other">Close All Other</a> </div> </div> <a class="nav-link bg-light" href="#" data-widget="iframe-scrollleft"><i class="fas fa-angle-double-left"></i></a> <ul class="navbar-nav overflow-hidden" role="tablist"><li class="nav-item active" role="presentation"><a href="#" class="btn-iframe-close" data-widget="iframe-close" data-type="only-this"><i class="fas fa-times"></i></a><a class="nav-link active" data-toggle="row" id="tab-index-html" href="#panel-index-html" role="tab" aria-controls="panel-index-html" aria-selected="true">Dashboard v1</a></li></ul> <a class="nav-link bg-light" href="#" data-widget="iframe-scrollright"><i class="fas fa-angle-double-right"></i></a> <a class="nav-link bg-light" href="#" data-widget="iframe-fullscreen"><i class="fas fa-expand"></i></a> </div> <div class="tab-content"> <div class="tab-empty"> <h2 class="display-4">No tab selected!</h2> </div> <div class="tab-loading"> <div> <h2 class="display-4">Tab is loading <i class="fa fa-sync fa-spin"></i></h2> </div> </div> <div class="tab-pane fade" id="panel-index-html" role="tabpanel" aria-labelledby="tab-index-html"><iframe src="./index.html"></iframe></div> </div> </div> ``` ##### 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="iframe"` to the `.content-wrapper`. 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 $('.content-wrapper').IFrame({ onTabClick(item) { return item }, onTabChanged(item) { return item }, onTabCreated(item) { return item }, autoIframeMode: true, autoItemActive: true, autoShowNewTab: true, autoDarkMode: false, allowDuplicates: true, loadingScreen: 750, useNavbarItems: true }) ``` ##### Options {: .mt-4} |--- | Name | Type | Default | Description |-|-|-|- |onTabClick | Function | Anonymous Function | Handle tab click event. |onTabChanged | Function | Anonymous Function | Handle tab changed event. |onTabCreated | Function | Anonymous Function | Handle tab created event. |autoIframeMode | Boolean | true | Whether to automatically add `.iframe-mode` to `body` if page is loaded via iframe. |autoItemActive | Boolean | true | Whether to automatically set the sidebar menu item active based on the active iframe. |autoShowNewTab | Boolean | true | Whether to automatically display created tab. |autoDarkMode | Boolean | false | Whether to automatically enable dark-mode in iframe pages. |allowDuplicates | Boolean | true | Whether to allow creation of duplicate tab/iframe. |allowReload | Boolean | true | Whether to allow reload non duplicate tab/iframes. |loadingScreen | Boolean/Number | true | [Boolean] Whether to enable iframe loading screen; [Number] Set loading screen hide delay. |useNavbarItems | Boolean | true | Whether to open navbar menu items, instead of open only sidebar menu items. |--- {: .table .table-bordered .bg-light} ##### Methods {: .mt-4} |--- | Method | Description |-|- |createTab| Create tab by title, link & uniqueName. Available arguments: title `String`, link `String`, uniqueName `String`, autoOpen `Boolean/Optional`. |openTabSidebar| Create tab by sidebar menu item. Available arguments: item `String|jQuery Object`, autoOpen `Boolean/Optional`. |switchTab| Switch tab by iframe tab navbar item. Available arguments: item `String|jQuery Object`. |removeActiveTab| Remove active iframe tab. {: .table .table-bordered .bg-light} Example: `$('.content-wrapper').IFrame('createTab', 'Home', 'index.html, 'index', true)` navbar-search.md 0000644 00000005400 15025016457 0007606 0 ustar 00 --- layout: page title: Navbar Search Plugin --- The navbar search plugin provides the functionality to show/hide a search input across the whole header. ##### Usage This plugin can be activated as a jQuery plugin or using the data API. ###### Data API {: .text-bold } Activate the plugin by adding the following data-attribue `data-widget="navbar-search"` to the `.navbar-search-block` inside the header. You can use the HTML Markup below for a quick start. ###### 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 ("[data-widget="navbar-search"]").SiteSearch(options) ``` ##### HTML Markup Place this HTML Markup after inside the header. ```html <a data-widget="navbar-search" href="#" role="button"> <i class="fas fa-search"></i> </a> <div class="navbar-search-block"> <form class="form-inline"> <div class="input-group input-group-sm"> <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search"> <div class="input-group-append"> <button class="btn btn-navbar" type="submit"> <i class="fas fa-search"></i> </button> <button class="btn btn-navbar" type="button" data-widget="navbar-search"> <i class="fas fa-times"></i> </button> </div> </div> </form> </div> ``` Or you can place the search button inside the navbar as nav-item with this markup: ```html <li class="nav-item"> <a class="nav-link" data-widget="navbar-search" href="#" role="button"> <i class="fas fa-search"></i> </a> <div class="navbar-search-block"> <form class="form-inline"> <div class="input-group input-group-sm"> <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search"> <div class="input-group-append"> <button class="btn btn-navbar" type="submit"> <i class="fas fa-search"></i> </button> <button class="btn btn-navbar" type="button" data-widget="navbar-search"> <i class="fas fa-times"></i> </button> </div> </div> </form> </div> </li> ``` ##### Options {: .mt-4} |--- | Name | Type | Default | Description |-|-|-|- | resetOnClose | Boolean | false | Reset Input on Close/Hide. |target | String | `.navbar-search-block` | Target navbar-search-block to handle multiple navbar-search-blocks. {: .table .table-bordered .bg-light} ##### Methods {: .mt-4} |--- | Method | Description |-|- |toggle | Toggles the search block. |close | Closes the search block. |open | Opens the search block. {: .table .table-bordered .bg-light} Example: `$('[data-widget="navbar-search"]').SiteSearch('toggle')`
| ver. 1.4 |
.
| PHP 8.0.30 | Generation time: 0 |
proxy
|
phpinfo
|
Settings