As follows:
Technical points:
1. Because images cannot be placed in textarea, like Sina's practice, use iframe to put the content, and then hide a textarea for submission.
2. Use of the JQqery tab plug-in)
Reference these three first:
Copy codeThe Code is as follows:
<Link href = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel = "stylesheet" type = "text/css"/>
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> </script>
<Script src = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script>
Then:
$ (Function (){
$ ("# Tabs"). tabs ();
});
3. Edit iframe
Window. frames ["iframe1" 2.16.doc ument. designMode = 'on ';
4. Open simple form
Var newwindow = window. open ("tab.htm", '_ blank', toolbars = 0, resizable = 1 );
5. How to execute the parent form in iframe
Window. opener. XXX (xxx );
In fact, there are only three pages. You can copy and paste them without downloading them. Do you have any good ideas or ideas.
Copy codeThe Code is as follows:
<Html>
<Head>
<Title> insert an emoticon </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Style>
Img
{
Cursor: pointer;
}
</Style>
<Link href = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel = "stylesheet" type = "text/css"/>
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> </script>
<Script src = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script>
<Script type = "text/javascript">
$ (Function (){
$ ("# Tabs"). tabs ();
});
</Script>
</Head>
<Body style = "font-size: 62.5%;">
<Script language = "javascript">
Function SetEmotion (e)
{
Window. opener. InsertEmotion (e. childNodes [0]. src );
Window. close ();
}
</Script>
<Div class = "demo">
<Div id = "tabs">
<Ul>
<Li> <a href = "# tabs-1"> type 1 </a> </li>
<Li> <a href = "# tabs-2"> type 2 </a> </li>
<Li> <a href = "# tabs-3"> Category 3 </a> </li>
</Ul>
<Div id = "tabs-1">
<Table id = "EmoticonsTable" border = "0">
<Tr>
<Td> <div onclick = "SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td>
</Tr> <tr>
<Td> <div onclick = "SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td>
</Tr> <tr>
<Td> <div onclick = "SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td>
</Tr> <tr>
<Td> <div onclick = "SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td>
</Tr> <tr>
<Td> <div onclick = "SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> </td>
</Tr>
</Table>
</Div>
<Div id = "tabs-2">
<Table id = "Table1" border = "0">
<Tr>
<Td> <div onclick = "SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td>
</Tr> <tr>
<Td> <div onclick = "SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td>
</Tr> <tr>
<Td> <div onclick = "SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td>
</Tr> <tr>
<Td> <div onclick = "SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td>
</Tr> <tr>
<Td> <div onclick = "SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> </td>
</Tr>
</Table>
</Div>
<Div id = "tabs-3">
<Table id = "Table2" border = "0">
<Tr>
<Td> <div onclick = "SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td>
</Tr> <tr>
<Td> <div onclick = "SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td>
</Tr> <tr>
<Td> <div onclick = "SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td>
</Tr> <tr>
<Td> <div onclick = "SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td>
</Tr> <tr>
<Td> <div onclick = "SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> <div onclick =" SetEmotion (this) "> </div> </td> </td>
</Tr>
</Table>
</Div>
</Div>
</Div>
</Body>
</Html>
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> Untitled Page </title>
<Script type = "text/javascript" language = "javascript">
Function xx ()
{
Window. frames ["iframe1" 2.16.doc ument. designMode = 'on ';
}
Function xxx ()
{
Window. frames ["iframe1" 2.16.doc ument. getElementById ("xxx "). innerHTML + = ' ';
}
Function openTab ()
{
Var newwindow = window. open ("tab.htm", '_ blank', toolbars = 0, resizable = 1 );
Newwindow. focus ();
}
Function InsertEmotion (content)
{
Document. getElementById ("TextArea1"). value + = content;
Window. frames ["iframe1" 2.16.doc ument. getElementById ("xxx "). innerHTML + = ' ';
}
</Script>
</Head>
<Body onload = "xx ()">
<Iframe frameborder = "0" src = "HTMLPage1.htm" style = "border: 1px solid rgb (199,199,199); height: 158px; width: 448px; background-color: white; "id =" iframe1 "> </iframe>
<Div>
<Textarea id = "TextArea1" style = "height: 150px; display: none;" cols = "20" rows = "2"> </textarea>
<Input id = "Button2" type = "button" value = "Submit"/>
<! -- <Input id = "Button1" type = "button" value = "button" onclick = "return xxx ()"/> -->
<Input id = "Button3" type = "button" value = "select emoticon" onclick = "openTab ()"/>
</Div>
</Body>
</Html>
Copy codeThe Code is as follows:
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Style>
P {
* Margin: 0.2em auto;
}
Body {
Margin: 0;
Scrollbar-face-color: # ffffff;
Scrollbar-highlight-color: # ffffff;
Scrollbar-shadow-color: # c0c1bb;
Scrollbar-3dlight-color: # c0c1bb;
Scrollbar-arrow-color: # c9cbb6;
Scrollbar-track-color: # f4f5f0;
Scrollbar-darkshadow-color: # ffffff;
Scrollbar-base-color: # ffffff;
Padding: 17px;
Word-wrap: break-word;
Overflow: scroll;
Overflow-x: auto;
Height: 90%;
Font-size: 12px;
Background-color: white;
}
Body, td, textarea, input, br, div, span {
Font-family: ' ', Verdana, Arial, Helvetica, sans-serif;
Line-height: 1.5;
}
Img {
Border: 0;
}
Html {
Height: 100%;
Cursor: text;
}
Pre {
White-space: normal;
}
Form {
Margin: 0;
}
</Style>
</Head>
<Body style = "background-color: white;">
<Div id = "xxx"> </div>
<Span id = "content" style = "display: none"> </span>
</Body>
</Html>
6. Download demo