Use ASP. NET Atlas to develop in place editing input controls

Author: Dflying Chen (http://dflying.cnblogs.com)

Some friends may not know what it isIn place editing(Do not know how to translate), please first look at the followingDemo (Flash is filtered out on the homepage. Please go to the post to view it. Below is):

The preceding three inputs are common at ordinary times.Label, A border appears when you hover your mouse over it. When the user clicks thisLabelSwitchInputStatus. After the user inputs, move the mouse away and switch back.LabelStatus, which provides a rich user visual experience and saves page space. This control is completed within one hour of my promotion.CodeThe organization is messy, and there may be manyBug, For your reference only, please do not confirm.

InplaceeditinginputThe control has the following five attributes. Of course, you can easily expand them:

1. Tooltiptext: The initial text prompt of the input control. AboveDemo"Enter your name"Is the property.
2. Tooltiptextcolor: The color of the initial text of the input control. The default value is# Aaa. You can see the aboveDemo"Enter your nameThe color is slightly lighter than the text you actually entered.
3. Labelcolor: This control actsLabelDisplay color. Default Value:White.
4. Inputbordercolor: This control actsInputBorder color when displayed. Default Value:Black.
5. Inputbgcolor: This control actsInputThe background color when it is displayed. The default value is# F2f2f9(Light blue ).

UseInplaceeditinginputNote the following:

1. ScriptmanagerTo addInplaceeditinginput. jsFile reference.
2. AsInplaceeditinginputControl SourceDomThe element must beInputOrTextarea.
3. You shouldInplaceeditinginputControlTooltiptextAttribute to bring a good user experience.

The main development idea of this control is:

1. Make full useAtlasPowerfulJavascriptThe object-oriented function inherits fromSYS. UI. textboxClass.
2. CaptureHtmlOfOnmouseover,Onmouseout,OnfocusAndOnblurEvent, and apply the correspondingCSSStyle.

Source Code of the control and Program download here: http://files.cnblogs.com/dflying/InPlaceEditingDemo.zip