您的位置：首页 > Web前端 > JQuery

jquery实现点击信息弹出层的功能

2010-02-11 11:49 686 查看

最近在看一些关于jquery的文章,感觉它太强大了.对于我这个平时对javascript不感冒的人来说,都有很大的吸引力.

今天有一个兄弟正好问我一个弹出层的功能,我就试着用jquery写了一下,感觉简单了很多,拿出来分享一下.有不对的地方请指正

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._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>

<mce:script type="text/javascript" src="jquery-1.3.2-vsdoc2.js" mce_src="jquery-1.3.2-vsdoc2.js"></mce:script>

<mce:script type="text/javascript"><!--
$(function() {

//设置层的显示速度
var speed = 500;

//datalist中点击图片显示层
$("#DataList1:img").click(function(event) {
event.stopPropagation();

//这个功能是当我点击一个图片会显示出一个层,当我点另一个图时,这个层只是平移了,没有消失与显示的感觉.加上这个就会有了.

if ($("#divPop").css("display") != "none") {
$("#divPop").hide(speed);
}
var offset = $(event.target).offset();
$("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });
$("#divPop").show(speed);

//为显示层加载信息
$.get("Views.aspx", { "id": $(event.target).attr("alt") }, function callback(data) {
$("#divPop").html(data);
});
}
);
$(document).click(function(event) { $("#divPop").hide(speed); });
$("#divPop").click(function(event) { $("#divPop").hide(speed); });
})

// --></mce:script>

</head>
<body>
<form id="form1" runat="server">

<asp:DataList ID="DataList1" runat="server" RepeatColumns="2">
<ItemTemplate>
<img src="<%# DataBinder.Eval(Container.DataItem," mce_src="<%# DataBinder.Eval(Container.DataItem,"images") %>" alt="<%# DataBinder.Eval(Container.DataItem,"id")  %>" />
</ItemTemplate>
</asp:DataList>
<div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute;width: 300px; height: 100px; display:none;">
</div>
</form>
</body>
</html>

Default.aspx.cs

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
namespace WebApplication1
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{

this.DataList1.DataSource = GetDt();
this.DataList1.DataKeyField = "id";
this.DataList1.DataBind();
}
}
/// <summary>
/// 建立一个datatable为它存几个值
/// </summary>
/// <returns></returns>
public DataTable GetDt()
{
DataTable dt = new DataTable();
DataColumn dc = new DataColumn();
dc.ColumnName = "id";
dc.DataType = Type.GetType("System.String");
dt.Columns.Add(dc);
DataColumn dc1 = new DataColumn();
dc1.ColumnName = "images";
dc1.DataType = Type.GetType("System.String");
dt.Columns.Add(dc1);
for (int i = 0; i < 6; i++)
{
DataRow dr = dt.NewRow();
dr["id"] = i.ToString();
dr["images"] = "images/" +  i.ToString() + ".png";
dt.Rows.Add(dr);
}
return dt;
}
}
}

Views.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Views.aspx.cs" Inherits="WebApplication1.Views" %>
<!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>

<asp:Image ID="Image1" runat="server" />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

</div>
</form>
</body>
</html>

Views.aspx.cs

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
namespace WebApplication1
{
public partial class Views : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
DataTable dt = GetDt();
DataRow[] dr = dt.Select("id='"+Request.QueryString["id"].ToString()+"'");
this.Image1.ImageUrl = dr[0]["images"].ToString();
this.Label1.Text = dr[0]["contents"].ToString();
}
}
public DataTable GetDt()
{
DataTable dt = new DataTable();
DataColumn dc = new DataColumn();
dc.ColumnName = "id";
dc.DataType = Type.GetType("System.String");
dt.Columns.Add(dc);
DataColumn dc1 = new DataColumn();
dc1.ColumnName = "images";
dc1.DataType = Type.GetType("System.String");
dt.Columns.Add(dc1);
DataColumn dc2 = new DataColumn();
dc2.ColumnName = "contents";
dc2.DataType = Type.GetType("System.String");
dt.Columns.Add(dc2);
for (int i = 0; i < 6; i++)
{
DataRow dr = dt.NewRow();
dr["id"] = i.ToString();
dr["images"] = "images/" + i.ToString() + ".png";
dr["contents"] = "这是第 " + i.ToString() + " 幅图片";
dt.Rows.Add(dr);
}
return dt;
}
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航