I haven't written a blog for a long time. I 've been busy working on a project recently. However, I still feel quite full. Well, I don't need to talk much nonsense. A while ago, I made a function similar to the QQ expression. At first I thought it was quite simple, later, due to lack of front-end knowledge, the progress was slow, but now I finally finished it. Now I want to share the code for my friends to learn from. (The database used in this example is Oracle)
The first page is about the input information, code:
<Tr>
<Td>
Question & nbsp; Objective:
</Td>
<Td colspan = "3">
<Table>
<Tr>
<Td class = "style3">
<A>
Width = "15" height = "15"/> </a> <a>
Width = "15" height = "15"/>
</A>
</Td>
</Tr>
<Tr>
<Td colspan = "2" class = "style3">
<Div id = "NewText" runat = "server" style = "height: 70; width: pixel" class = "Textarea" onclick = "course_focus ();" contenteditable>
</Div>
</Td>
</Tr>
</Table>
</Td>
</Tr>
Click the "add icon" img button to open the icon page. The icon page is an iFrame page embedded on this page. Code:
<Div id = "face" style = "position: absolute; width: 307; display: none; z-index: 10;
Font-size: 13px; background: # ffff00 ">
<Iframe src = "exam_face_temp.aspx" width = "307px" height = "355px"> </iframe>
</Div>
Next we will discuss some div functions under the "Question". code:
// Click the "add icon" button to record the current focus position and insert an icon in the position
Function showface (str)
{
Mouse_loc = str;
Var oText = document. getElementById (mouse_loc );
OText. focus (); // obtain the focus
Document. getElementById ("spacial"). style. display = "none ";
Var ei = document. getElementById ("face ");
Ei. style. top = event. clientY + oText. offsetHeight + 15 + document. body. scrollTop + "px"; // controls the Y coordinate of the mouse position, always displayed under the div
Ei. style. left = event. clientX + 2 + "px"; // controls the X coordinate of the mouse position
Ei. style. display = "inline ";
}
// Insert an image into the div
Function ExcuteInsertImg (strUrl, imgType, imgWidth, imgHeight)
{
Var oText = document. getElementById (mouse_loc );
OText. focus ();
Var sel = document. selection. createRange (); // create an object
If (imgType = "1 "){
Sel. pasteHTML ("<p> </p> ")
}
Else {
Sel. pasteHTML (" "); // convert to an Img object
}
Document. getElementById ("face"). style. display = "none"; // hide it after clicking finish
}
This is the general code of the page.
The code of the entire icon page is as follows:
Front-end code:
<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "exam_face_temp.aspx.cs" Inherits = "exam_exam_face_temp" %>
<! 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 runat = "server">
<Title> image management </title>
<Style type = "text/css">
Body, div, ul, li
{
Margin: 0 auto;
Padding: 0;
}
Body
{
Font: 12px "";
Text-align: center;
}
A: link
{
Color: # 00F;
Text-decoration: none;
}
A: visited
{
Color: # 00F;
Text-decoration: none;
}
A: hover
{
Color: # c00;
Text-decoration: underline;
}
Ul
{
List-style: none;
}
. Main
{
Clear: both;
Padding: 8px;
Text-align: center;
}
/* Second form */# tabs1
{
Text-align: left;
Width: 262px;
}
. Menu1box
{
Position: relative;
Overflow: hidden;
Height: 22px;
Width: 262px;
Text-align: left;
Top: 0px;
Left: 0px;
}
# Menu1
{
Position: absolute;
Top: 0;
Left: 2px;
Z-index: 1;
Width: 443px;
}
# Menu1 li
{
Float: left;
Display: block;
Cursor: pointer;
Width: 145px;
Text-align: center;
Line-height: 21px;
Height: 21px;
}
# Menu1 li. hover
{
Background: # fff;
Border-left: 1px solid #333;
Border-top: 1px solid #333;
Border-right: 1px solid #333;
Width: pixel PX;
Margin-left: 1px;
}
. Main1box
{
Clear: both;
Margin-top:-1px;
Border: 1px solid #333;
Height: 300px;
Width: 300px;
}
# Main1 ul
{
Display: none;
}
# Main1 ul. block
{
Display: block;
}
# Enlarge_images img
{
Vertical-align: middle;
}
# Enlarge_images_right img
{
Vertical-align: middle;
}
</Style>
<Script type = "text/javascript">
<! --
Function setTab (m, n ){
Var tli = document. getElementById ("menu" + m). getElementsByTagName ("li ");
Var mli = document. getElementById ("main" + m). getElementsByTagName ("ul ");
For (I = 0; I <tli. length; I ++ ){
Tli [I]. className = I = n? "Hover ":"";
Mli [I]. style. display = I = n? "Block": "none ";
}
}
Function closewindow ()
{
Var a = parent.doc ument. getElementById ("face ");
A. style. display = "none ";
}
Function openUs ()
{
Window. open ('.. /pic/Default. aspx ', '', 'height = 420, width = 660, top = 100, left = 150, toolbar = no, menubar = no, scrollbars = no, resizable = no, location = no, status = no ');
}
Function selface (str, type, imgWidth, imgHeight)
{
Parent. ExcuteInsertImg (str, type, imgWidth, imgHeight); // call the function of the parent window
}
-->
</Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
Image name: & nbsp; <asp: TextBox ID = "txt_Pic" runat = "server" Width = "100px" Height = "15px"> </asp: TextBox> & nbsp;
<Asp: ImageButton ID = "btnSearch" runat = "server" Alt = "query icon" ImageUrl = "~ /Images/09.gif"
Width = "22" Height = "22" OnClick = "btnSearch_Click"/> & nbsp;
<Asp: ImageButton ID = "ImageButton1" runat = "server" ImageUrl = "~ /Images/gif_48_003.gif"
AlternateText = "Custom icon" OnClientClick = "openUs ();" Width = "21" Height = "21"/> & nbsp;
<Asp: ImageButton ID = "ImageButton2" runat = "server" ImageUrl = "~ /Images/Close-72x72.png"
AlternateText = "Close Window" Width = "20" Height = "20" OnClientClick = "closewindow ();"/>
</Div>
<Div id = "tabs1">
<Div class = "menu1box">
<Ul id = "menu1">
<Li class = "hover" onclick = "setTab (1, 0)"> <a href = "#"> small icon </a> </li>
<Li onclick = "setTab (1, 1)"> <a href = "#"> large icon </a> </li>
</Ul>
</Div>
<Div class = "main1box">
<Div class = "main" id = "main1">
<Ul class = "block">
<Li>
<Asp: Label ID = "lb_200" runat = "server" Text = "Label"> </asp: Label> </li> </ul>
<Ul>
<Li>
<Asp: Label ID = "lb_300" runat = "server" Text = "Label"> </asp: Label> </li> </ul>
</Div>
</Div>
</Div>
<Div id = "enlarge_images" style = "background-color: White; border: 1px solid blue; position: absolute; float: left; display: none; width: 90px; height: 90px ">
<A href = "#" style = "top: 5%; position: relative "> </a>
</Div>
<Div id = "enlarge_images_right" style = "background-color: White; border: 1px solid blue; position: absolute; float: right; display: none; width: 90px; height: 90px ">
<A href = "#" style = "top: 5%; position: relative "> </a>
</Div>
</Form>
</Body>
</Html>
<Script type = "text/javascript">
Var main = document. getElementById ("main1 ");
Var gg = document. getElementsByTagName ("img ");
Var left = document. getElementById ("enlarge_images ");
Var img_right = document. getElementById ("enlarge_images_right ");
Var left_img = document. getElementById ("left_img ");
Var right_img = document. getElementById ("right_img ");
Var widthImg = 80;
Var heightImg = 80;
// The function of adaptive div size during image loading
Function imgOnLoad (obj ){
If (obj. width> = widthImg | obj. height> = heightImg ){
Obj. width = widthImg;
Obj. height = heightImg;
}
Else {
Obj. width = obj. width;
Obj. height = obj. height;
}
}
// Function used to move the cursor over an image
Function up (str, num ){
Left. style. display = "none ";
Img_right.style.display = "none ";
Left_img.src = "";
Right_img.src = "";
If (num> 7 ){
Img_right.style.display = "none ";
Left. style. display = "block ";
Left_img.src = str;
Left. style. top = document. body. scrollTop + 53 + "px ";
Left. style. left = document. body. scrollLeft + 1 + "px ";
}
Else {
Left. style. display = "none ";
Img_right.style.display = "block ";
Right_img.src = str;
Img_right.style.top = document. body. scrollTop + 53 + "px ";
Img_right.style.right = document. body. scrollLeft + 1 + "px ";
}
}
// Function used to move the cursor out of an image
Function onMouseout (str ){
Left. style. display = "none ";
Img_right.style.display = "none ";
}
</Script>
The background code mainly describes the code for dynamically Binding data:
Private void binBigImg ()
{
String SQL = "select * from exam. ex_q_images_list where IMAGE_SIZE_TYPE = 1 order by image_times ";
DataTable dt = conn. getDataTable (SQL );
StringBuilder sb = new StringBuilder ();
Int lngCols = 12;
Sb. append ("<table id = \" tb_max \ "border = \" 1px \ "style = \" border: solid 1px # d7d7d7 \ "cellspacing = \" 0 \ "cellpadding = \" 0 \ "> \ n ");
If (dt! = Null & dt. Rows. Count> 0)
{
For (int I = 0; I <= dt. Rows. Count-1; I ++)
{
# Region Application
String trans = "..." + dt. Rows [I] ["image_server_path"]. ToString () + dt. Rows [I] ["image_file_name"]. ToString ();
String n = trans;
String type = dt. Rows [I] ["image_size_type"]. ToString ();
String imgWidth = dt. Rows [I] ["image_width"]. ToString ();
String imgHeight = dt. Rows [I] ["image_hight"]. ToString ();
# Endregion
If (I + 1 = 1)
{
Sb. Append ("<tr> ");
}
If (I + 1) % lngCols! = 0)
{
Sb. append ("<td align = \" left \ "> </td> \ n ");
}
Else
{
Sb. append ("<td align = \" left \ "> </td> \ n ");
Sb. Append ("</tr> ");
}
Num ++;
If (num = 14)
{
Num = 0;
}
}
}
Sb. Append ("</tr> </table> ");
This. lb_300.Text = sb. ToString ();
}
Well, this function can also be implemented.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
