Constructor
new Icon(def) → {Widget}
Creates a new icon widget.
- Parameters:
-
Name Type Description def
{string|Object|Node} the icon ref, class, attributes or DOM node Properties
Name Type Attributes Description ref
{string} <optional>
the predefined icon name (reference) class
{string} <optional>
the icon CSS class names url
{string} <optional>
the icon image URL position
{string} <optional>
the icon image position width
{number} <optional>
the icon width (in pixels) height
{number} <optional>
the icon height (in pixels) tooltip
{string} <optional>
the icon tooltip text disabled
{boolean} <optional>
the disabled widget flag, defaults to false hidden
{boolean} <optional>
the hidden widget flag, defaults to false - Returns:
- {Widget} the widget DOM node
- Examples:
-
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>
- Source:
- RapidContext_Widget_Icon.js, line 59
Extends
Members
(static) ADD
The add icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 264
(static) APPLICATION
The application icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 654
(static) APPLICATION_TERMINAL
The application terminal icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 659
(static) ASTERISK
The asterisk icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 314
(static) ATTACH
The attach file icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 389
(static) AUTOMATIC
The automatic icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 394
(static) BARCHART
The bar chart icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 424
(static) BLANK
The blank icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 144
(static) BOOK
The book icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 749
(static) BOOK_OPEN
The open book icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 754
(static) CALCULATOR
The calculator icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 739
(static) CALENDAR
The calendar icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 489
(static) CANCEL
The cancel icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 204
(static) CLOCK
The clock icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 759
(static) CLOSE
The close icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 154
(static) CLOSE_ACTIVE
The close active icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 164
(static) CLOSE_BLUE
The blue close icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 174
(static) CLOSE_BLUEWHITE
The bluewhite close icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 169
(static) CLOSE_INVERSE
The close (inverse video) icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 159
(static) COLOR
The color icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 519
(static) COMMENT
The comment icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 639
(static) COMMENTS
The comments icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 644
(static) COMPONENT
The component icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 674
(static) COMPONENTS
The components icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 679
(static) CONFIG
The configure icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 384
(static) CONTACT
The contact icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 624
(static) COPY
The copy icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 269
(static) CSS
The CSS icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 459
(static) CURVECHART
The curve chart icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 434
(static) CUT
The cut icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 274
(static) DATABASE
The database icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 724
(static) DATE
The date icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 494
(static) DEFAULT
The default icon definition, inherited by all others.
- Source:
- RapidContext_Widget_Icon.js, line 139
(static) DELAY
The delay icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 764
(static) DELETE
The delete icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 279
(static) DIALOG
The dialog icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 664
(static) DISK
The disk icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 719
(static) DOCUMENT
The document icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 584
(static) DOCUMENT_CODE
The code document icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 614
(static) DOCUMENT_EXCEL
The Excel document icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 594
(static) DOCUMENT_OFFICE
The Office document icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 599
(static) DOCUMENT_PDF
The PDF document icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 604
(static) DOCUMENT_SEARCH
The document search icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 609
(static) DOCUMENT_TEXT
The text document icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 619
(static) DOCUMENT_WORD
The Word document icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 589
(static) DOWN
The down icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 214
(static) DRIVE_NETWORK
The network drive icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 694
(static) EDIT
The edit icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 289
(static) EDIT_LAYOUT
The layout edit icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 299
(static) EDIT_WHITE
The white edit icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 294
(static) EMAIL
The email icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 729
(static) ERROR
The error icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 419
(static) EXPAND
The expand icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 309
(static) EXPORT
The export icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 399
(static) FEED
The web feed icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 449
(static) FIRST
The first icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 229
(static) FLAG
The flag icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 329
(static) FLAG_BLUE
The blue flag icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 339
(static) FLAG_GREEN
The green flag icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 344
(static) FLAG_RED
The red flag icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 334
(static) FLAG_YELLOW
The yellow flag icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 349
(static) FOLDER
The folder icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 564
(static) FOLDER_ADD
The add folder icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 569
(static) FONT
The font icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 474
(static) GROUP
The group icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 559
(static) HELP
The help icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 409
(static) HOME
The home icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 744
(static) HTML
The HTML icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 464
(static) HTML_SOURCE
The HTML source icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 524
(static) IMAGE
The image icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 734
(static) INFO
The information icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 404
(static) KEY
The key icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 579
(static) KEYBOARD
The keyboard icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 704
(static) LAST
The last icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 234
(static) LAYOUT
The layout icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 499
(static) LEFT
The left icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 219
(static) LIKE
The like icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 324
(static) LINECHART
The line chart icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 429
(static) LOADING
The loading icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 149
(static) LOCK
The lock icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 574
(static) MINUS
The minus icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 254
(static) MONITOR
The monitor icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 699
(static) NEXT
The next icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 244
(static) NO
The no icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 199
(static) NOTE
The note icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 649
(static) OK
The ok icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 184
(static) OPTIONS
The options icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 379
(static) ORGCHART
The organization chart icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 444
(static) PACKAGE
The package icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 684
(static) PHONE
The phone icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 629
(static) PHONE_MOBILE
The mobile phone icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 634
(static) PIECHART
The pie chart icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 439
(static) PLUGIN
The plug-in icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 529
(static) PLUGIN_ADD
The add plug-in icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 534
(static) PLUGIN_ERROR
The plug-in error icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 549
(static) PLUGIN_INACTIVE
The inactive plug-in icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 544
(static) PLUGIN_REMOVE
The remove plug-in icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 539
(static) PLUS
The plus icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 249
(static) PREVIOUS
The previous icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 239
(static) PRINTER
The printer icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 709
(static) RELOAD
The reload icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 284
(static) REMOVE
The remove icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 259
(static) RESIZE
The resize icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 179
(static) RIGHT
The right icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 224
(static) RSS
The RSS icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 454
(static) SCRIPT
The script icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 669
(static) SEARCH
The search icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 304
(static) SELECT
The select icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 319
(static) SERVER
The server icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 714
(static) STOP
The stop icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 189
(static) STYLE
The style icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 479
(static) SUM
The sum icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 509
(static) TABLE
The table icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 504
(static) TAG
The tag icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 354
(static) TAG_BLUE
The blue tag icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 364
(static) TAG_GREEN
The green tag icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 369
(static) TAG_RED
The red tag icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 359
(static) TAG_YELLOW
The yellow tag icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 374
(static) TEXTFIELD
The textfield icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 689
(static) TEXT_FORMAT
The text format icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 484
(static) UP
The up icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 209
(static) USER
The user icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 554
(static) VECTOR
The vector icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 514
(static) WARNING
The warning icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 414
(static) XHTML
The XHTML icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 469
(static) YES
The yes icon definition.
- Source:
- RapidContext_Widget_Icon.js, line 194
Methods
addAll(…child)
Adds one or more children to this widget. This method will flatten any
arrays among the arguments and ignores any null
or undefined
arguments.
Any DOM nodes or widgets will be added to the end, and other objects will be
converted to a text node first. Subclasses should normally override the
addChildNode()
method instead of this one, since that is the basis for
DOM node insertion.
- Parameters:
-
Name Type Attributes Description child
{string|Node|Array} <repeatable>
the children to add - Inherited From:
- RapidContext.Widget#addAll
- Source:
- RapidContext_Widget.js, line 570
addChildNode(child)
Adds a single child DOM node to this widget. This method is sometimes overridden by child widgets in order to hide or control intermediate DOM nodes required by the widget.
- Parameters:
-
Name Type Description child
{Widget|Node} the DOM node to add - Inherited From:
- RapidContext.Widget#addChildNode
- Source:
- RapidContext_Widget.js, line 534
addClass(…cls)
Adds the specified CSS class names to this HTML DOM node.
- Parameters:
-
Name Type Attributes Description cls
{string|Array} <repeatable>
the CSS class names to add - Inherited From:
- RapidContext.Widget#addClass
- Source:
- RapidContext_Widget.js, line 333
animate(opts)
Performs a visual effect animation on this widget. This is
implemented using the MochiKit.Visual
effect package. All options
sent to this function will be passed on to the appropriate
MochiKit.Visual
function.
- Parameters:
-
Name Type Description opts
{Object} the visual effect options Properties
Name Type Description effect
{string} the MochiKit.Visual effect name queue
{string} the MochiKit.Visual queue handling, defaults to "replace" and a unique scope for each widget (see MochiKit.Visual
for full options) - Inherited From:
- RapidContext.Widget#animate
- Deprecated:
- Use CSS animations instead.
- Example:
-
widget.animate({ effect: "fade", duration: 0.5 }); widget.animate({ effect: "Move", transition: "spring", y: 300 });
- Source:
- RapidContext_Widget.js, line 492
blurAll()
Blurs (unfocuses) this DOM node and all relevant child nodes. This function
will recursively blur all <a>
, <button>
, <input>
, <textarea>
and
<select>
child nodes found.
- Inherited From:
- RapidContext.Widget#blurAll
- Source:
- RapidContext_Widget.js, line 510
destroy()
The internal widget destructor function. This method should only
be called by destroyWidget()
and may be overridden by subclasses.
By default this method does nothing.
- Inherited From:
- RapidContext.Widget#destroy
- Source:
- RapidContext_Widget.js, line 194
disable()
Disables this widget if it was previously enabled. This method is
equivalent to calling setAttrs({ disabled: true })
.
- Inherited From:
- RapidContext.Widget#disable
- Source:
- RapidContext_Widget.js, line 424
enable()
Enables this widget if it was previously disabled. This is
equivalent to calling setAttrs({ disabled: false })
.
- Inherited From:
- RapidContext.Widget#enable
- Source:
- RapidContext_Widget.js, line 416
getChildNodes() → {Array}
Returns an array with all child DOM nodes. Note that the array is
a real JavaScript array, not a dynamic NodeList
. This method is
sometimes overridden by child widgets in order to hide
intermediate DOM nodes required by the widget.
- Returns:
- {Array} the array of child DOM nodes
- Inherited From:
- RapidContext.Widget#getChildNodes
- Source:
- RapidContext_Widget.js, line 522
hasClass(…cls) → {boolean}
Checks if this HTML DOM node has the specified CSS class names. Note that more than one CSS class name may be checked, in which case all must be present.
- Parameters:
-
Name Type Attributes Description cls
{string|Array} <repeatable>
the CSS class names to check - Returns:
-
{boolean}
true
if all CSS classes were present, orfalse
otherwise - Inherited From:
- RapidContext.Widget#hasClass
- Source:
- RapidContext_Widget.js, line 315
hide()
Hides this widget node if it was previously visible. This method
is equivalent to calling setAttrs({ hidden: true })
. It is safe
for all types of widgets, since it only adds the widgetHidden
CSS class instead of setting the display
style property.
- Inherited From:
- RapidContext.Widget#hide
- Source:
- RapidContext_Widget.js, line 470
isDisabled() → {boolean}
Checks if this widget is disabled. This method checks both the
"widgetDisabled" CSS class and the disabled
property. Changes
to the disabled status can be made with enable()
, disable()
or
setAttrs()
.
- Returns:
-
{boolean}
true
if the widget is disabled, orfalse
otherwise - Inherited From:
- RapidContext.Widget#isDisabled
- Source:
- RapidContext_Widget.js, line 395
isHidden() → {boolean}
Checks if this widget node is hidden. This method checks for the
existence of the widgetHidden
CSS class. It does NOT check the
actual widget visibility (the display
style property set by
animations for example).
- Returns:
-
{boolean}
true
if the widget is hidden, orfalse
otherwise - Inherited From:
- RapidContext.Widget#isHidden
- Source:
- RapidContext_Widget.js, line 437
removeAll()
Removes all children to this widget. This method will also destroy and child
widgets and disconnect all signal listeners. This method uses the
getChildNodes()
and removeChildNode()
methods to find and remove the
individual child nodes.
- Inherited From:
- RapidContext.Widget#removeAll
- Source:
- RapidContext_Widget.js, line 582
removeChildNode(child)
Removes a single child DOM node from this widget. This method is sometimes overridden by child widgets in order to hide or control intermediate DOM nodes required by the widget.
Note that this method will NOT destroy the removed child widget, so care must be taken to ensure proper child widget destruction.
- Parameters:
-
Name Type Description child
{Widget|Node} the DOM node to remove - Inherited From:
- RapidContext.Widget#removeChildNode
- Source:
- RapidContext_Widget.js, line 553
removeClass(…cls)
Removes the specified CSS class names from this HTML DOM node. Note that this method will not remove any class starting with "widget".
- Parameters:
-
Name Type Attributes Description cls
{string|Array} <repeatable>
the CSS class names to remove - Inherited From:
- RapidContext.Widget#removeClass
- Source:
- RapidContext_Widget.js, line 353
setAttrs(attrs)
Updates the icon or HTML DOM node attributes.
- Parameters:
-
Name Type Description attrs
{string|Object} the icon ref, class or attributes to set Properties
Name Type Attributes Description ref
{string} <optional>
the predefined icon name (reference) class
{string} <optional>
the icon CSS class names url
{string} <optional>
the icon image URL position
{string} <optional>
the icon image position width
{number} <optional>
the icon width (in pixels) height
{number} <optional>
the icon height (in pixels) tooltip
{string} <optional>
the icon tooltip text disabled
{boolean} <optional>
the disabled widget flag hidden
{boolean} <optional>
the hidden widget flag - Overrides:
- RapidContext.Widget#setAttrs
- Source:
- RapidContext_Widget_Icon.js, line 95
setStyle(styles)
Updates the CSS styles of this HTML DOM node. This method is
identical to MochiKit.Style.setStyle
, but uses "this" as the
first argument.
- Parameters:
-
Name Type Description styles
{Object} an object with the styles to set - Inherited From:
- RapidContext.Widget#setStyle
- Example:
-
widget.setStyle({ "font-size": "bold", "color": "red" });
- Source:
- RapidContext_Widget.js, line 294
show()
Shows this widget node if it was previously hidden. This method is
equivalent to calling setAttrs({ hidden: false })
. It is safe
for all types of widgets, since it only removes the widgetHidden
CSS class instead of setting the display
style property.
- Inherited From:
- RapidContext.Widget#show
- Source:
- RapidContext_Widget.js, line 460
toggleClass(…cls) → {boolean}
Toggles adding and removing the specified CSS class names to and from this HTML DOM node. If all the CSS classes are already set, they will be removed. Otherwise they will be added.
- Parameters:
-
Name Type Attributes Description cls
{string|Array} <repeatable>
the CSS class names to remove - Returns:
-
{boolean}
true
if the CSS classes were added, orfalse
otherwise - Inherited From:
- RapidContext.Widget#toggleClass
- Source:
- RapidContext_Widget.js, line 376
uid() → {string}
Returns the unique identifier for this DOM node. If a node id has already been set, that id will be returned. Otherwise a new id will be generated and assigned to the widget DOM node.
- Returns:
- {string} the the unique DOM node identifier
- Inherited From:
- RapidContext.Widget#uid
- Source:
- RapidContext_Widget.js, line 182