FLY
Popover/dropdown/tooltip/popup/whateveryouwant library.
Requires jQuery 1.4+. Works for modern browsers and IE8+.
Contains _base component you can inherit from, ready to use dropdown and tooltip components, mixins, jQuery plugin and some css styling.
See Examples.
Base
Is an abstract class you can extend to build your own popover type. You can find it at fly._base
- extend(extra)
- create(options)
- delegate(selector, options)
- fly.register$
- defaults
- options.content
- show(content)
- hide()
- toggle(mode)
- redraw(done)
- hidden()
- root()
- handle()
- init()
- destroy()
- events
- bind()
- unbind()
- one()
- trigger()
extend(extra)
Creates new class, based on context's class:
var titletip = fly.tooltip.extend({ defaults: { content: function() { return this.handle().attr('title'); } } });
create(options)
Creates an instance of class with a given options:
$('.js-titletip').each(function() { titletip.create(this, {position: $(this).data('position')); });
delegate(selector, options)
Delegates class on selector
, creates instance with options
on every first event from actions
fly.tooltip .extend({}) .delegate('.js-live-tooltip', { content: 'live' }) ;
defaults
Objects with defaults options:
{ baseClass: '...', // class to be added to created root hideClass: '...', // class to be added on .hide() and removed on .show() extraClass: '...', // any additional classes content: '', // defines how to get content for the popover redrawOnShow: true, // recalculate content on every/first show event register$: 'titletip' // will register titletip as jQuery plugin }
options.content
Defines rules to get popover's content, can be:
string
, soroot
will be filled with this stringfunction() { return '...'; }
sync function,root
will be filled with the returned valuefunction(done) { ... done(result); }
async function,root
will be filled with theresult
ofdone
, when it will be ready.
// static string { content: '<h1>Contacts</h1><a href="tel://0000">0000</a>' } // sync function { content: function() { return this.handle().attr('data-title'); } } // async function { content: function(done) { $.get('/api/list', function(html) { done(html); }); } }
show(content)
Shows popover and triggers appropriate events. If content
passed it will be shown, otherwise options.content
will be called to calculate content.
hide()/toggle(mode)
Hides/toggles popover
hidden()
Returns true
if popover is visible and false
otherwise
root()
Lazy root
initiation, will return the root
and ensure it was created and appropriate evens triggered. By default it creates root on first show()
handle()
jQuery object, representing handle
which should trigger popover's show/hide actions.
ens
Event namespace, unique for every instance, use it to add global events and easily detach them.
init()
Will be called during instance creation, you can bind your events or whatever you want
destroy()
Will be called during popover destroying, you can clean it up if you added something special
bind/unbind/one/trigger
Just a jQuery eventing method attached to each instance, so each instance can be an event emitter.
Events:
show
on popover showhide
on popover hiderootready
on root element created (firstroot()
call)
You can use it as:
var popoverus = fly._base.extend({ init: function() { this.on(this.EVENTS.ROOTREADY, function() { // bind something on root }) } });
dropdown
Extends defaults
with
{ baseClass: 'fly-dropdown', hideClass: 'fly-dropdown_hidden', extraClass: '', position: 'bottom center', // where to open dropdown and where to show tail arrowSize: 10 // offset between dropdown and handle }
Adds handle
's action
, which trigger dropdown on handle
click and closes on click outside dropdown and ESC
tooltip
Extends defaults
with
{ baseClass: 'fly-tooltip', hideClass: 'fly-tooltip_hidden', extraClass: '', position: 'bottom center', // where to open tooltip and where to show tail arrowSize: 10 // offset between tooltip and handle }
Adds handle
's action
, which show tooltip on handle
's mouseenter with 300ms delay and hides it on mouseleave
Mixins
rect($el)
Returns offsets and dimensions of the $el
(top/left/right/bottom/width/height)
position()
Calculates popover position relative to handle
according to options.position
jQuery plugin
For every non-base component in fly.*
(tooltip
, dropdown
) creates $.fn
function, which accepts options
or command, you can use it as:
$('.js-handle').dropdown({content: 'dropdown'}); $('.js-handle').dropdown('instance').hidden(); $('.js-handle').dropdown('destroy');
fly.register$
You can register your fly class as a jQuery plugin:
fly.register$('titletip', titletip); // then $('.js-titletip').titletip({position: $(this).data('position');
Global functions
fly.hideAll
Hides all current instances of fly.