Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/markembling/jquery-gpopover-plugin
jQuery plugin for creating popover elements (similar to Google's apps launcher/switcher).
https://github.com/markembling/jquery-gpopover-plugin
jquery jquery-plugin popover
Last synced: 3 months ago
JSON representation
jQuery plugin for creating popover elements (similar to Google's apps launcher/switcher).
- Host: GitHub
- URL: https://github.com/markembling/jquery-gpopover-plugin
- Owner: markembling
- License: bsd-3-clause
- Created: 2013-10-27T09:11:52.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2019-05-09T07:23:58.000Z (over 5 years ago)
- Last Synced: 2024-09-27T22:44:06.324Z (3 months ago)
- Topics: jquery, jquery-plugin, popover
- Language: JavaScript
- Homepage: https://markembling.github.io/jquery-gpopover-plugin/
- Size: 30.3 KB
- Stars: 6
- Watchers: 4
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
jQuery 'gpopover' Plugin
========================
A simple jQuery plugin for creating popover elements similar to Google's apps launcher/switcher.
## Installation
### Package Managers
You can install the plugin using NPM or Bower.
npm install jquery-gpopover-plugin
bower install jquery-gpopover-plugin
### Manually
If you'd prefer to install manually, download and include the JS and CSS files in your project.
Ensure jQuery is also available and included before the plugin JS file.
## Usage
Create a trigger element on your page (for example, a link or a button), and set the `data-popover` attribute to the ID of the element you wish to pop over.
Click Me
Create the popover content element somewhere in your document. You may place this wherever you wish in the document (for example, at the end or after your trigger element). Simply make sure the ID matches that which your trigger has, and give it the class of `gpopover` to make sure it is styled correctly and hidden initially.
This is where your popover content goes.
Initialise the plugin on your trigger element. That's it.
$('#my-trigger').gpopover();
You can also trigger a show or hide through code (i.e. without the user clicking), by invoking the show or hide methods.:
$('#my-trigger').gpopover('show');
$('#my-trigger').gpopover('hide');
This is normally best done after initialising your popovers as above, but if it hasn't been done, it will do so using default options before then acting.
## Demo
Want to see the popovers in action? Check out the [examples](https://markembling.github.io/jquery-gpopover-plugin/).
## Customising the Plugin
### Options
The plugin has some options which can be passed to it:
| Property | Default | Description
| -------- | ------- | -----------
| `width` | 250 | The width of the popover element (pixels)
| `fadeInDuration` | 65 | Duration of popover fade-in animation (ms)
| `fadeOutDuration` | 65 | Duration of popover fade-out animation (ms)
| `viewportSideMargin` | 10 | Space to leave at the side when against the viewport edge (pixels)
| `preventHide` | `false` | Prevent hiding when clicking within popover (true/false)
| `onShow` | (none) | Callback to be run when the popover is shown. `this` is the trigger element and the first argument passed to the function is the popover element (both jQuery-wrapped).
| `onHide` | (none) | Callback to be run when the popover is hidden. Same as `onShow`.
### Styling
The default styling is visually similar to Google's pop-out apps menu as I like the clean lines and look. However the appearance can be modified by overriding, changing, or replacing the styles in the `jquery.gpopover.css` stylesheet.
The main popover element has the `gpopover` class, and the arrow is made up of two elements with the classes `gpopover-arrow` and `gpopover-arrow-shadow`. The latter is positioned 1 pixel higher to give the shadow/outline effect.
## License
Licensed under the BSD (3 clause) license.
Copyright (c) 2013-2019 [Mark Embling](markembling.info).