zoukankan      html  css  js  c++  java
  • GridView使用lightbox,鼠标点击显示图片效果

    对Css 和Js的引用,因为用了母板页,所以,我在aspx.cs文件中添加了引用,形式为:

    View Code
     1 protected void Page_Load(object sender, EventArgs e)
    2 {
    3
    4 LiteralControl lc = new LiteralControl("<script type=\"text/javascript\" src=\"../js/jquery.js\"></script><script type=\"text/javascript\" src=\"../js/jquery.lightbox-0.5.js\"></script>");
    5
    6 this.Page.Header.Controls.Add(lc);
    7 mlman.Common.CssHelper.AddStyleSheet(this, "../css/jquery.lightbox-0.5.css"
    );
    8 if (!IsPostBack)
    9 {
    10 //ddl_brandbind();
    11 if (!string.IsNullOrEmpty(Session["ShopUserId"].ToString()))
    12 {
    13 BindGridViewList(int.Parse(Session["ShopUserId"].ToString()));
    14 }
    15 }
    16 }

    同时,我还修改了Jquery.lightbox-0.5.js中的图片路径,将其更改为自己系统的实际路经。

    先看lightbox的使用说明:

    <script type="text/javascript">  
    $(
    function() {
    // 第一种选择
    $('a[@rel*=lightbox]').lightBox(); // 选择所有的rel为lightbox的链接
    // 第二种选择
    $('#gallery a').lightBox(); // 选择id为gallery下的所有链接
    // 第三种选择
    $('a.lightbox').lightBox(); // 选择所有class为lightbox的链接
    // 第四种选择
    $('a').lightBox(); // 选择页面中所有的链接
    //…………还有更多的选择,发挥你的想象力吧
    });
    </script>

    gridview 动态生成id,而第一种选择用法是基于ID,效果不能实现。我用了第二种,这段代码,在

    aspx页面中增加。

    <script type="text/javascript">
    $(
    function() {
    $(
    'a[@rel*=lightbox]').lightBox();
    //$('#gallery a').lightBox();
    });
    </script>

    说说后台对GridView的绑定,我使用了HyperLink,其aspx代码为:

    转换为模板后:

            <asp:TemplateField HeaderText="名称">
                <ItemTemplate>
                    <asp:HyperLink ID="HyperLink2" runat="server"></asp:HyperLink>
                </ItemTemplate>
            </asp:TemplateField>

            。。。。

    aspx.cs代码,在DataBound事件初始化时:(红色代码)

        protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
            {
                mlman.BLL.D_PRODUCTS product = new mlman.BLL.D_PRODUCTS();
                mlman.BLL.D_PRODUCT_IMAGE proimg = new mlman.BLL.D_PRODUCT_IMAGE();
                if (e.Row.RowType == DataControlRowType.DataRow)
                {

                    int productId = int.Parse(DataBinder.Eval(e.Row.DataItem, "proid").ToString());
                    mlman.Model.D_PRODUCTS model = new mlman.Model.D_PRODUCTS();
                    model = product.GetModelByCode(productId);
                    HyperLink hlink = new HyperLink();
                    hlink = (HyperLink)e.Row.FindControl("HyperLink2");
                   
                    if (model != null)
                    {
                        hlink.NavigateUrl = "/SiteUser/" + proimg.GetModelByCode(productId).Url;
                        hlink.Text = model.Name;  
                        hlink.ToolTip = model.Name;
                        hlink.Attributes.Add("rel", "lightbox");
                        e.Row.Cells[1].Text = model.Size;
                       
                    }
                    else
                    {
                        e.Row.Cells[1].Text = "位置规格";
                    }
                    e.Row.Cells[5].Attributes.Add("onclick", "javascript:return confirm('注意:您确定要删除这商品的报价?')");
                }
            }

    实现后的效果:(点击名称时触发实现)

      

  • 相关阅读:
    欧拉公式
    isap的一些想法
    错误合集
    Hello World
    PAT (Advanced Level) Practice 1068 Find More Coins
    PAT (Advanced Level) 1087 All Roads Lead to Rome
    PAT (Advanced Level) 1075 PAT Judge
    PAT (Advanced Level) 1067 Sort with Swap(0, i)
    PAT (Advanced Level) 1017 Queueing at Bank
    PAT (Advanced Level) 1025 PAT Ranking
  • 原文地址:https://www.cnblogs.com/mushaobai/p/2171934.html
Copyright © 2011-2022 走看看