Search

From PhiWiki
Jump to: navigation, search


Name search File:Search.png
WID: 50
Type: Input
Available since: v1.1.0
Brief description: Search input field. More...
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()
Additional functions / handlers
Function Brief description
.val() Value which will be sent via a POST request
.readOnly() Switch read-only flag
.placeholder() Placeholder text
.maxLength() Maximum characters
.change() Change handler
.accessKey() Gain focus with short-cut
.color() Text color
.bgColor() Background color

Detailed description

Draws a line-edit as a search input field (some browsers render them differently e.g. with rounded corners). You can change the maximum length in the IDE to restrict the length of the input search text. The default value is 100 characters.

Note: A change handler is called after the line edit looses focus.

See also: Password, Textarea, Decimal, Realnumber, Phone, Email, Lineedit.

Additional functions

.val() .readOnly() .placeholder() .maxLength() .change() .accessKey() .color() .bgColor()

.val()


Synopsis

.val([v])
Returns (read): String
Environment: ServerScriptOk.png JavaScriptOk.png
Available since: v1.5.0 v1.3.0
Brief description: Changes the value (content)
Attribute Type Default Note
v String Value which will be usually sent in POST requests.

Overview

Description

Read: returns the current value (content) of this item.

Write: sets the current value to v, i.e. this value will be sent as a id=value pair via POST request.

Note: Values from Button and Reset items are not send as POST data. Used with button items, this function usually changes the button text also.

See also:

.readOnly()


Synopsis

.readOnly([b])
Returns (read): Boolean
Environment: ServerScriptOk.png JavaScriptOk.png
Available since: v1.5.0 v1.3.0
Brief description: Changes the read-only flag.
Attribute Type Default Note
b Boolean,Number false Numbers not equal 0 are true

Overview

Description

Read: returns true if the item is read-only, else returns false.

Write: changes the read-only flag to b.

Note: A read-only item can not be changed by user input.

See also: .disabled().

Example

if ( $('id').readOnly() ) { alert( "Item is read-only" ); } // read
$('id').readOnly( 1 ); //write (true)
$('id').readOnly( false ); // write

.placeholder()


Synopsis

.placeholder([s])
Returns (read): String
Environment: ServerScriptOk.png JavaScriptOk.png
Available since: v2.0.0
Brief description: Changes the placeholder text.
Attribute Type Default Note
s String '' Placeholder text.

Overview

Description

Read: returns the current placeholder string.

Write: sets the current placeholder text to s.

Note: Some older Browsers do not support a placeholder value, in this case the placeholder value will be silently ignored.

See also: .val().

.maxLength()


Synopsis

.maxLength([le])
Returns (read): Number
Environment: ServerScriptOk.png JavaScriptOk.png
Available since: v2.0.0 v2.0.0
Brief description: Maximum character length.
Attribute Type Default Note
le Number Set maximum length to le

Overview

Description

Read: returns the current set maximum character length.

Write: sets the maximum character length to le.

Note:

See also: .val().

Example

var le=$('id').maxLength(); // read
$('id').maxLength(30); // write - limits input length to 30 characters

.change()


Synopsis

.change([f([event])])
Returns (read): n/a
Environment: ServerScriptNa.png JavaScriptOk.png
Available since: v1.3.0
Brief description: Change event handler
Attribute Type Default Note
f Function Function called if the handler is triggered.
event Object Event object.

Overview

Description

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

Write: without any arguments this function triggers the change handler. Otherwise the function f is triggered if the item changes.

Note:

See also: .on(), .one(), .trigger() and Event object.

Examples

$('id').on('change',function(){ alert('item changed'); }); // binds anonymous function
$('id').change(function(e){ doSomething(e); }); // binds anonymous function passing event object
$('id').change(); // triggers all bound functions
$('id').trigger('change'); // some as above

.accessKey()


Synopsis

.accessKey([c])
Returns (read): String
Environment: ServerScriptOk.png JavaScriptOk.png
Available since: v1.5.0 v1.3.0
Brief description: Add an access key (shortcut).
Attribute Type Default Note
c String Single character

Overview

Description

Read: returns the current access key of this item.

Write: sets the current access key to to c.

Note: most browser support a single key for the item to get focus in combination with a meta-key:

  • Safari: CTRL+ALT+key
  • Firefox: ALT+SHIFT+key (Windows & Linux), CTRL+ALT+key (Mac OSX)
  • IE: ALT+key
  • Chrome: ALT+key (Windows & Linux), CTRL+ALT+key (Mac OSX)

See also: .focus(), .blur().

.color()


Synopsis

.color(['col'])
Returns (read): 'rgba(r, g, b, a)'
Environment: ServerScriptOk.png JavaScriptOk.png
Available since: v1.5.0 v2.0.0
Brief description: Text or foreground color change.
Attribute Type Default Note
col String Possible values are: color name, #RRGGBB, rgb(r,g,b), rgba(r,g,b,a)

Overview

Description

Allowed values for r, g, b are 0-255 and for a 0-1.0 (0 is fully transparent and 1. is opaque).

Read: returns the current text or foreground color as 'rgba( r, g, b, a)' string.

Write: changes the text or foreground color to col.

Note: some older browser versions do not support rgba() - in this case the alpha component will be ignored.

See also: .bgColor().

Example

var c=$('id').color(); // read
$('id').color('red'); // write
$('id').color('#12BAF1'); // write
$('id').color('rgb(12,177,255)'); // write
$('id').color('rgba(12,177,255,0.5)'); // write

.bgColor()


Synopsis

.bgColor(['col'])
Returns (read): 'rgba(r, g, b, a)'
Environment: ServerScriptOk.png JavaScriptOk.png
Available since: v1.5.0 v2.0.0
Brief description: Background color change.
Attribute Type Default Note
col String Possible values are: color name, #RRGGBB, rgb(r,g,b), rgba(r,g,b,a)

Overview

Description

Read: returns the current background color.

Write: changes the background color to col.

Note: Some older browser versions do not support rgba() - in this case the alpha component will be ignored. Some browser will render input items differently if a background color is set.

See also: .color().

Example

var c=$('id').bgColor(); // read
$('id').bgColor('red'); // write
$('id').bgColor('#12BAF1'); // write
$('id').bgColor('rgb(12,177,255)'); // write
$('id').bgColor('rgba(12,177,255,0.5)'); // write