Section | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Parameters
componentContainer
The componentContainer
parameter is a selector, a single-element jQuery, or a DOM element representing the component's containerspecifying the root DOM node of the Inline Edit markup.
Anchor | ||||
---|---|---|---|---|
|
options
The options
parameter is an optional collection of name-value pairs that configure data structure that configures the Inline Edit component:
...
Functions
...
fluid.inlineEdit.edit();
Switches the component into edit mode.
...
fluid.inlineEdit.finish();
Switches the component out of edit mode into display mode, updating the displayed text with the current content of the edit field. Calls the finishedEditing
function provided in the options
, if it exists.
...
fluid.inlineEdit.render(source);
Prompts the component to render itself.
...
fluid.inlineEdit.tooltipEnabled();
Returns a boolean indicating whether or not the tooltip is enabled.
...
fluid.inlineEdit.updateModel(newValue, source);
Updates the component's internal representation of the text to a new value. The component will be re-rendered.
Creating Multiple Inline Edits
...
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.
options
The options
parameter is an optional collection of name-value pairs that configure the Inline Edit components. The available options are the same as those for the creation of a single Inline edit (described above), with the addition of a selector for identifying the editable elements. The default selector is defined as follows:
...
(s), as described below in the fluid:Options section.
...
Anchor | ||||
---|---|---|---|---|
|
Supported Events
The Inline Edit component fires the following events (for more information about events in the Fluid Framework, see Events for Component Users):
Include Page | ||||
---|---|---|---|---|
|
Include Page | ||||
---|---|---|---|---|
|
Include Page | ||||||
---|---|---|---|---|---|---|
|
...
Skinning
This component can be skinned "out of the box" when you include our the component's CSS skin files. Just be sure to put the following in you your document:
Code Block | ||||
---|---|---|---|---|
| ||||
<link rel="stylesheet" type="text/css" href="css/fluid.layout.css" />
<link rel="stylesheet" type="text/css" href="css/fluid.states.css" />
<link rel="stylesheet" type="text/css" href="css/fluid.theme.mist.css" />
<link rel="stylesheet" type="text/css" href="css/fluid.theme.hc.css" />
|
and to attatch a class attribute that represents the skin you want to the components container, such as:
...
<div id="inlineEditContainer" class="fl-theme-mist">
...
</div>
The above code would make use of the theme.mist.css skin file.
components/inlineEdit/css/InlineEdit.css" />
|
...
Dependencies
The Inline Edit dependencies can be met by including the minified Fluid-allInfusionAll.js
file in the header of the HTML file:
Code Block | ||||
---|---|---|---|---|
| ||||
<script type="text/javascript" src="Fluid-allInfusionAll.js"></script> |
Alternatively, the individual file requirements are:
Include Page |
---|
...
|