Section | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Creating Multiple Inline Edits
Code Block | ||||
---|---|---|---|---|
| ||||
fluid.inlineEdits(componentContainer, options); |
This function will find any elements within the given container that are identified as 'editables' and apply the Inline Edit component to them.
Parameters
componentContainer
The componentContainer
parameter is a selector, a single-element jQuery, or a DOM element specifying the root DOM node of the Inline Edit markup.
Anchor | ||||
---|---|---|---|---|
|
options
The options
parameter is an optional data structure that configures the Inline Edit component(s), as described below in the Options section.
...
Anchor | ||||
---|---|---|---|---|
|
Supported Events
The Inline Edit component fires the following events:
Event | Type | Description | Parameters | Parameter Description |
---|---|---|---|---|
| default | This event is fired any time the model for the component has changed, that is, any time the value of the text associated with the component has changed. | |
|
| "preventable" | This event fires just before the component switches from 'view' mode into 'edit' mode. Because the event is preventable, listeners may prevent the component from actually entering edit mode. | none |
|
| default | This event fires just after the component has finished entering 'edit' mode. | none |
|
| "preventable" | This event fires just before the component switches out of 'edit' mode, i.e. before the newly edited value is stored in the model. Because the event is preventable, listeners may prevent the new value from being stored in the model, i.e. they may cancel the edit. | |
|
| default | This event fires just after the newly edited value is stored in the model. Note that it only fires if the | |
|
...
Functions
These functions are defined on the central that
object returned from the inlineEdit construction function - for example with
...
Anchor | ||||
---|---|---|---|---|
|
Options
The following options to the creator functions can be used to customize the behaviour of the Inline Edit component:
...
Code Block | ||||
---|---|---|---|---|
| ||||
selectors: { editables: ".inlineEditable" } |
...
Skinning
This component can be skinned "out of the box" when you include our CSS skin files. Just be sure to put the following in you document:
...
The above code would make use of the theme.mist.css skin file.
...
Dependencies
The Inline Edit dependencies can be met by including the minified Fluid-all.js
file in the header of the HTML file:
...