JS Tutorial
Download
Demo
- Overview
- Documents
User Rating: 0/5 ( 0 votes)
Your Rating:
popupMgr creates a popup box that can be loaded at anytime from any element. It ensures that only one instance of each type of box is loaded at any time.
Source: js.lovelotte.net
1. INCLUDE JS FILES
<script src='http://lovelotte.net/jquery-2.0.2.min.js'></script> <script src="code/0.2a/popupMgr.js"></script>
2. HTML
<button class="hover" popupmgr-id="1">Hover to Show</button> <span class="hover-item">Show on hover!</span>
3. JAVASCRIPT
$('button.hover').popupMgr( $('span.hover-item').html() );
4. OPTIONS
| Option | Description |
|---|---|
| name | stringDefines the popup. 'main' is default. The reason for name is to restrict the number of popups. For example, if you wanted popups to be invoked on/off by 'click' for a dropdown menu, you don't want all of the dropdown menus to be open at the same time. By setting each of the dropdown menus a popup corresponding to the same name, only one menu will be shown at a time. |
| class | stringClassname to be added to the popup so that separate popups can be styled through the selector "div.classname". |
| on | stringDefines the method of invoking a popup. Any jQuery event can be used for 'on' except for 'blur' and 'focusout'. If left blank, no event will be set. |
| off | stringDefines the method of invoking a popup. Any jQuery event can be used for 'on' except for 'blur' and 'focusout'. If left blank, no event will be set. |
| animate | booleanWhether or not to fade-in and fade-out the popup. |
| delay | int (ms)If animating, the delay used to fade-in or out. |
| offy | int (px)How far away from the invoking element the popup should be rendered in the y direction. |
5. METHODS
If using $.popup to call a popup, the following methods can be used:
| method | Parameters | Description |
|---|---|---|
| create | namestring | Creates a popup corresponding to 'name'. If one already exists, an error will be thrown. |
| update |
namestring htmlhtml data |
Updates the popup corresponding to 'name' to have html data 'data'. |
| show |
elDOM element optsobject |
Shows a popup. The first parameter takes in the invoking element. The second, an object of options. These options are the same as above, with the addition of 'data' within where you can add the html code you want shown in the popup. If not set, what was originally in the popup named 'html' will be shown. If 'name' is not set as one of the parameters of the object of options, the popup corresponding to 'main' will be shown. |
| hide |
namestring animateboolean delayint (ms) |
Hides a popup. If animate is true, the popup will fade out with delay as specified in 'delay'. |
