ch.Bubble

Description

Dialog window with an error skin.

How-to

// Create a new Bubble.
var bubble = new ch.Bubble($el, [options]);
// Create a new Bubble with disabled effects.
var bubble = new ch.Bubble({
    'fx': 'none'
});
// Create a new Bubble using the shorthand way (content as parameter).
var bubble = new ch.Bubble('http://ui.ml.com:3040/ajax');

Parameters

  • el - HTMLElement : A HTMLElement to create an instance of ch.Bubble.
  • options - Object : Options to customize an instance.
    • addClass - String : CSS class names that will be added to the container on the component initialization.
    • fx - String : Enable or disable UI effects. You must use: "slideDown", "fadeIn" or "none". Default: "fadeIn".
    • width - String : Set a width for the container. Default: "auto".
    • height - String : Set a height for the container. Default: "auto".
    • shownby - String : Determines how to interact with the trigger to show the container. You must use: "pointertap", "pointerenter" or "none". Default: "none".
    • hiddenby - String : Determines how to hide the component. You must use: "button", "pointers", "pointerleave", "all" or "none". Default: "none".
    • reference - HTMLElement : It's a reference to position and size of element that will be considered to carry out the position. Default: the trigger element.
    • side - String : The side option where the target element will be positioned. Its value can be: "left", "right", "top", "bottom" or "center". Default: "right".
    • align - String : The align options where the target element will be positioned. Its value can be: "left", "right", "top", "bottom" or "center". Default: "top".
    • offsetX - Number : Distance to displace the target horizontally. Default: 10.
    • offsetY - Number : Distance to displace the target vertically. Default: 0.
    • position - String : The type of positioning used. Its value must be "absolute" or "fixed". Default: "absolute".
    • method - String : The type of request ("POST" or "GET") to load content by ajax. Default: "GET".
    • params - String : Params like query string to be sent to the server.
    • cache - Boolean : Force to cache the request by the browser. Default: true.
    • async - Boolean : Force to sent request asynchronously. Default: true.
    • waiting - String | HTMLElement : Temporary content to use while the ajax request is loading. Default: '<div class="ch-loading ch-loading-centered"></div>'.
    • content - String | HTMLElement : The content to be shown into the Bubble container. Default: "Check the information, please."

Extends

Properties

.Bubble#name String

The name of the component.

.Component#name String

The name of a component.

.uid Number

A unique id to identify the instance of a component.

Methods

.constructor()



    
Returns a reference to the constructor function.







    
        




.constructor()




    
Returns a reference to the constructor function.







    
        




.destroy()




    
Destroys an instance of Component and remove its data from asociated element.






    



// Destroy a component
component.destroy();
// Empty the component reference
component = undefined;








    
        




.disable() → {component}




    
Disables an instance of Component.






    



// Disabling an instance of Component.
component.disable();








    
        




.enable() → {component}




    
Enables an instance of Component.






    



// Enabling an instance of Component.
component.enable();








    
        




.require() → {component}




    
Adds functionality or abilities from other classes.






    



// You can require some abilitiest to use in your component.
// For example you should require the collpasible abitliy.
var component = new Component(element, options);
component.require('Collapsible');








    






    
Events


    

        




'destroy'




    
Emits when a component is destroyed.






    



// Subscribe to "destroy" event.
component.on('destroy', function () {
    // Some code here!
});








    
        




'disable'




    
Emits when a component is disable.






    



// Subscribe to "disable" event.
component.on('disable', function () {
    // Some code here!
});








    
        




'enable'




    
Emits when a component is enabled.






    



// Subscribe to "enable" event.
component.on('enable', function () {
    // Some code here!
});








    
        




'ready'




    
Event emitted when the component is ready to use.






    



// Subscribe to "ready" event.
bubble.on('ready', function () {
    // Some code here!
});