frameset 与弹出层拖拽结合使用
2010-01-23 19:39 三皮开发时 阅读(864) 评论(0) 编辑 收藏 举报Default.aspx left.aspx right.aspx top.aspx link.aspx
分别是主页、左部、 右部、顶部、弹出层
------------------------------------------------------------------------
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>
</head>
<frameset id="frame" framespacing="0" border="false" rows="90,*" frameborder="1">
<frame name="top" scrolling="no" src="top.aspx"></frame>
<frameset framespacing="0" boder="false" cols="180,*" marginwidth="0" marginheight="0" frameborder="1" >
<frame name="left" scrolling="auto" src="left.aspx"></frame>
<frame name="right" scrolling="auto" src="right.aspx"></frame>
</frameset>
</frameset>
</html>
后台代码为空
--------------------------------------------------------------------------------------------------
left.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="left.aspx.cs" Inherits="left" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
left
</div>
</form>
</body>
</html>
top.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="top.aspx.cs" Inherits="top" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
top
</div>
</form>
</body>
</html>
这两个同样后台代码为空
------------------------------------------------------------------------------------------------
right.aspx 右部
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="right.aspx.cs" Inherits="right" %>
<!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>
<script language="javas
function a() {
document.getElementById("cover").style.display = "block";
document.getElementById("div1").style.display = "block";
}
var obj = ""; //变量 控制div id属性
var index = 1000; //控制z-index的值 ,暂时数据库中没超过1000个数据 div的个数 zIndex也就没有超过1000的
document.on
document.on
//点击div获取焦点
function getPanelFocus(obj) {
if (obj.style.zIndex != index) {
index += 2;
obj.style.zIndex = index;
}
}
function Up() {
if (obj != "") {
document.all(obj).releaseCapture();
obj = ""; //别忘记让obj释放，备下次使用.
}
}
function Down() {
obj = "div1";
document.all("div1").setCapture();
pX = event.x - document.all("div1").style.pixelLeft;
pY = event.y - document.all("div1").style.pixelTop;
}
function Move() {
if (obj != "") {
document.all(obj).style.left = event.x - pX;
document.all(obj).style.top = event.y - pY;
}
}
function ssdel() {
if (event) {
Iobj = event.srcElement;
while (Iobj && Iobj.tagName != "DIV") Iobj = Iobj.parentElement;
}
var id = Iobj.id;
document.getElementById("div1").style.display = "none";
document.getElementById("cover").style.display = "none";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="position: absolute">
right
<ul>
<li><a href="#" on
<li><a href="http://www.blog.163.com/zhoubo2005hao">三皮博客</a></li>
</ul>
</div>
<div id="cover" style="position: absolute; width: 1000px; height: 1000px;
margin: 0; filter: alpha(opacity=50); background-color:#d0d0d0; display: none;">
</div>
<div id="div1" style="border: 1px solid #666; position: absolute; margin: 120px 120px;
display: none;">
<table style="height: 20px; width: 700px; border-bottom: solid 1px">
<tr>
<td style="height: 20px; width: 98%; cursor: move;" on
</td>
<td style="width: 2%; border-left: solid 1px; cursor: hand" on
x
</td>
</tr>
</table>
<iframe style="border: 0px" frameborder="0" width="600px" height="500px" src="link.aspx">
</iframe>
</div>
</form>
</body>
</html>
后台代码:空
--------------------------------------------------------------------------------------------------------------
link.aspx 弹出层
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="link.aspx.cs" Inherits="link" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div id="div1">
<asp:GridView ID="GridView1" runat="server">
<Columns>
<asp:CommandField ShowDeleteButton="True"
DeleteText="<div on
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
后台代码:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Da
using System.Da
using System.Configuration;
public partial class link : System.Web.UI.Page
{
string strCon = ConfigurationManager.AppSettings["ConnectionString"].ToString();
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Bind();
}
}
public void Bind()
{
SqlConnection con = new SqlConnection(strCon);
SqlCommand cmd = new SqlCommand("select * from tb_Vote", con);
SqlDataAdapter adapt = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
adapt.Fill(ds);
GridView1.DataSource = ds;
GridView1.DataBind();
}
}
------------------------------------------------------------------------------------------------------------------------------------------
over!
注意事项 ：1.使用frameset时 将body 标签删除
2.层的position 属性 使用absolution 绝对定位
3.层的滤镜、模糊效果：filter: alpha(opacity=50); background-color:#d0d0d0; 背景白色模糊50%
另外，filter属性 火狐不支持。
