好久没写博客了,最近一直在弄一个项目比较忙,呵呵。不过我还是感觉挺充实的,好了废话不多说了,前阵子我做了一个类似于QQ表情的功能,刚开始以为挺简单的,后来因为自己的前台知识比较匮乏,以至于进展比较缓慢,不过现在终于也完成了,现在分享下代码,以供朋友们借鉴。(本例使用的数据库是Oracle)
首先一个页面是关于输入信息的,code:
<tr>
<td>
题 目:
</td>
<td colspan="3">
<table>
<tr>
<td class="style3">
<a>
<img src="../images/126.gif" alt="添加图标" onclick="showface('NewText')" style="cursor: hand"
width="15" height="15" /></a> <a>
<img src="../images/292.gif" alt="添加符号" onclick="showspacial('NewText')" style="cursor: hand"
width="15" height="15" />
</a>
</td>
</tr>
<tr>
<td colspan="2" class="style3">
<div id="NewText" runat="server" style="height: 70; 380px" class="Textarea" onclick="course_focus();" contenteditable>
</div>
</td>
</tr>
</table>
</td>
</tr>
通过点击“添加图标”的img按钮来打开图标页。图标页是一个嵌入到该页面的iFrame页。code:
<div id="face" style="position: absolute; 307; display: none; z-index: 10;
font-size: 13px; background: #ffff00">
<iframe src="exam_face_temp.aspx" width="307px" height="355px"></iframe>
</div>
接着是关于“题目”下的div的一些函数,code:
//点击“添加图标”按钮时记录当前焦点的位置,并在该位置上插入图标
function showface(str)
{
mouse_loc=str;
var oText =document.getElementById(mouse_loc);
oText.focus();//获得焦点
document.getElementById("spacial").style.display="none";
var ei = document.getElementById("face");
ei.style.top = event.clientY + oText.offsetHeight+15 + document.body.scrollTop+ "px";//控制鼠标的位置Y坐标,始终显示在div的下面
ei.style.left = event.clientX + 2 + "px";//控制鼠标的位置X坐标
ei.style.display="inline";
}
//在div中插入图片
function ExcuteInsertImg(strUrl,imgType,imgWidth,imgHeight)
{
var oText =document.getElementById(mouse_loc);
oText.focus();
var sel=document.selection.createRange(); //创建对象
if(imgType == "1"){
sel.pasteHTML("<p><img src='"+ strUrl +"' width='"+ imgWidth +"' height='"+ imgHeight +"' /></p>")
}
else{
sel.pasteHTML("<img src='"+strUrl+"' width='"+ imgWidth +"' height='"+ imgHeight +"'/>");//转换成Img对象
}
document.getElementById("face").style.display = "none";//点击完成后隐藏
}
这就是这个页面的大体code了。
下面是整个图标页面的code:
前台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>图片管理</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;
}
/*第二种形式*/#tabs1
{
text-align: left;
262px;
}
.menu1box
{
position: relative;
overflow: hidden;
height: 22px;
262px;
text-align: left;
top: 0px;
left: 0px;
}
#menu1
{
position: absolute;
top: 0;
left: 2px;
z-index: 1;
443px;
}
#menu1 li
{
float: left;
display: block;
cursor: pointer;
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;
112px;
margin-left: 1px;
}
.main1box
{
clear: both;
margin-top: -1px;
border: 1px solid #333;
height: 300px;
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.document.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);//调用父窗口的函数
}
-->
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
图片名称: <asp:TextBox ID="txt_Pic" runat="server" Width="100px" Height="15px"></asp:TextBox>
<asp:ImageButton ID="btnSearch" runat="server" Alt="查询图标" ImageUrl="~/images/09.gif"
Width="22" Height="22" OnClick="btnSearch_Click" />
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/images/gif_48_003.gif"
AlternateText="自定义图标" OnClientClick="openUs();" Width="21" Height="21" />
<asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/images/Close-72x72.png"
AlternateText="关闭窗口" 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="#">小图标</a></li>
<li onclick="setTab(1,1)"><a href="#">大图标</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; 90px; height:90px">
<a href="#" style="top:5%; position:relative"><img src="" id="left_img" alt="" style="vertical-align:middle;top:-49%; left:-50%; 80px" onload="imgOnLoad(this);"/></a>
</div>
<div id="enlarge_images_right" style="background-color:White; border:1px solid blue; position:absolute; float:right; display:none; 90px; height:90px">
<a href="#" style="top:5%; position:relative"><img src="" alt="" id="right_img" style="vertical-align:middle;top:-49%; left:-50%; 80px" onload="imgOnLoad(this);" /></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;
//图片加载时自适应div大小的函数
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 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 onMouseout(str){
left.style.display = "none";
img_right.style.display = "none";
}
</script>
后台code主要介绍下动态绑定数据的code:
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\"><img src=\"" + n + "\" alt=\"" + dt.Rows[i]["image_name"].ToString() + "\" onmouseover=\"up('" + trans + "'," + num + ")\" onmouseout=\"onMouseout('"+ trans +"')\" onmousedown=\"selface('" + trans + "','"+ type +"','"+ imgWidth +"','"+ imgHeight +"')\" width=\"20px\" height=\"20\" /></td>\n");
}
else
{
sb.Append("<td align=\"left\"><img src=\"" + n + "\" alt=\"" + dt.Rows[i]["image_name"].ToString() + "\" onmouseover=\"up('" + trans + "'," + num + ")\" onmouseout=\"onMouseout('" + trans + "')\" onmousedown=\"selface('" + trans + "','"+ type +"','"+ imgWidth +"','"+ imgHeight +"')\" width=\"20px\" height=\"20\" /></td>\n");
sb.Append("</tr>");
}
num++;
if (num == 14)
{
num = 0;
}
}
}
sb.Append("</tr></table>");
this.lb_300.Text = sb.ToString();
}
好了,这个功能也算可以实现了,呵呵。