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

最新推荐文章于 2021-04-09 18:40:52 发布

chenguang79

最新推荐文章于 2021-04-09 18:40:52 发布

阅读量5.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： jquery server function xhtml asp object

本文链接：https://blog.youkuaiyun.com/chenguang79/article/details/5306247

javascript 专栏收录该内容

53 篇文章

订阅专栏

最近在看一些关于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"></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; } } }