首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

点击列表某个字段的链接,在当前页弹出一个窗口展示详细信息

2012-11-14 
点击列表某个字段的链接,在当前页弹出一个窗口显示详细信息首先先贴页面的代码吧link href../css/core.

点击列表某个字段的链接,在当前页弹出一个窗口显示详细信息
首先先贴页面的代码吧

<link href="../css/core.css" type="text/css" rel="stylesheet"/>//弹窗的样式<script src="../js/popup_layer.js" type="text/javascript" ></script>//调用弹窗的js控制<script type="text/javascript" src="../js/jquery-1.4.2.js" ></script>//有用到jquery

<script type="text/javascript">function clickA(e) {//e表示传入的对象        var el = e;    //这样赋值主要是防止e的值被修改了        var et = e;        var elW = el.offsetWidth;  //获取对应控件的宽度        eLeft = el.offsetLeft;   //获取该控件相对左边位置        /*       offsetLeft是相对父层的位置,如果要取窗口的,则需要一直往上            */          while (el.offsetParent != null) {            eParent = el.offsetParent            eLeft += eParent.offsetLeft            el = eParent        }                        //同上        eTop = et.offsetTop;        while (et.offsetParent != null) {            eParent = et.offsetParent            eTop += eParent.offsetTop  // Add parent top position            et = eParent        }/******************以上代码暂时用不到,后面会解释************************/        var ctlid = e.id; //获取该控件的id,记住是小写        new PopupLayer({ trigger: "#" + ctlid, popupBlk: "#blk2", closeBtn: "#close2",                offsets: {                x: eLeft + elW,                    y: -41                }            });         //上面这个是调用别人写的弹窗,参数说明下/*trigger 控件的 id/以及标签,例如a标签就写个a,记住这边都是用jquery来写的popupBlk 要显示控件的idcloseBtn 关闭窗口的a标签控件id,这个不要修改,参考下面offsets 定义x,y坐标. x指定离所要点击列的横向左边, y坐标在js已经写好了。*//**这边又有奇怪现象,要说说下当指定列表(gridView)其中一个字段为a标签,那么生成的时候多个a,但是id是一样的,如果指定trigger是id的话,那么只有第一个a标签可以看见详细信息。所以一定要指定为标签,写上a即可,那么所有选中a标签的都可以弹出来了,但是弹出窗口位置始终在一个地方,那么最上面代码就有用了,将其循环,这样y坐标就动态了。**/            //var CustId = e.custid;            var CustId = e.attributes["custid"].nodeValue; //为了兼容谷歌等/*上面这个也很有意思,其实该标签并没有custid这个属性,我开始时是用Title,其实asp:LinkButton是没有这个属性的,应该是叫ToolTip,但是运行后会变成a标签,a标签是有Title的,所以可以加,但是如果你两个一起加,那么以ToolTip为主,Title就会失效。原来是想传递主键用个属性来,鼠标移上去提示名称,结果发现属性不够用,于是就随便把custid拿去试用下,发现竟然可以,不过谷歌不行,于是采用第二种,二者都兼容了。*///用到了jquery的ajax方法,指定需要返回数据的页面,其他照抄吧,对这目前研究很少。        $(".ajax.load").load("../Association/CustInfo.aspx?CustId=" + CustId,function(responseText, textStatus, XMLHttpRequest) {    this;})return false;    }</script>


<asp:TemplateField HeaderText="客户名称">    <ItemTemplate>   <%-- <button title='<%#Eval("CustId") %>' id="btnload" ><%#Eval("CustName") %></button>--%>   <asp:LinkButton ID="btnload" custid='<%#Eval("CustId") %>' runat="server" OnClientClick="return clickA(this);return false;"  ToolTip='<%#Eval("CustName") %>' Css><%#Eval("CustName") %></asp:LinkButton>     <%-- <a href="javascript:clickA()" title='<%#Eval("CustId") %>' id="btnload" ><%#Eval("CustName") %></a>--%>    </ItemTemplate></asp:TemplateField>/*  form之前写以下代码      */<div id="blk2" style="display:none;">            <div id="close2" class="ajax load"></label> //这句是显示返回的数据的,目前不明白为什么 class里面写 ajax load就能接收到数据            </div>            <div class="foot"><div class="foot-right"></div></div>        </div>


热点排行