frameset 与弹出层拖拽结合使用

最新推荐文章于 2021-08-08 00:09:57 发布

weixin_30544657

最新推荐文章于 2021-08-08 00:09:57 发布

阅读量94

点赞数

原文链接：http://www.cnblogs.com/sanpi/archive/2010/01/23/1654862.html

版权

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>

后台代码为空

--------------------------------------------------------------------------------------------------

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">

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">

这两个同样后台代码为空

------------------------------------------------------------------------------------------------

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>

        document.onmouseup = Up;
        document.onmousemove = Move;
        //点击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="#" οnclick="a()">弹出层</a></li>
            <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;" οnmοusedοwn="Down()">
                </td>
                <td style="width: 2%; border-left: solid 1px; cursor: hand" οnclick="ssdel()">
                     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">

后台代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
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属性火狐不支持。

转载于:https://www.cnblogs.com/sanpi/archive/2010/01/23/1654862.html

weixin_30544657

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
frameset 与弹出层拖拽结合使用

Default.aspx left.aspx right.aspx top.aspx link.aspx分别是主页、左部、右部、顶部、弹出层------------------------------------------------------------------------Default.aspx<%@ Page Language="C#" Au...
复制链接

扫一扫