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('注意:您确定要删除这商品的报价?')");
                }
            }

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

      

  • 相关阅读:
    Shell脚本中$0、$#、$@等的意义
    shell脚本中常见的一些特殊符号和作用详解
    shell脚本中的反引号,单引号,双引号与反斜杠
    Shell中反引号(`)与$()用法的区别
    自己在linux上编译、链接、动态库和静态库的学习笔记
    让ie6 7 8 9支持原生html5 websocket
    解决浏览器不兼容websocket
    WebSocket兼容到低版本浏览器
    UART和RS232/RS485的关系,RS232与RS485编程
    TTL和RS232之间的详细对比
  • 原文地址:https://www.cnblogs.com/mushaobai/p/2171934.html
Copyright © 2011-2022 走看看