Page Comparison

Versions Compared

Key

This line was added.
This line was removed.
Formatting was changed.

Section

Column

width	50%

Info
This documentation refers to the latest trunk version of the Inline Edit code.

Inline Edit Overview

Allow users to edit content within the context of their work rather than going to an "edit mode".

Creating an Inline Editor

Note: this This convenience method is not yet implemented.

Code Block

	javascript
	javascript

fluid.createInlineEdit(componentContainerId);

Column

Panel

borderColor	#566b30
bgColor	#fff
titleBGColor	#D3E3C4
title	On This Page
borderStyle	solid

Table of Contents

minLevel	2
maxLevel	5

Panel

borderColor	#321137
bgColor	#fff
titleBGColor	#c1b7c3
title	See Also
borderStyle	solid

Inline Edit Design Overview

Panel

borderColor	#321137
bgColor	#fff
titleBGColor	#cccccc
title	Still need help?
borderStyle	solid

Join the fluid-talk mailing list and ask your questions there.

...

Code Block

	javascript
	javascript

fluid.InlineEdit(componentContainerId, options);

Parameters

componentContainerId

The componentContainerId parameter is the ID of 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 component:

Name

Description

Values

Default

selectors

Javascript object containing selectors for various fragments of the Inline Edit markup

Code Block

	javascript
	javascript

selectors: {
    text: ".text",
    editContainer: ".editContainer",
    edit: ".edit"
}

styles

Code Block

	javascript
	javascript

styles: {
    invitation: "invitation",
    focus: "focus"
}

paddings

Code Block

	javascript
	javascript

paddings: {
    add: 10,
    minimum: 80
}

finishedEditing

Code Block

	javascript
	javascript

function () {}

...

Functions

Code Block

	javascript
	javascript


fluid.InlineEdit.edit();

Switches the component into edit mode.

Code Block

	javascript
	javascript


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.