new ng.Button (Object options) vs. 1.1.0 Full+Lite

Buttons are always used and carry a lot of functionality. the ng.Button widget is an easy to use and versatile to allow for a wide functionality.

Parameters

Object options vs. 1.1.0 Full+Lite
An optional object that holds the button properties.

Examples

Sample Buttons using JavaScript
In this example, we'll create buttons using JavaScript.
Demo:
Button from a Link



Search API:
Creating Button using HTML5 - require vs 1.2.0 + n
In this example, we'll create a few buttons using HTML5. This example requires version 1.2.0 and the ng.UI
Demo:
Standard Button:
Normal

Different Colors:
Main Important

Inheritance Tree

This class inherits the following classes and all their methods and properties. It's recommended to check if any private properties/options are defined before using them. The complete list of inheritted methods and events are listed below the current object Custom Events.
ng.Events ()
ng.PlugIn (options)
ng.Button (options)

Methods

Function ng.Button.make (parent, position) vs. 1.1.0 Full+Lite
Makes a button when an HTML Element doesn't exists (e.g. make a button from scratch).
Function ng.Button.set_layout (layout) vs. 1.1.3 Full+Lite
Sets the button layout by rearranging the icon, button and arrow.
Function ng.Button.get_layout () vs. 1.1.3 Full+Lite
Gets the button layout.
Function ng.Button.disable () vs. 1.1.0 Full+Lite
Disables the button. This method fires the onDisable event.
Function ng.Button.enable () vs. 1.1.0 Full+Lite
Enables the button. This method fires the onEnable event.
Function ng.Button.is_disabled () vs. 1.1.0 Full+Lite
Checks if the button is disabled or not.
Function ng.Button.check () vs. 1.1.0 Full+Lite
Checks the button. This method fires the onCheck event.
Function ng.Button.uncheck () vs. 1.1.0 Full+Lite
Unchecks the button. This method fires the onUnCheck event.
Function ng.Button.is_checked () vs. 1.1.0 Full+Lite
Checks if the button is checked or not.
Function ng.Button.set_value (val) vs. 1.1.0 Full+Lite
Sets the button's value. The value is used when the button is a form submit button.
Function ng.Button.get_value () vs. 1.1.0 Full+Lite
Gets the button's value. This can be only used when the button is a form submit button.
Function ng.Button.set_text (txt) vs. 1.1.0 Full+Lite
Sets the button's text.
Function ng.Button.get_text () vs. 1.1.0 Full+Lite
Gets the button's text.
Function ng.Button.set_text_style (property, value) vs. 1.1.0 Full+Lite
Sets the button's text CSS style. This method is the same as ng.Element.set_style for the text HTML Element.
Function ng.Button.set_text_styles (obj) vs. 1.1.0 Full+Lite
Sets the button's text styles. This method is the same as ng.Element.set_styles for the text HTML Element.
Function ng.Button.get_text_element () vs. 1.1.0 Full+Lite
Gets the button's text HTML Element.
Function ng.Button.hide_text () vs. 1.1.0 Full+Lite
Hides the button's text.
Function ng.Button.show_text () vs. 1.1.0 Full+Lite
Shows the button's text.
Function ng.Button.is_text_hidden () vs. 1.1.0 Full+Lite
Checks if the button's text is hidden or not.
Function ng.Button.set_text_length (length) vs. 1.1.0 Full+Lite
Sets the button's text maximum length.
Function ng.Button.get_text_length () vs. 1.1.0 Full+Lite
Gets the button's text maximum length.
Function ng.Button.set_width (width) vs. 1.1.0 Full+Lite
Sets the button's width.
Function ng.Button.get_width () vs. 1.1.0 Full+Lite
Gets the button's width.
Function ng.Button.set_icon (src) vs. 1.1.0 Full+Lite
Sets the button's icon source.
Function ng.Button.get_icon () vs. 1.1.0 Full+Lite
Gets the icon's source.
Function ng.Button.get_icon_element () vs. 1.1.0 Full+Lite
Gets the button's icon HTML Element if set, null otherwise.
Function ng.Button.hide_icon () vs. 1.1.0 Full+Lite
Hides the button's icon.
Function ng.Button.show_icon () vs. 1.1.0 Full+Lite
Shows the button's icon.
Function ng.Button.is_icon_hidden () vs. 1.1.0 Full+Lite
Checks if the button's icon is hidden or not.
Function ng.Button.set_component (comp) vs. 1.1.0 Full+Lite
Assign a button to a ng.Component. This will make the button toggles the component when clicked.
Function ng.Button.get_component () vs. 1.1.0 Full+Lite
Gets the ng.Component object assigned to the butotn if set.
Function ng.Button.get_component_element () vs. 1.1.0 Full+Lite
When an ng.Component is assigned to the button, an arrow image will be placed at the end of the button. This method gets the arrow image HTML Element.
Function ng.Button.hide_component () vs. 1.1.0 Full+Lite
Hides the arrow image from the button. The button functionality will not change and the ng.Component will be toggled when the button is clicked.
Function ng.Button.show_component () vs. 1.1.0 Full+Lite
Shows the arrow image in the button.
Function ng.Button.is_component_hidden () vs. 1.1.0 Full+Lite
Checks if the arrow image is hidden or not.
Function ng.Button.set_gloss (gloss) vs. 1.1.0 Full+Lite. Deprecated in vs 1.2.0
As of version 1.2.0 this method is deprecated and will be removed in version 1.2.5. Sets the gloss effect on the button.
Function ng.Button.get_gloss () vs. 1.1.0 Full+Lite. Deprecated in vs 1.2.0
As of version 1.2.0 this method is deprecated and will be removed in version 1.2.5. Gets the gloss property for the button.
Function ng.Button.set_color (color) vs. 1.1.0 Full+Lite. Deprecated in vs 1.2.0
As of version 1.2.0 this method is deprecated and will be removed in version 1.2.5. Sets the button's color.
Function ng.Button.get_color () vs. 1.1.0 Full+Lite. Deprecated in vs 1.2.0
As of version 1.2.0 this method is deprecated and will be removed in version 1.2.5. Gets the button's color.
Function ng.Button.set_over_color (color) vs. 1.1.0 Full+Lite. Deprecated in vs 1.2.0
As of version 1.2.0 this method is deprecated and will be removed in version 1.2.5. Sets the button's color when the mouse is over.
Function ng.Button.get_over_color () vs. 1.1.0 Full+Lite. Deprecated in vs 1.2.0
As of version 1.2.0 this method is deprecated and will be removed in version 1.2.5. Gets the button's color when the mouse is over it.
Function ng.Button.set_down_color (color) vs. 1.1.0 Full+Lite. Deprecated in vs 1.2.0
As of version 1.2.0 this method is deprecated and will be removed in version 1.2.5. Sets the button's color when down.
Function ng.Button.get_down_color () vs. 1.1.0 Full+Lite. Deprecated in vs 1.2.0
As of version 1.2.0 this method is deprecated and will be removed in version 1.2.5. Gets the button's color when down.
Function ng.Button.set_disable_color (color) vs. 1.1.0 Full+Lite. Deprecated in vs 1.2.0
As of version 1.2.0 this method is deprecated and will be removed in version 1.2.5. Sets the button's color when disabled.
Function ng.Button.get_disable_color () vs. 1.1.0 Full+Lite. Deprecated in vs 1.2.0
As of version 1.2.0 this method is deprecated and will be removed in version 1.2.5. Gets the button's color when disabled.
Function ng.Button.set_checked_color (color) vs. 1.1.0 Full+Lite. Deprecated in vs 1.2.0
As of version 1.2.0 this method is deprecated and will be removed in version 1.2.5. Sets the button's color when checked.
Function ng.Button.get_checked_color () vs. 1.1.0 Full+Lite. Deprecated in vs 1.2.0
As of version 1.2.0 this method is deprecated and will be removed in version 1.2.5. Gets the button's color when checked.
Function ng.Button.set_text_color (color) vs. 1.1.0 Full+Lite. Deprecated in vs 1.2.0
As of version 1.2.0 this method is deprecated and will be removed in version 1.2.5. Sets the button's text color.
Function ng.Button.get_text_color () vs. 1.1.0 Full+Lite. Deprecated in vs 1.2.0
As of version 1.2.0 this method is deprecated and will be removed in version 1.2.5. Gets the button's text color.
Function ng.Button.set_arrow_style (arrow_style) vs. 1.1.0 Full+Lite. Deprecated in vs 1.2.0
As of version 1.2.0 this method is deprecated and will be removed in version 1.2.5. Sets the arrow style property for the button.
Function ng.Button.get_arrow_style () vs. 1.1.0 Full+Lite. Deprecated in vs 1.2.0
As of version 1.2.0 this method is deprecated and will be removed in version 1.2.5. Gets the arrow style property for the button.
Function ng.Button.hide_borders () vs. 1.1.0 Full+Lite. Deprecated in vs 1.2.0
As of version 1.2.0 this method is deprecated and will be removed in version 1.2.5. Hides the button's borders.
Function ng.Button.show_borders () vs. 1.1.0 Full+Lite. Deprecated in vs 1.2.0
As of version 1.2.0 this method is deprecated and will be removed in version 1.2.5. Shows the button's border.
Function ng.Button.hide_top () vs. 1.1.0 Full+Lite. Deprecated in vs 1.2.0
As of version 1.2.0 this method is deprecated and will be removed in version 1.2.5. Hides the button's top border.
Function ng.Button.show_top () vs. 1.1.0 Full+Lite. Deprecated in vs 1.2.0
As of version 1.2.0 this method is deprecated and will be removed in version 1.2.5. Shows the button's top border.
Function ng.Button.hide_bottom () vs. 1.1.0 Full+Lite. Deprecated in vs 1.2.0
As of version 1.2.0 this method is deprecated and will be removed in version 1.2.5. Hides the border's bottom border.
Function ng.Button.show_bottom () vs. 1.1.0 Full+Lite. Deprecated in vs 1.2.0
As of version 1.2.0 this method is deprecated and will be removed in version 1.2.5. Shows the button's bottom border.
Function ng.Button.hide_left () vs. 1.1.0 Full+Lite. Deprecated in vs 1.2.0
As of version 1.2.0 this method is deprecated and will be removed in version 1.2.5. Hides the button's left border.
Function ng.Button.show_left () vs. 1.1.0 Full+Lite. Deprecated in vs 1.2.0
As of version 1.2.0 this method is deprecated and will be removed in version 1.2.5. Shows the button's left border.
Function ng.Button.hide_right () vs. 1.1.0 Full+Lite. Deprecated in vs 1.2.0
As of version 1.2.0 this method is deprecated and will be removed in version 1.2.5. Hides the button's right border.
Function ng.Button.show_right () vs. 1.1.0 Full+Lite. Deprecated in vs 1.2.0
As of version 1.2.0 this method is deprecated and will be removed in version 1.2.5. Shows the button's right border.
Function ng.Button.set_count () vs. 1.2.0 Full+Lite
Set the count value of the button.
Function ng.Button.get_count () vs. 1.2.0 Full+Lite
Get the button count value.
Function ng.Button.set_link () vs. 1.2.0 Full+Lite
Set the button URL if the button is used as a link.
Function ng.Button.get_link () vs. 1.2.0 Full+Lite
Get the URL for the button if it's a link.

Custom Events

In the events' functions, the this will refer to the class object.
Event onFocus vs. 1.1.0 Full+Lite
Fires when the button receives focus.
Event onBlur vs. 1.1.0 Full+Lite
Fires when the button loses focus.
Event onClick vs. 1.1.0 Full+Lite
Fires when the button is clicked.
Event onMouseEnter vs. 1.1.0 Full+Lite
Fires when the mouse moves over a button. This event will only be fired once when the mouse enters the button.
Event onMouseLeave vs. 1.1.0 Full+Lite
Fires when the mouse leaves the button. This event will only be fired once when the mouse leaves the button.
Event onMouseDown vs. 1.1.0 Full+Lite
Fires when the mouse is down over the button.
Event onMouseUp vs. 1.1.0 Full+Lite
Fires when the mouse is up over the button.
Event onEnable vs. 1.1.0 Full+Lite
Fires when the button is enabled.
Event onDisable vs. 1.1.0 Full+Lite
Fires when the button is disabled.
Event onCheck vs. 1.1.0 Full+Lite
Fires when the button is checked.
Event onUnCheck vs. 1.1.0 Full+Lite
Fires when the button is unchecked.

ng.Events () Methods

Some of these methods might be overriden by the inheriting class.
Function ng.Events.add_event (evt, func) vs. 1.1.0 Full+Lite
The add_event method will attach an event listener to an object. When the event is fired, the listeners functions will be executed on last added first run approach.
Function ng.Events.add_events (obj) vs. 1.1.0 Full+Lite
This method works the same way as Events.add_event(evt, func) except it takes an object with a list of events and functions.
Function ng.Events.remove_event (evt, func) vs. 1.1.0 Full+Lite
Remove the function func from the event evt queue. When adding the event, you should add the function by reference. Anonymous functions cannot be removed.
Function ng.Events.remove_events (obj) vs. 1.1.0 Full+Lite
This method works the same way as Events.remove_event(evt, func) except it takes an object with a list of events and functions.
Function ng.Events.clear_events (evt) vs. 1.1.0 Full+Lite
Remove all the functions under the event name evt.
Function ng.Events.clear_all_events () vs. 1.1.0 Full+Lite
This function works the same way Events.clear_events(evt) except it removes all the events attached to the object.
Function ng.Events.fire_event (evt_nm, args, evt) vs. 1.1.0 Full+Lite
Executes all the functions in the event evt_nm queue. Functions are executed in lasted added first exectued order.

ng.PlugIn (options) Methods

Some of these methods might be overriden by the inheriting class.
Function ng.PlugIn.get_position () vs. 1.1.0 Full+Lite
Get the plugin holding object position.
Function ng.PlugIn.get_width () vs. 1.1.0 Full+Lite
Get the ng.PlugIn holding object width.
Function ng.PlugIn.get_heigh () vs. 1.1.0 Full+Lite
Get the ng.PlugIn holding object height.
Function ng.PlugIn.set_object (obj) vs. 1.1.0 Full+Lite
Sets the ng.PlugIn holding HTML Element. The HTML Element should hold all the output and handles any events.
Function ng.PlugIn.get_object () vs. 1.1.0 Full+Lite
Gets the HTML Elements that holds the ng.PlugIn output.
Function ng.PlugIn.make_id (txt) vs. 1.1.0 Full+Lite
Creates a unique id for the ng.PlugIn object.
Function ng.PlugIn.get_id () vs. 1.1.0 Full+Lite
Get's the plugin ID.
Function ng.PlugIn.set_language (lang) vs. 1.1.0 Full+Lite
Sets the plugin language and reset the HTML Element direction based on the language.
Function ng.PlugIn.get_language () vs. 1.1.0 Full+Lite
Gets the plugin language.
Function ng.PlugIn.remove () vs. 1.1.0 Full+Lite
Removes the plugin and all it's properties. This method will also remove any HTML Elements that are associated with the plugin.
Function ng.PlugIn.create_options (options, default) vs. 1.1.2 Full+Lite
Create the initial options for the plugin. This method doesn not alter the plugin variables, but return an object that can be assigned to a variable in the plugin.
Function ng.PlugIn.create_events () vs. 1.1.2 Full+Lite
Create the plugin events from the customized option. This method should be called after ng.PlugIn.create_options.
Function ng.PlugIn.get (prop) vs. 1.2.2 Full+Lite
Gets the plugin property. This method will check if there is a getter function for the plugin and return it's value, otherwise it'll return the raw property. This method is useful for getting custom properties.
Function ng.PlugIn.set (prop, value) vs. 1.2.2 Full+Lite
Sets the plugin property. This method will check if there is a setter method for the plugin and call it. Otherwise, it will set the raw property value.This method is useful for setting custom properties.

ng.PlugIn (options) Custom Events

In the events' functions, the this will refer to the class object.
Event onBeforeRemove vs. 1.2.2 Full+Lite
This event will fire right before the plugin (or any object that inherit it, e.g. components) is removed.

API Menu