第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定

onmouseover和onmouseout

標(biāo)簽:
JavaScript

如果你曾看过这篇,http://www.cnblogs.com/insus/articles/1411057.html ,它是在GridView控件中演示,但是它的方法在Repeater控件是无法复制的。
由于看到论坛上有网友问及,花上一点点时间做了Repeater控件的演示。首先看看效果(动画结束,尝试刷新网页):


 

为了能在Repeater控件上实现onmouseover和onmouseout样式,Insus.NET想只要控到表的行即可,在Repeater控件的OnItemCreated事件中去实现,需要分别写好ItemTemplate模版与AlternatingItemTemplate模版,另外还注意的地方,就是把tr转为web控件,这样好在cs好找到。

.aspx(部分):

5acf073b0001405b00110016.jpgView Code  <asp:Repeater ID="Repeater1" runat="server" OnItemCreated="Repeater1_ItemCreated">
            <HeaderTemplate>
                <table border="1" cellpadding="3" cellspacing="0">
                    <tr>
                        <td>
                            MediaTypeId
                        </td>
                        <td>
                            TypeName
                        </td>
                        <td>
                            Description
                        </td>
                        <td>
                            IsActive
                        </td>
                        <td>
                            CreateDate
                        </td>
                    </tr>
            </HeaderTemplate>            
            <ItemTemplate>
                <tr id="itl" runat="server">
                    <td>
                        <%# Eval("MediaTypeId") %>
                    </td>
                    <td>
                        <%# Eval("TypeName")%>
                    </td>
                    <td>
                        <%# Eval("Description")%>
                    </td>
                    <td>
                        <%# Eval("IsActive")%>
                    </td>
                    <td>
                        <%# Eval("CreateDate")%>
                    </td>
                </tr>
            </ItemTemplate>
            <AlternatingItemTemplate>
                <tr id="att" runat="server">
                    <td>
                        <%# Eval("MediaTypeId") %>
                    </td>
                    <td>
                        <%# Eval("TypeName")%>
                    </td>
                    <td>
                        <%# Eval("Description")%>
                    </td>
                    <td>
                        <%# Eval("IsActive")%>
                    </td>
                    <td>
                        <%# Eval("CreateDate")%>
                    </td>
                </tr>
            </AlternatingItemTemplate>
            <FooterTemplate>
                </table>
            </FooterTemplate>
        </asp:Repeater>

 

.aspx.cs(部分),有一点需要留意的是,首先获取行的BackColor,这样好的Mouse out时,回复原来的Color:

5acf073b0001405b00110016.jpgView Code  protected void Repeater1_ItemCreated(object sender, RepeaterItemEventArgs e)
    {
        if (e.Item.ItemType == ListItemType.Item)
        {
            if (e.Item.FindControl("itl") != null)
            {
                HtmlTableRow htr_itl = (HtmlTableRow)e.Item.FindControl("itl");
                ApplyStyle(htr_itl, htr_itl.BgColor);
            }
        }

        if (e.Item.ItemType == ListItemType.AlternatingItem)
        {
            if (e.Item.FindControl("att") != null)
            {
                HtmlTableRow htr_att = (HtmlTableRow)e.Item.FindControl("att");
                ApplyStyle(htr_att, htr_att.BgColor);
            }
        }
    }

    private void ApplyStyle(HtmlTableRow htr, string trBackColor)
    {
        string onmouseoverStyle = "this.style.backgroundColor='Peachpuff'";
        string onmouseoutStyle = "this.style.backgroundColor='@BackColor'";

        htr.Attributes.Add("onmouseover", onmouseoverStyle);
        htr.Attributes.Add("onmouseout", onmouseoutStyle.Replace("@BackColor", trBackColor));

    }

 

 

點擊查看更多內(nèi)容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優(yōu)質(zhì)文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學(xué)習(xí),寫下你的評論
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊有機(jī)會得

100積分直接送

付費(fèi)專欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

舉報

0/150
提交
取消