Class RapidContext.Widget.Icon

Extends: RapidContext.Widget

The icon widget class. Used to provide a small clickable image, using the <i> HTML element. The icons can be either image- or font-based, causing slightly different behaviors with respect to size. A number of predefined icons suitable for different actions are available (using the Font-Awesome icon font).

Source code: RapidContext_Widget_Icon.js

Class Summary
 
Creates a new icon widget.
Field Summary
 
ADD
The add icon definition.
 
The application icon definition.
 
The application terminal icon definition.
 
The asterisk icon definition.
 
The attach file icon definition.
 
The automatic icon definition.
 
The bar chart icon definition.
 
The blank icon definition.
 
The book icon definition.
 
The open book icon definition.
 
The calculator icon definition.
 
The calendar icon definition.
 
The cancel icon definition.
 
The clock icon definition.
 
The close icon definition.
 
The close active icon definition.
 
The blue close icon definition.
 
The bluewhite close icon definition.
 
The close (inverse video) icon definition.
 
The color icon definition.
 
The comment icon definition.
 
The comments icon definition.
 
The component icon definition.
 
The components icon definition.
 
The configure icon definition.
 
The contact icon definition.
 
The copy icon definition.
 
CSS
The CSS icon definition.
 
The curve chart icon definition.
 
CUT
The cut icon definition.
 
The database icon definition.
 
The date icon definition.
 
The default icon definition, inherited by all others.
 
The delay icon definition.
 
The delete icon definition.
 
The dialog icon definition.
 
The disk icon definition.
 
The document icon definition.
 
The code document icon definition.
 
The Excel document icon definition.
 
The Office document icon definition.
 
The PDF document icon definition.
 
The document search icon definition.
 
The text document icon definition.
 
The Word document icon definition.
 
The down icon definition.
 
The network drive icon definition.
 
The edit icon definition.
 
The layout edit icon definition.
 
The white edit icon definition.
 
The email icon definition.
 
The error icon definition.
 
The expand icon definition.
 
The export icon definition.
 
The web feed icon definition.
 
The first icon definition.
 
The flag icon definition.
 
The blue flag icon definition.
 
The green flag icon definition.
 
The red flag icon definition.
 
The yellow flag icon definition.
 
The folder icon definition.
 
The add folder icon definition.
 
The font icon definition.
 
The group icon definition.
 
The help icon definition.
 
The home icon definition.
 
The HTML icon definition.
 
The HTML source icon definition.
 
The image icon definition.
 
The information icon definition.
 
KEY
The key icon definition.
 
The keyboard icon definition.
 
The last icon definition.
 
The layout icon definition.
 
The left icon definition.
 
The like icon definition.
 
The line chart icon definition.
 
The loading icon definition.
 
The lock icon definition.
 
The minus icon definition.
 
The monitor icon definition.
 
The next icon definition.
 
NO
The no icon definition.
 
The note icon definition.
 
OK
The ok icon definition.
 
The options icon definition.
 
The organization chart icon definition.
 
The package icon definition.
 
The phone icon definition.
 
The mobile phone icon definition.
 
The pie chart icon definition.
 
The plug-in icon definition.
 
The add plug-in icon definition.
 
The plug-in error icon definition.
 
The inactive plug-in icon definition.
 
The remove plug-in icon definition.
 
The plus icon definition.
 
The previous icon definition.
 
The printer icon definition.
 
The reload icon definition.
 
The remove icon definition.
 
The resize icon definition.
 
The right icon definition.
 
RSS
The RSS icon definition.
 
The script icon definition.
 
The search icon definition.
 
The select icon definition.
 
The server icon definition.
 
The stop icon definition.
 
The style icon definition.
 
SUM
The sum icon definition.
 
The table icon definition.
 
TAG
The tag icon definition.
 
The blue tag icon definition.
 
The green tag icon definition.
 
The red tag icon definition.
 
The yellow tag icon definition.
 
The textfield icon definition.
 
The text format icon definition.
 
UP
The up icon definition.
 
The user icon definition.
 
The vector icon definition.
 
The warning icon definition.
 
The XHTML icon definition.
 
YES
The yes icon definition.
Method Summary
 
setAttrs(attrs)
Updates the icon or HTML DOM node attributes.
Methods borrowed from class RapidContext.Widget:
addAll, addChildNode, addClass, animate, blurAll, destroy, disable, enable, getChildNodes, hasClass, hide, isDisabled, isHidden, removeAll, removeChildNode, removeClass, setStyle, show, toggleClass, uid
Event Summary
 
Emitted when the icon has been clicked.
Class Detail
RapidContext.Widget.Icon(attrs)
Creates a new icon widget.
JavaScript:
var style = { "margin-left": "3px" };
var dataReload = RapidContext.Widget.Icon({ ref: "RELOAD", style: style });
var dataLoading = RapidContext.Widget.Icon({ ref: "LOADING", hidden: true, style: style });
var h3 = MochiKit.DOM.H3({}, "Data List:", dataReload, dataLoading);
User Interface XML:
<h3>
  Data List:
  <Icon id="dataReload" ref="RELOAD" style="margin-left: 3px;" />
  <Icon id="dataLoading" ref="LOADING" hidden="true" style="margin-left: 3px;" />
</h3>
Parameters:
{Object} attrs
the widget and node attributes to set
{String} attrs.ref Optional
the predefined icon name (reference)
{String} attrs.class Optional
the icon CSS class names
{String} attrs.url Optional
the icon image URL
{String} attrs.position Optional
the icon image position
{Number} attrs.width Optional
the icon width (in pixels)
{Number} attrs.height Optional
the icon height (in pixels)
{String} attrs.tooltip Optional
the icon tooltip text
{Boolean} attrs.disabled Optional
the disabled widget flag, defaults to false
{Boolean} attrs.hidden Optional
the hidden widget flag, defaults to false
Returns:
{Widget} the widget DOM node
Field Detail
DEFAULT
The default icon definition, inherited by all others.

BLANK
The blank icon definition.

LOADING
The loading icon definition.

CLOSE
The close icon definition.

CLOSE_INVERSE
The close (inverse video) icon definition.

CLOSE_ACTIVE
The close active icon definition.

CLOSE_BLUEWHITE
The bluewhite close icon definition.

CLOSE_BLUE
The blue close icon definition.

RESIZE
The resize icon definition.

OK
The ok icon definition.

STOP
The stop icon definition.

YES
The yes icon definition.

NO
The no icon definition.

CANCEL
The cancel icon definition.

UP
The up icon definition.

DOWN
The down icon definition.

LEFT
The left icon definition.

The right icon definition.

FIRST
The first icon definition.

LAST
The last icon definition.

The previous icon definition.

The next icon definition.

PLUS
The plus icon definition.

MINUS
The minus icon definition.

REMOVE
The remove icon definition.

ADD
The add icon definition.

COPY
The copy icon definition.

CUT
The cut icon definition.

DELETE
The delete icon definition.

RELOAD
The reload icon definition.

EDIT
The edit icon definition.

EDIT_WHITE
The white edit icon definition.

EDIT_LAYOUT
The layout edit icon definition.

The search icon definition.

EXPAND
The expand icon definition.

ASTERISK
The asterisk icon definition.

SELECT
The select icon definition.

LIKE
The like icon definition.

FLAG
The flag icon definition.

FLAG_RED
The red flag icon definition.

FLAG_BLUE
The blue flag icon definition.

FLAG_GREEN
The green flag icon definition.

FLAG_YELLOW
The yellow flag icon definition.

TAG
The tag icon definition.

TAG_RED
The red tag icon definition.

TAG_BLUE
The blue tag icon definition.

TAG_GREEN
The green tag icon definition.

TAG_YELLOW
The yellow tag icon definition.

OPTIONS
The options icon definition.

CONFIG
The configure icon definition.

ATTACH
The attach file icon definition.

AUTOMATIC
The automatic icon definition.

EXPORT
The export icon definition.

INFO
The information icon definition.

HELP
The help icon definition.

WARNING
The warning icon definition.

ERROR
The error icon definition.

BARCHART
The bar chart icon definition.

LINECHART
The line chart icon definition.

CURVECHART
The curve chart icon definition.

PIECHART
The pie chart icon definition.

ORGCHART
The organization chart icon definition.

FEED
The web feed icon definition.

RSS
The RSS icon definition.

CSS
The CSS icon definition.

HTML
The HTML icon definition.

XHTML
The XHTML icon definition.

FONT
The font icon definition.

STYLE
The style icon definition.

TEXT_FORMAT
The text format icon definition.

CALENDAR
The calendar icon definition.

DATE
The date icon definition.

LAYOUT
The layout icon definition.

TABLE
The table icon definition.

SUM
The sum icon definition.

VECTOR
The vector icon definition.

COLOR
The color icon definition.

HTML_SOURCE
The HTML source icon definition.

PLUGIN
The plug-in icon definition.

PLUGIN_ADD
The add plug-in icon definition.

PLUGIN_REMOVE
The remove plug-in icon definition.

PLUGIN_INACTIVE
The inactive plug-in icon definition.

PLUGIN_ERROR
The plug-in error icon definition.

USER
The user icon definition.

GROUP
The group icon definition.

FOLDER
The folder icon definition.

FOLDER_ADD
The add folder icon definition.

LOCK
The lock icon definition.

KEY
The key icon definition.

DOCUMENT
The document icon definition.

DOCUMENT_WORD
The Word document icon definition.

DOCUMENT_EXCEL
The Excel document icon definition.

DOCUMENT_OFFICE
The Office document icon definition.

DOCUMENT_PDF
The PDF document icon definition.

The document search icon definition.

DOCUMENT_CODE
The code document icon definition.

DOCUMENT_TEXT
The text document icon definition.

CONTACT
The contact icon definition.

PHONE
The phone icon definition.

PHONE_MOBILE
The mobile phone icon definition.

COMMENT
The comment icon definition.

COMMENTS
The comments icon definition.

NOTE
The note icon definition.

APPLICATION
The application icon definition.

APPLICATION_TERMINAL
The application terminal icon definition.

DIALOG
The dialog icon definition.

SCRIPT
The script icon definition.

COMPONENT
The component icon definition.

COMPONENTS
The components icon definition.

PACKAGE
The package icon definition.

TEXTFIELD
The textfield icon definition.

DRIVE_NETWORK
The network drive icon definition.

MONITOR
The monitor icon definition.

KEYBOARD
The keyboard icon definition.

PRINTER
The printer icon definition.

SERVER
The server icon definition.

DISK
The disk icon definition.

DATABASE
The database icon definition.

EMAIL
The email icon definition.

IMAGE
The image icon definition.

CALCULATOR
The calculator icon definition.

HOME
The home icon definition.

BOOK
The book icon definition.

BOOK_OPEN
The open book icon definition.

CLOCK
The clock icon definition.

DELAY
The delay icon definition.
Method Detail
setAttrs(attrs)
Updates the icon or HTML DOM node attributes.
Parameters:
{Object} attrs
the widget and node attributes to set
{String} attrs.ref Optional
the predefined icon name (reference)
{String} attrs.class Optional
the icon CSS class names
{String} attrs.url Optional
the icon image URL
{String} attrs.position Optional
the icon image position
{Number} attrs.width Optional
the icon width (in pixels)
{Number} attrs.height Optional
the icon height (in pixels)
{String} attrs.tooltip Optional
the icon tooltip text
{Boolean} attrs.disabled Optional
the disabled widget flag
{Boolean} attrs.hidden Optional
the hidden widget flag
Event Detail
onclick()
Emitted when the icon has been clicked. This is a standard DOM event.