Item properties

From PhiWiki
Jump to: navigation, search
Properties.png

By clicking on Item properties or by right clicking over an item selecting Properties in the context menu, the properties dialog opens. The dialog contains only properties which you can edit for the selected item.

Properties

Id

This is the ID of the item which you can reference with document.getElementById() or phi.getElementById() in JavaScript.

Note: if you are editing a Master template page we recommend you to prepend a m_ before the name of any item ID to prevent name conflicts with other pages loading the template, because they will run in the same address space.

Parent

If you are using layouts all child items have automatically the ID of the layout as the parent name. For radio buttons and checkboxes this is the name which will be sent as POST data.

Do NOT cache item

For graphical items check this if the item should always be newly created (which can be time consuming), ie. if you change the item in the server environment with JavaScript depending on different states.

Visible

Unchecking makes the item invisible. You may also set this by reading from a database or process.

See also: Text sources.

Disabled

Some input items can be disabled (usually grayed out by the browser).

Read only

If checked, the input item will be a read only item (browser normally gray out read only elements).

Checked

Available for radio buttons and check boxes.

X

The x-position of the item relatively to the left upper corner in pixels.

Y

The y-position of the item relatively to the left upper corner in pixels.

Width

The width of the item in pixels.

Hight

The hight of the item in pixels.

Angle

The starting angle of an ellipse. A 0° angle is starting at the x-axes (3 o'clock position).

Span

The span angle of an ellipse.

Max size

The maximum size (character length) allowed for a text input element.

Url

An Url which is loaded by clicking on the item (ie. rollover buttons and click buttons).

Note: you can also choose javascript: function(); to call a function. Use javascript: phi.href( 'url' ); for external references.

See also: item.url.

Value

Defines the value for a check box or a radio button for the POST request.

Delimiter

Defines the delimiter for some items, ie. tables and check lists.

In Phi default delimiters are colons ':' and newlines '\n'.

Access key

See also: item.accessKey.

zIndex

The z-index of an item. A higher z-index overlaps another item with a lower z-index.

See also: item.style.zIndex.

Tab pos

Defines the position in the tab hierarchy.

Color

Specifies the color for this item.

Outline color

Specifies the outline or background color for this item.

Rollover text color

The text color of a rollover button, if the mouse is over the item.

Rollover background color

The background color for rollover buttons if the mouse is over the item.

Image

The image for this item.

See also: Image sources.

Text

The text for the item. If the text is grayed out an other Text source than static is used.

Title

Defines the title (tooltip) of the item.

Gradient

Gradient.png

Here you can define your own gradients for graphical items like ellipses, graphical text and boxes.

Color editor

Move the points in the RGB (red/green/blue) to change the gradient colors. The field below edits transparency.

Custom gradients

Save and load your own designed gradients.

Gradient type

Different gradient types are available: linear, radial and conical.

Spread method

Choose between different spread methods.

Gradient stops

Define new color stops for the gradient between '0' and '1'. '0' means at the outmost left position where '1' is on the right side. A color defined at position stop '0.5' will appear in the middle of the gradient.

You can directly enter the RGB hex color code with the transparency prepended, '#ff' means fully opaque.

Click on Add to add to newly defined gradient stop. Clicking on Clear removes all stops.

Effects

Graphicaleffects.png

In Phi effects can be applied to every possible item. In XHTML only effects which can be handled by JavaScript will be shown.

Fader

Fade in

Fades the element in. You may specify a duration and a starting timeout.

Fade out

Fades the element out. You may specify a duration and a starting timeout.

Graphical

Blur

Blur.png

Creates a blur effect.

Note: this in Phi mode available only.

Shadow

Shadow.png

Creates a shadow effect.

Note: this in Phi mode available only.

Colorize

Colorize.png

Creates a colorize effect (the colors are overwritten with a reference color). Using black as reference color creates a gray scaled element.

Note: this in Phi mode available only and for image based items in XHTML.

Surface

Surface.png

Creates a mirrored surface effect.

Note: this in Phi mode and in XHTML available (in XHTML for images only).

Moving

Moves the item to a specified position. You may create nice effects in conjunction with Fader or transparency.

Rotation

Rotate in

Rotates the item in over the specified angle.

Rotate out

Rotates the item in over the specified angle.

Rotation

Rotates the item over the specified angle(s).

CSS

Add your own cascading style sheet for the selected item in this tab.

Note: use the global CSS for setting page wide styles.