使用计时器突出显示asp:Repeater中的(粗体字体)行

时间:2012-11-28 08:50:22

标签: c# asp.net timer repeater highlight

我有一个使用Repeater显示的活动列表。我已经使用Timers来显示这些,所以Timer不是问题。这是我必须在Timer_tick方法中添加的代码。

“highlight-Timer”应该一次突出显示一个项目/行,然后我想显示一些与突出显示的行相关的信息。

如果使用其他控件更容易,那就没问题了。我不必是中继器。我只是因为造型的可能性而使用它(它不是只显示一行,而是有几个换行符等。)

根据要求:

(中继器)

<asp:Repeater ID="Repeater1" runat="server">
    <ItemTemplate>
        <div id="divActivity" runat="server">
            <span style="font-size:30px;">
                <%# DataBinder.Eval(Container.DataItem, "act_headline") %>
            </span>
            <br />
            <img alt="mapIcon" src="../img/mapIcon.gif" height="15px" width="15px" style="position:absolute;" />
            <span style="font-size:12px; font-style:italic; margin-left:23px;">    
                <%# DataBinder.Eval(Container.DataItem, "act_place") %>
            </span>
            <img alt="watchIcon" src="../img/watchIcon.png" height="15px" width="15px" style="position:absolute;" /> 
            <span style="font-size:12px; font-style:italic; margin-left:23px;">
                <%# DataBinder.Eval(Container.DataItem, "act_start") %> - <%# DataBinder.Eval(Container.DataItem, "act_end") %>
            </span>
            <br />
            <div style="word-wrap: break-word; width:1000px; margin-top:20px; padding:0;">
                <%# DataBinder.Eval(Container.DataItem, "act_text") %>
            </div>
            <br />
                <img alt="infoIcon" src="../img/infoIcon.png" height="15px" width="15px" style="position:absolute;" />
            <span style="font-size:12px; margin-left:23px;"><a target="_blank" href="http://<%# DataBinder.Eval(Container.DataItem, "act_info") %>"><%# DataBinder.Eval(Container.DataItem, "act_info") %></a>
            </span>
        </div>
    </ItemTemplate>
</asp:Repeater>

我在Timer_tick事件中没有任何内容,因为我已经尝试了几件事,并在失败后将其删除。希望这就够了。

1 个答案:

答案 0 :(得分:0)

我会通过循环遍历Repeater.Items集合,在tick事件处理程序中使用类似的东西为突出显示的项目设置一个特殊的CSS类。

像这样(未经测试):

int currentHighlight = -1;
int nextHighlight = -1;
for (int i = 0; i < Repeater1.Items.Count; i++)
{
    HtmlControl htmlDiv = (HtmlControl)Repeater1.Controls[i].Controls[1];

    if (htmlDiv.Attributes["class"] != null)
    {
        if (htmlDiv.Attributes["class"].Contains("highlighted")) // this is the currently highlighted item
        {
            // record currently highlighted item index
            currentHighlight = i;

            // remove highlight
            htmlDiv.Attributes["class"].Replace("highlighted", "");
            htmlDiv.Attributes["class"].Trim();
        }
    }
}

if ((currentHighlight == -1) || (currentHighlight == Repeater1.Items.Count))
{
    // handle first Item highlighting
    nextHighlight = 1;
}
else
{
    // handle standard case
    nextHighlight = currentHighlight + 1;
}

// highlight next item
((HtmlControl)Repeater1.Controls[nextHighlight].Controls[1]).Attributes["class"] += " highlighted";

然后你可以使用highlighted CSS类来处理样式(你提到的粗体字体)以及JavaScript或jQuery中的一些特殊行为。

顺便说一句,您可以在RepeaterItem对象上进行任何其他操作,一旦获得当前突出显示的对象。