# jquery-pane

> jQuery plugin to manage sliding and overlaid content panels. Panels take main part of window and the full size in mobile.

Latest version **1.0.0-beta.1** (published 2021-10-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install jquery-pane
pnpm add jquery-pane
yarn add jquery-pane
bun add jquery-pane
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-beta.1 |
| Published | 2021-10-18 |
| First published | 2019-02-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 118 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | jQuery Pane Authors |
| Maintainers | elgigi |
| Keywords | jquery, pane, panel, jquery-pane, jquerypane |

## Links

- npm: https://www.npmjs.com/package/jquery-pane
- Repository: https://github.com/ElGigi/jQueryPane
- Homepage: https://github.com/ElGigi/jQueryPane#readme
- Issues: https://github.com/ElGigi/jQueryPane/issues
- npm.io page: https://npm.io/package/jquery-pane

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 1.0.0-beta.1 (latest) — 2021-10-18
- 1.0.0-alpha.3 — 2019-02-07
- 1.0.0-alpha.1 — 2019-02-05

## README

# jQuery Pane

jQuery plugin to manage sliding and overlaid content panels.
Panels take main part of window and the full size in mobile.

## Usage

### HTML

Default HTML structure of pane: 
```html
<div class="pane">
  <div class="pane-header">
    <button type="button" data-dismiss="pane">X</button>
    <h2 class="pane-header__title">My pane title</h2>
  </div>

  ...
</div>
```

> **Warning**:
>
> `div.pane` is automatically created by library.  

### JavaScript

Default usage:
```javascript
// Init without options
PaneManager()

// Init with options
PaneManager({container: '#myContainer'})
```

### Triggers

Links, buttons or others HTML elements can open panes, with `data-toggle="pane"`.

Link example:
```html
<a href="/my-page.html" data-toggle="pane">My link</a>
```

Button example:
```html
<button type="button" data-toggle="pane" data-href="/my-page.html">My button</button>
```

## Options

- `container`: container where .pane-wrapper will be create (default: body)
- `loader`: loader content for `.pane-loader` element whose created during ajax loading

## Events

- `show.pane`: This event fires immediately when the pane is create
- `shown.pane`: This event is fired when the pane is completely visible to the user (animations included)
- `hide.pane`: This event fires immediately when close action is detected 
- `hidden.pane`: This event is fired when the pane is completely hidden to the user (animations included)
- `loading.content.pane`: This event fires immediately when AJAX content start to loading
- `loaded.content.pane`: This event is fired when AJAX content is loaded
- `printed.content.pane`: This event is fired when text content of AJAX result is printed
- `error.content.pane`: This event fires immediately when AJAX error occurred

## API

### jQuery

A jQuery method is available to interact with pane, and only panes.

```javascript
// Reload pane content
$('.pane').pane('reload');

// Load content
$('.pane').pane('load', '/path/page.html');

// Close pane
$('.pane').pane('close');
```

### PaneManager object

Methods are available from the PaneManager object.

```javascript
let paneManager = PaneManager()

// Refresh (show wrapper if at least one pane exists)
paneManager.refresh()

// Get a config value
paneManager.config(key)

// Create a new empty pane with given CSS class
paneManager.new(paneClass)
```

### Pane object

When you create or get a pane, you can access to some methods. 

```javascript
let paneManager = PaneManager()
let pane = paneManager.new()

// Reload pane content
pane.reload()

// Load content
pane.load('/path/page.html')

// Close pane
pane.close()
```

---
_Source: https://npm.io/package/jquery-pane · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._