Basic functions

From PhiWiki
(Redirected from PhiItem class)
Jump to: navigation, search

Phi item API (application programming interface)

The following functions and event handler are available for all items:

Basic functions
Positioning Animation Transformation Display
.x() .fadeIn() .rotateX() .cursor()
.y() .fadeOut() .rotateY() .disabled()
.left() .rotate() .rotateZ() .opacity()
.top() .moveBy() .rotateToX() .hide()
.width() .moveTo() .rotateToY() .show()
.height() .rotateIn() .rotateToZ() .visible()
.pos() .rotateOut() .scale() .toggle()
.zIndex() .slide() .scaleTo() .title()
.tabIndex() .stop() .$() .wid()
Basic event handler
Button Mouse Key Misc Custom
.click() .mouseover() .keydown() .focus() .on()
.dblclick() .mouseout() .keyup() .blur() .off()
.mousedown() .mousemove() .keypress() .drop() .one()
.mouseup() .trigger()

All write functions return a reference to the object itself, so functions can be cascaded:

$('id').color('blue').bgColor('#FFFFCC').text('new item text');

Server

For versions prior v2.0.0 you need to add loadModule('wrapper'); in the top section of your Serverscript.pngServerScript file - since v2.0.0 the API is an integral part of Phi and always included. This API is not available for Serverscript.pngServerScript prior version v1.5.0.

Client

For Javascript.pngJavaScript the item API is available since v1.3.0.

Positioning

.x() .y() .left() .top() .width() .height() .pos() .zIndex() .tabIndex()

.x()


Synopsis

.x([xpos])
Returns (read): Number
Environment: ServerScriptOk.png JavaScriptOk.png
Available since: v2.0.0 v2.0.0
Brief description: Logical x-coordinate of the item
Attribute Type Default Note
xpos Number logical x-coordinate

Overview

Description

Read: returns the logical x-coordinate of the item. This is not necessarily the same as .left(): i.e. if the item has a border or a shadow the item has an offset which will be respected by this function. For repositioning and animations you should use this function. If you need the absolute position use .left().

Write: sets the x-coordinate of the item.

Note: child items in Layouts are counted relative to the top left corner of their parent position.

See also: .y(), .left(), .top(), .moveTo(), .moveBy().

Example

var x=$('id').x(); // read
$('id').x(120); // write: set the x-coordinate to 120

.y()


Synopsis

.y([ypos])
Returns (read): Number
Environment: ServerScriptOk.png JavaScriptOk.png
Available since: v2.0.0 v2.0.0
Brief description: Logical y-coordinate of the item
Attribute Type Default Note
ypos Number logical y-coordinate

Overview

Description

Read: returns the logical y-coordinate of the item. This is not necessarily the same as .top(): i.e. if the item has a border or a graphical effect the item has an offset which will be respected by this function. For repositioning and animations you should use this function. If you need the absolute position use .top().

Write: sets the y-coordinate of the item.

Note: child items in Layouts are counted relative to the top left corner of their parent position.

See also: .x(), .left(), .top(), .moveTo(), .moveBy().

Example

var ypos=$('id').y(); // read
$('id').y(ypos+20); // write: adds 20px to the current y-coordinate

.left()


Synopsis

.left([xpos])
Returns (read): Number
Environment: ServerScriptOk.png JavaScriptOk.png
Available since: v1.5.0 v1.3.0
Brief description: Absolute x-coordinate of the item
Attribute Type Default Note
xpos Number absolute x-coordinate

Overview

Description

Read: returns the absolute x-coordinate of the item. This is not necessarily the same as .x(): i.e. a border or a graphical effect will be ignored by this function. For repositioning and animations you should use .x().

Write: sets the x-coordinate of the item.

Note: child items in Layouts are counted relative to the top left corner of their parent position.

See also: .x(), .y(), .top(), .moveTo(), .moveBy().

Example

var xpos=$('id').left(); // read
$('id').left(xpos+120); // write: moves item 120px to the right

.top()


Synopsis

.top([ypos])
Returns (read): Number
Environment: ServerScriptOk.png JavaScriptOk.png
Available since: v1.5.0 v1.3.0
Brief description: Absolute y-coordinate of the item
Attribute Type Default Note
ypos Number absolute y-coordinate

Overview

Description

Read: returns the absolute y-coordinate of the item. This is not necessarily the same as .y(): i.e. a border or a graphical effect will be ignored by this function. For repositioning and animations you should use .y().

Write: sets the y-coordinate of the item.

Note: child items in Layouts are counted relative to the top left corner of their parent position.

See also: .x(), .y(), .left(), .moveTo(), .moveBy().

Example

var ypos=$('id').top(); // read
$('id').top(120); // write: changes y-coordinate to 120px from the top - graphical effects are ignored

.width()


Synopsis

.width([w])
Returns (read): Number
Environment: ServerScriptOk.png JavaScriptOk.png
Available since: v1.5.0 v1.3.0
Brief description: Logical width of the item.
Attribute Type Default Note
w Number logical width

Overview

Description

Read: returns the logical width of the item. This is not necessarily the exact width: i.e. if the item has a border or a graphical effect it may have an offset which will be respected by this function.

Write: sets the logical width of the item.

Note: not all items support changing the width.

See also: .x(), .y(), .left(), .top(), .height(), .pos(), .moveBy().

Example

var w=$('id').width(); // read
$('id').width(120); // write - set the width to 120px

.height()


Synopsis

.height([w])
Returns (read): Number
Environment: ServerScriptOk.png JavaScriptOk.png
Available since: v1.5.0 v1.3.0
Brief description: Logical heightof the item.
Attribute Type Default Note
w Number logical width

Overview

Description

Read: returns the logical height of the item. This is not necessarily the exact height: i.e. if the item has a border or a graphical effect it may have an offset which will be respected by this function.

Write: sets the logical height of the item.

Note: not all items support changing the height.

See also: .x(), .y(), .left(), .top(), .width(), .pos(), .moveBy().

Example

var h=$('id').height(); // read
$('id').height(20); // write - set the height to 20px

.pos()


Synopsis

.pos([x,y])
Returns (read): Object
Environment: ServerScriptOk.png JavaScriptOk.png
Available since: v1.5.0 v1.3.0
Brief description: Changes the item position.
Attribute Type Default Note
x Number logical x-coordinate
y Number logical y-coordinate

Overview

Description

Short hand for getting or setting the item position relative to the document. If an item has e.g. a graphical effect or needs an offset the absolute and logical coordinates probably differ.

Read: returns an object o with the following properties:

  • o.left - absolute x-coordinate
  • o.top - absolute y-coordinate
  • o.x - logical x-coordinate v2.0.0
  • o.y - logical y-coordinate v2.0.0

Write: sets the logical position of the item.

Note: if the item is a child of a layout the position is counted relative to the parent top-left corner.

See also: .x(), .y(), .left(), .top(), .height(), .width(), .moveTo().

Example

var p=$('id').pos(); // read
alert( 'pos x:'+p.x+' y:'+p.y );
$('id').pos(120,20); // write - set the x-coordinate to 120 and y-coordinate to 20

.zIndex()


Synopsis

.zIndex([idx])
Returns (read): Number
Environment: ServerScriptNa.png JavaScriptOk.png
Available since: v1.3.0
Brief description: Changes or returns the zIndex.
Attribute Type Default Note
idx Number Sets the new zIndex idx.

Overview

Description

Sets or gets the zIndex (stack position) of an item. Usually the item order (defined in the IDE) is used. However sometimes you need to changes this programmatically (especially if you use Master templates) or animations. Negative values are allowed. All values should be in the range from -10000 to 10000.

Read: returns the current zIndex used for this item.

Write: sets the current zIndex to idx.

Note: all items from a Master template are automatically stacked behind the items of the current page since v2.0.0.

See also: .tabIndex().

Example

var idx=$('id').zIndex(); // read - returns the current zIndex
$('id').zIndex( $('id2').zIndex()+1 ); // write - brings item 'id' in front of 'id2'

.tabIndex()


Synopsis

.tabIndex([idx])
Returns (read): Number
Environment: ServerScriptOk.png JavaScriptOk.png
Available since: v1.5.0 v1.3.0
Brief description: Changes or returns the tab index.
Attribute Type Default Note
idx Number Sets the new tab index idx.

Overview

Description

Pressing the tab key focuses a new item - this sets or gets the tab index (focus order) of an item. You may change the tab order in the IDE. Usually only input items define a tab index.

Read: returns the current tab index used for this item.

Write: sets the current tab index to idx.

Note:

See also: .zIndex().

Example

var idx=$('id').tabIndex(); // read - returns the current tab index
$('id').tabIndex( $('id2').tabIndex()+1 ); // write - item 'id' will be focused after 'id2'

Animation

.fadeIn() .fadeOut() .rotate() .moveBy() .moveTo() .rotateIn() .rotateOut() .slide() .stop()

.fadeIn()


Synopsis

.fadeIn([start[,duration[,maxopac[,ease]]]])
Returns (read): n/a
Environment: ServerScriptOk.png JavaScriptOk.png
Available since: v1.5.0 v1.3.0
Brief description: Fades item to maxopac
Attribute Type Default Note
start Number 0 start animation after start msec
duration Number 1000 lasts duration msec
maxopac Float 1.0 fade to maximum opacity maxopac
ease String 'easeOutQuad' use easing curve ease

Overview

Description

Read: this is a write-only function and returns always a reference to itself.

Write: fades an item to maxopac, starting after start msec using easing curve ease and lasts duration msec.

Note: if start > 0 the item opacity is immediately set to 0. It becomes automatically visible after start.

See also: .fadeOut(), .rotateIn(), .rotateOut(), .opacity().

Example

$('id').fadeIn(1000,2000,0.8,'linear'); // starts after 1sec, lasts 2sec, fades to 80% opacity

.fadeOut()


Synopsis

.fadeOut([start[,duration[,minopac[,ease]]]])
Returns (read): n/a
Environment: ServerScriptOk.png JavaScriptOk.png
Available since: v1.5.0 v1.3.0
Brief description: Fades item to minopac
Attribute Type Default Note
start Number 0 start animation after start msec
duration Number 1000 lasts duration msec
minopac Float 0 fade to minimum opacity minopac
ease String 'easeOutQuad' use easing curve ease

Overview

Description

Read: this is a write-only function and returns always a reference to itself.

Write: fades an item to minopac, starting after start msec using easing curve ease and lasts duration msec.

Note: if start > 0 the item opacity is immediately set to 1. It automatically becomes visible after start and if minopac < 0.1 after animation the item will be hidden.

See also: .fadeIn(), .rotateIn(), .rotateOut(), .opacity().

Example

$('id').fadeOut(0,4000); // starts immediately, lasts 4sec, fades to fully transparent

.rotate()


Synopsis

.rotate([a[,x[,y[,z]]]])
Returns (read): n/a
Environment: ServerScriptOk.png JavaScriptOk.png
Available since: v2.0.0 v2.0.0
Brief description: Infinite rotation.
Attribute Type Default Note
a Number 0x4 axis mask
x Float 0 step size in x-coordinate
y Float 0 step size in y-coordinate
z Float 1.0 step size in z-coordinate

Overview

Description

Rotates an item through different axis. Possible values for axis are (use an OR combination):

The speed is calculated in: 9000/step size milliseconds - therefor if step size equals 1.0 the duration for one complete turn for a given axis is 9sec.

Read: this is a write-only function and returns always a reference to itself.

Write: rotates the item through one or more given axis.

Note: the default rotates the z-axis in a 2D space. Older browser versions not supporting a 3D space will ignore the x-axis and y-axis

See also: .rotateX(), .rotateY(), .rotateZ(), .rotateToX(), .rotateToY(), .rotateToZ(), .stop().

Attention: This function is experimental. Expect inconsistencies.

Example

$('id').rotate(3,1.0,2.0); // rotates through the x-axis and y-axis with double speed for the y-axis
$('id').rotate(phi.xAxis|phi.zAxis,1.5,0,0.5); // JavaScript (client) only
$('id').rotate(); // rotates through the z-axis with a duration of 9sec for one turn.
$('id').rotate(7,1.0,0.5,2.0); // rotates through all axis with the given step size
setTimeout( function(){ $('id').stop(); }, 60000 ); // stops the rotation after 1min

.moveBy()


Synopsis

.moveBy(dx,dy,[dw[,dh[,s[,d[,ease]]]]])
Returns (read): n/a
Environment: ServerScriptOk.png JavaScriptOk.png
Available since: v1.5.0 v1.3.0
Brief description: Animated delta move.
Attribute Type Default Note
dx Number delta x
dy Number delta y
dw Number 0 delta width
dh Number 0 delta height
s Number 0 start after s msec
d Number 1000 lasts d msec
ease String 'easeOutQuad' use easing curve ease

Overview

Description

Read: this is a write-only function and returns always a reference to itself.

Write: moves or resizes the item over a time period.

Note: not all items support resizing.

See also: .x(), .y(), .width(), .height(), .moveTo().

Example

$('id').moveBy(0,-20,0,0,5000); // starts after 5sec and moves the item 20px to the top
$('id').moveBy(0,0,100,100); // growth the item 100px in both directions
$('id').moveBy(-200,0,200,0); // moves 200px to the left while the item width is growing

.moveTo()


Synopsis

.moveTo(x,y[,s[,d[,ease]]])
Returns (read): n/a
Environment: ServerScriptOk.png JavaScriptOk.png
Available since: v1.5.0 v1.3.0
Brief description: Animated move to a specific position.
Attribute Type Default Note
x Number x position
y Number y position
s Number 0 start after s msec
d Number 1000 lasts d msec
ease String 'easeOutQuad' use easing curve ease

Overview

Description

Read: this is a write-only function and returns always a reference to itself.

Write: moves the item over a time period to a specific (logical) position.

Note: additional graphical effects will be respected and an offset will be added if necessary.

See also: .x(), .y(), .moveBy().

Example

$('id').moveTo(0,20,5000); // starts after 5sec and moves the item to the left border and 20px to the top
var y=$('id').y();
$('id').moveTo(200,y,0,4000); // moves immediately to x=200 while the y-coordinate will not be changed, lasts 4sec

Template:Func rotateIn Template:Func rotateOut

.slide()


Synopsis

.slide([dir[,d[,ease]])
Returns (read): n/a
Environment: ServerScriptNa.png JavaScriptOk.png
Available since: v1.3.0
Brief description: Animated sliding.
Attribute Type Default Note
dir String 'up' Direction dir: 'up' or 'down'
d Number 400 Lasts d msec
ease String 'easeOutQuad' Use easing curve ease

Overview

Description

Slides an item (or a group of items - i.e. layouts) up or down. This function enables you to create great sliding menu effects.

Read: this is a write-only function and always returns a reference to the item itself.

Write: slides an item 'up', i.e. hides an item if dir is empty or equals 'up' or shows an item if dir equals 'down' with a slide effect.

Note: if an item is already hidden and dir is 'up' or if the item is already visible and dir is 'down' than this function does nothing.

See also: .rotateOut(), .rotateIn(), .hide(), .show().

Example

$('id').slide(); // write - slides an item up within 400ms
$('id').slide('up',400,'easeOutBounce'); // write - slides an item up with a bouncing effect
$('id').slide('down',1000); // write - slides an item down and lasts 1sec for the animation

.stop()


Synopsis

.stop()
Returns (read): n/a
Environment: ServerScriptNa.png JavaScriptOk.png
Available since: v1.3.0
Brief description: Stops all animations.
Attribute Type Default Note

Overview

Description

Read: this is a write-only function and returns always a reference to the item itself.

Write: stops any animation running on the item immediately.

Note:

See also:

Example

$('id').stop(); // write

Transformation

.rotateX() .rotateY() .rotateZ() .rotateToX() .rotateToY() .rotateToZ() .scale() .scaleTo() .$()

.rotateX()


Synopsis

.rotateX([angle])
Returns (read): Float
Environment: ServerScriptOk.png JavaScriptOk.png
Available since: v2.0.0 v2.0.0
Brief description: Rotates item through the x-axis.
Attribute Type Default Note
angle Float rotate x-axis with angle degrees

Overview

Description

Read: returns the current x-rotation.

Write: rotates the item through the x-axis angle degrees clockwise or counter-clockwise if angle is negative.

Note: if the browser does not support transformations in a 3D space, this function does nothing.

See also: .rotateToX(), .rotateY(), .rotateZ(), .rotate().

Attention: This function is experimental. Expect inconsistencies.

Example

var xangle=$('id').rotateX(); // read
$('id').rotateX(45); // write - rotates the item 45° vanishing to the top

.rotateY()


Synopsis

.rotateY([angle])
Returns (read): Float
Environment: ServerScriptOk.png JavaScriptOk.png
Available since: v2.0.0 v2.0.0
Brief description: Rotates item through the y-axis.
Attribute Type Default Note
angle Float rotate y-axis with angle degrees

Overview

Description

Read: returns the current y-rotation.

Write: rotates the item through the y-axis angle degrees clockwise or counter-clockwise if angle is negative.

Note: if the browser does not support transformations in a 3D space, this function does nothing.

See also: .rotateToY(), .rotateX(), .rotateZ(), .rotate().

Attention: This function is experimental. Expect inconsistencies.

Example

var yangle=$('id').rotateY(); // read
$('id').rotateY(45); // write - rotates the item 45° vanishing to the left

.rotateZ()


Synopsis

.rotateZ([angle])
Returns (read): Float
Environment: ServerScriptOk.png JavaScriptOk.png
Available since: v2.0.0 v2.0.0
Brief description: Rotates item through the z-axis.
Attribute Type Default Note
angle Float rotate z-axis with angle degrees

Overview

Description

Read: returns the current z-rotation.

Write: rotates the item through the z-axis angle degrees clockwise or counter-clockwise if angle is negative.

Note: this reflects a rotation in 2D space and should be supported by any browser.

See also: .rotateToZ(), .rotateX(), .rotateY(), .rotate().

Example

var zangle=$('id').rotateZ(); // read
$('id').rotateZ(45); // write - rotates the item 45° clockwise

.rotateToX()


Synopsis

.rotateToX(angle[,d[,ease]])
Returns (read): n/a
Environment: ServerScriptNa.png JavaScriptOk.png
Available since: v2.0.0
Brief description: Rotates item through the x-axis.
Attribute Type Default Note
angle Float rotate x-axis to angle degrees
d Number 1000 Duration
ease String 'easeOutQuad' Use easing curve ease

Overview

Description

Read: this is a write-only function and returns a reference to the item itself.

Write: rotates the item through the x-axis to angle degrees clockwise or counter-clockwise if angle is negative.

Note: if the browser does not support transformations in a 3D space, this function does nothing.

See also: .rotateX(), .rotateToY(), .rotateToZ(), .rotate().

Attention: This function is experimental. Expect inconsistencies.

Example

$('id').rotateToX(45,2000,'linear'); // write - rotates the item to 45° in 2sec

.rotateToY()


Synopsis

.rotateToY(angle[,d[,ease]])
Returns (read): n/a
Environment: ServerScriptNa.png JavaScriptOk.png
Available since: v2.0.0
Brief description: Rotates item through the y-axis.
Attribute Type Default Note
angle Float rotate y-axis to angle degrees
d Number 1000 Duration
ease String 'easeOutQuad' Use easing curve ease

Overview

Description

Read: this is a write-only function and returns a reference to the item itself.

Write: rotates the item through the y-axis to angle degrees clockwise or counter-clockwise if angle is negative.

Note: if the browser does not support transformations in a 3D space, this function does nothing.

See also: .rotateToX(), .rotateY(), .rotateToZ(), .rotate().

Attention: This function is experimental. Expect inconsistencies.

Example

$('id').rotateToY(-45,4000); // write - rotates the item to -45° (counter-clockwise) in 4sec

.rotateToZ()


Synopsis

.rotateToZ(angle[,d[,ease]])
Returns (read): n/a
Environment: ServerScriptNa.png JavaScriptOk.png
Available since: v2.0.0
Brief description: Rotates item through the z-axis.
Attribute Type Default Note
angle Float rotate z-axis to angle degrees
d Number 1000 Duration
ease String 'easeOutQuad' Use easing curve ease

Overview

Description

Read: this is a write-only function and returns a reference to the item itself.

Write: rotates the item through the z-axis to angle degrees clockwise or counter-clockwise if angle is negative.

Note: this reflects a rotation in 2D space and should be supported by all browser.

See also: .rotateToX(), .rotateToY(), .rotateZ(), .rotate().

Example

$('id').rotateToZ(45,2000,'linear'); // write - rotates the item to 45° in 2sec

.scale()


Synopsis

.scale([f])
Returns (read): Float
Environment: ServerScriptNa.png JavaScriptOk.png
Available since: v2.0.0
Brief description: Scales the item.
Attribute Type Default Note
f Float Scale factor f

Overview

Description

Affine (2D space) scaling. A scale factor of 2. doubles the size. A scale factor of 0.5 is half size. A scale factor of 1. is the normal size.

Read: returns the current scale factor.

Write: scales the item to factor f.

Note:

See also: .rotateX(), .rotateY(), .rotateZ(), .rotate().

Attention: This function is experimental. Expect inconsistencies.

Example

$('id').scale(); // read
$('id').scale(4); // write - scales the item 4 times the normal size.

.scaleTo()


Synopsis

.scaleTo(f[,d[,ease]])
Returns (read): n/a
Environment: ServerScriptNa.png JavaScriptOk.png
Available since: v2.0.0
Brief description: Animated scaling.
Attribute Type Default Note
f Float Scale factor f
d Number 1000 Lasts d msec
ease String 'easeOutQuad' Use easing curve ease

Overview

Description

Affine (2D space) scaling. A scale factor of 2. doubles the size. A scale factor of 0.5 is half size. A scale factor of 1. is the normal size.

Read: this is a write-only function and always returns a reference to the item itself.

Write: scales the item to factor f with duration d and easing curve ease.

Note: in combination with .mouseover() and .mouseout() you may create nice effects.

See also: .rotateToX(), .rotateToY(), .rotateToZ(), .scale().

Attention: This function is experimental. Expect inconsistencies.

Example

$('id').scaleTo(2,2000,'linear'); // write - doubles the size within 2sec

.$()


Synopsis

.$()
Returns (read): String
Environment: ServerScriptOk.png JavaScriptOk.png
Available since: v2.0.0 v2.0.0
Brief description: Gets the ID string.
Attribute Type Default Note

Overview

Description

Read: returns the ID string of this object.

Write: this is a read-only function.

Note: on a first view this function looks useless, but if you loop e.g. through a list of item objects this function might be useful.

See also: .wid().

Example

var id=$('myitem').$(); // read - id='myitem'

Display

.cursor() .disabled() .opacity() .hide() .show() .visible() .toggle() .title() .wid()

.cursor()


Synopsis

.cursor([s])
Returns (read): String
Environment: ServerScriptNa.png JavaScriptOk.png
Available since: v1.3.0
Brief description: Changes the cursor.
Attribute Type Default Note
s String Cursor string s

Overview

Description

The following cursor types are supported:

  • crosshair
  • default
  • e-resize
  • help
  • move
  • n-resize
  • ne-resize
  • nw-resize
  • pointer
  • progress
  • s-resize
  • se-resize
  • sw-resize
  • text
  • w-resize
  • wait

Read: returns the current used cursor.

Write: sets the current cursor to s, i.e. this cursor is shown if the user hovers the item.

Note:

See also: .disabled().

Template:Func disabled

.opacity()


Synopsis

.opacity([o])
Returns (read): Float
Environment: ServerScriptOk.png JavaScriptOk.png
Available since: v1.5.0 v1.3.0
Brief description: Changes the opacity of the item.
Attribute Type Default Note
o Float sets opacity to o

Overview

Description

The opacity must be in the range of 0 (fully transparent) to 1 (opaque). An opacity of 0.5 is 50% transparent. Children (i.e. items in a layout) respect the opacity of the parent.

Read: returns the current opacity of the item.

Write: sets the opacity of the item.

Note: Phi normalizes the value to support also older IExplorer versions using an alpha filter.

See also: .visible(), .fadeIn(), .fadeOut().

Example

var opac=$('id').opacity(); // read
$('id').opacity(0.8); // write - makes the item 80% opaque

.hide()


Synopsis

.hide()
Returns (read): n/a
Environment: ServerScriptOk.png JavaScriptOk.png
Available since: v1.5.0 v1.3.0
Brief description: Hides the item.
Attribute Type Default Note

Overview

Description

Items which have the CSS style visibility:hidden attached are treated as hidden as well. This is different to the jQuery behavior where an item needs the CSS style display:none to be treated as really hidden. However in Phi mode the display style is not available because of the nature how items are positioned. We recommend not to use to set the style directly - always use .hide() and .show() to be safe.

Read: this is a write-only function and returns always a reference to the item itself.

Write: the item becomes hidden immediately.

Note: an item with zero opacity is not treated as hidden.

See also: .show(), .visible(), .toggle(), .opacity().

Example

$('id').hide(); // write

.show()


Synopsis

.show()
Returns (read): n/a
Environment: ServerScriptOk.png JavaScriptOk.png
Available since: v1.5.0 v1.3.0
Brief description: Shows the item.
Attribute Type Default Note

Overview

Description

Makes an item visible. CSS styles set (like display:none or visibility:hidden) will be changed. An item with opacity 0 remains transparent.

Read: this is a write-only function and returns always a reference to the item itself.

Write: the item becomes visible immediately.

Note: The CSS style visibility:hidden is treated as invisible. This is a different behavior than in the jQuery API. We recommend to use always .show() and .hide() and not to set the style directly to be safe - plus display:none is not supported in Phi mode.

See also: .hide(), .visible(), .opacity().

Example

$('id').show(); // write

.visible()


Synopsis

.visible([b])
Returns (read): Boolean
Environment: ServerScriptOk.png JavaScriptOk.png
Available since: v1.5.0 v1.3.0
Brief description: Changes the visibility.
Attribute Type Default Note
b Boolean,Number Changes the visibility to b

Overview

Description

Read: returns true if the item is visible otherwise false.

Write: makes the item visible if b is true - hides the item if b is false.

Note: an item with zero opacity is not treated as hidden.

See also: .show(), .hide(), .toggle(), .opacity().

Example

if ( $('id').visible() ) doSomething(); // read
$('id').visible(0); // write - hides the item
$('id').visible(true); // write - shows the item

.toggle()


Synopsis

.toggle()
Returns (read): n/a
Environment: ServerScriptOk.png JavaScriptOk.png
Available since: v1.5.0 v1.3.0
Brief description: Toggles the items visibility.
Attribute Type Default Note

Overview

Description

Read: this is a write-only function and returns always a reference to the item itself.

Write: the item becomes hidden if it is visible and vice versa.

Note:

See also: .show(), .hide(), .visible(), .opacity().

Example

$('id').toggle(); // write

.title()


Synopsis

.title([s])
Returns (read): String
Environment: ServerScriptOk.png JavaScriptOk.png
Available since: v1.5.0 v1.3.0
Brief description: Changes the title.
Attribute Type Default Note
s String Title text.

Overview

Description

Read: returns the current set title (tool tip) for this item.

Write: Sets the current title (tool tip) for this item.

Note: use an empty string to remove the tool tip.

See also:

Example

var t=$('id').title(); // read
$('id').title('<b>bold tags have no effect.</b>'); // write

.wid()


Synopsis

.wid()
Returns (read): Number
Environment: ServerScriptOk.png JavaScriptOk.png
Available since: v2.0.0 v2.0.0
Brief description: Gets the WID.
Attribute Type Default Note

Overview

Description

In Phi each item has its own widget ID.

Read: returns the unique WID (widget ID) for this object.

Write: this is a read-only function.

Note: in Serverscript.pngServerScript items can be created dynamically using createElementById().

See also: .$(), document.createElementById().

Example

var wid=$('image').wid(); // read - gets the widget ID (for image items this will be 16)

// ServerScript only:
loadModule('system');
var item=document.createElementById( 6, 'mybutton', 100, 50 ); // creates a button (wid=6)
item.text( 'My button' );
system.log( 'Button created with id'+item.$() );