Jquery (1)

I believe that you are no longer familiar with jquery. Xiaosheng had an earlier contact with jqery, but he was not able to study it. He worked hard at his work and made a simple result by reading the manual, it is also the effect that many websites use.

I. Functions

The editing status is displayed after double-clicking textbox. After modification, it becomes uneditable.

Ii. Ideas

Create a div and add a sign to it to help jquery find it. Put an input: textbox and an intpu: button into it. The initial status textbox is uneditable and has no border, the button is hidden. After double-clicking the DIV, the textbox changes the style and the border appears. The focus is obtained. You can edit the button and the button appears.

After editing, click the button to restore the DIV to its initial state.

III,Code

 

(1) style

Style
Input. t { Border : 1px solid # fff ; Background : # Fff ;   }
Input. s { Border : 1px solid #369 ; Background : # Fff ; }
. Hiden { Display : None }

 

(2) script

 

Javascript
< Script Language = " Javascript " Type = " Text/JavaScript " SRC = " Jquery-1.3.js " > < / SCRIPT>
< Script Language = " Javascript " Type = " Text/JavaScript " >
$ (Document). Ready ( Function (){
$ ( " P " ). BIND ( " Dblclick " , Function () {Alert ($ ( This ). Text ());});
$ ( " . Edit " ). BIND ( " Dblclick " , Function () {AA ( This )});
});
Function AA (OBJ)
{
$ (OBJ). Find ( " : Text " ). Removeclass ( " T " );
$ (OBJ). Find ( " : Text " ). Addclass ( " S " );
$ (OBJ). Find ( " : Text " ). Removeattr ( " Readonly " );

$ (OBJ). Find ( " : Button " ). Removeclass ( " Hiden " );

$ (OBJ). Find ( " : Text " ). Focus ();
}
Function BB (OBJ)
{
$ (OBJ). Parent (). Find ( " : Text " ). Removeclass ( " S " );
$ (OBJ). Parent (). Find ( " : Text " ). Addclass ( " T " );
$ (OBJ). Parent (). Find ( " : Text " ). ATTR ( " Readonly " , " Readonly " );
$ (OBJ). addclass ( " Hiden " );
}
< / SCRIPT>

 

(3) HTML code

 

Html
< Div Class = "Edit" > < Input Type = "Text" Class = "T" Value = "Double-click Modify me" Readonly = "" /> < Input Type = "Button" Value = "Modify" Class = "Hiden" Onclick = "BB (this )"   /> </ Div >

 

 

The script is very rough. Please forgive me, and ask your interested friends to correct and complete the Script:-) download the code.