1

简介：

我有一个带有链接按钮的中继器，当我单击某个按钮时，我希望它并且只有它变得透明，并且其余按钮不会改变。

D尾：

我有一个 LinkBut​​tons 中继器：

<div style="position: relative">
<asp:Repeater runat="server" ID="repStatuses" 
        onitemdatabound="repStatuses_ItemDataBound"
        onitemcommand="repStatuses_ItemCommand">
  <ItemTemplate>
        <div id="divLinkBtn" style="display:inline"><asp:LinkButton ID="linkBtnStatuses" runat="server" CommandName="ShowText" 
            CommandArgument='<%# Eval("Priority") + ";" + Eval("LevelID") + ";" + Eval("ID") %>'
            OnClientClick='<%# "MyFunc(" + Eval("Priority") + ");" %>'>
            <div runat="server" id="divSts" class="fontAriel" ></div>
        </asp:LinkButton></div>
  </ItemTemplate>
    </asp:Repeater>
</div>

LinkBut​​tons 使用以下 Jquery 函数在 Page_Load 上淡入。这是 Page_Load 和 jquery 代码：

页面加载：

protected void Page_Load(object sender, EventArgs e)
{
    SetPageTitle();

    if (!Page.IsPostBack)
    {
        LoadStatusesAndButtons();

        ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "tmp", "<script type='text/javascript'>LoadBarWithFadeIN();</script>", false);
    }

    else
        ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "tmp", "<script type='text/javascript'>LoadBar();</script>", false);

}

jQuery

function LoadBarWithFadeIN() {
$(document).ready(function () {

    $('a[id*="repStatuses"]').each(function () {
        $(this).show(2500);
        $(this).delay(1000);
    });
});

}

function LoadBar() {
$(document).ready(function () {

    $('a[id*="repStatuses"]').each(function () {
        $(this).show(0);

    });
});

}

当我单击某个 LinkBut​​ton 时，它会变成透明的。我发现这只code会使第一个 linkBut​​tons 透明：

  $(document).ready(function () {
  $('#divLinkBtn').click(function () {
      alert('divlinkbutton presed');
      $(this).css({ 'opacity': 0.4 });
  });
});

问题是按钮变得透明一秒钟，然后页面加载LoadBar()功能并且透明度消失。 另一件事是这个函数不处理其余的按钮。

现在我需要的是这个链接按钮应该保持透明，直到我点击其他链接按钮。

我正在考虑一种方法来按原样加载所有未点击的按钮，并以某种方式加载具有透明度的特定点击按钮，但由于缺乏编码经验，我找不到这样做的方法。

对不起“短”的帖子:)

任何帮助将不胜感激！！！！！！！

4

2 回答 2

1

睡个好觉后，这里有一个简单的（虽然不是最优雅的）解决方案：

 protected void repStatuses_ItemCommand(object source, RepeaterCommandEventArgs e)
{
   SetAsOriginal();

    //Get the linkbutton that was clicked
    LinkButton lnkBtnClicked = e.CommandSource as LinkButton;       //e- is the object of the repeater. CommandSource- is the clicked
    if (lnkBtnClicked != null)
    {
        SetOpacity(lnkBtnClicked, "0.4");
    }

private void SetAsOriginal()
{
    foreach (RepeaterItem item in repStatuses.Items)
    {
        LinkButton btn = item.FindControl("linkBtnStatuses") as LinkButton;
        SetOpacity(btn, "1.0");
    }
}

private void SetOpacity(LinkButton linkButton, string opacityValue)         //SET THE OPACITY TO THE SPECIFIC linkbutton 
{
    linkButton.Style.Add("opacity", opacityValue);
}

问题是，上面的答案非常好并且有效，但没有满足我的要求。我只需将单击的按钮设置为透明，其余按钮将设置回原始按钮。

所以我决定为那些可能遇到类似问题的人指定解决方案。

谢谢大家。

Ps：特别感谢@Lukasz M

于 2013-01-03T08:10:29.463 回答
1

该按钮在第二个页面加载后重新出现的可能原因是您在 jQuery 中所做的更改未保存在 ViewState 中，因此不会在回发中保留。如果您在单击时获得回发LinkButton，您可以保存它在服务器端被单击的信息（即在处理单击事件的 c# 代码中添加单击的类）。然后，您可以更改客户端脚本以LinkButton使用此类为所有控件设置透明度（以及对最近单击的按钮的一些特殊处理）。您也可以只定义一个类，为元素提供适当的透明度设置。让我知道您是否需要有关此代码的任何帮助。

关于第二个问题，请注意您通过 ID 获取元素，并且它应该在 html 页面的范围内是唯一的。这可能就是为什么它只适用于第一个。要使其适用于所有元素，请改用类。您可以像这样在您的 aspx 中分配一个类：

<div id="divLinkBtn" class="divLnkBtnClass" style="display:inline">... </div>

并像这样分配点击处理程序：

$(document).ready(function () {
$('.divLnkBtnClass').click(function () {
  alert('divlinkbutton presed');
  $(this).css({ 'opacity': 0.4 });
});
});

这应该使脚本适用于所有divs。

我还没有测试过这个代码，所以如果你有任何问题，请告诉我，我可以修复它并帮助你让它正常工作。

更新

很少有方法可以保持回发的透明度。您在每次单击项目时都会获得回发，因此我认为保存它并在服务器端恢复它将是实现所需效果的最简单方法之一。

  • 首先，在代码隐藏中向您的页面添加一个私有字段：

    private List<String> itemsClicked = null;

    和HiddenField你的 aspx 中的一个控件（在控件之外Repeater）：

    <asp:HiddenField runat="server" ID="hfButtonsClicked" Value="" />

    我们将使用它HiddenField来保存已单击ClientID的控件。LinkButton

  • 然后，在Page_Load方法中，使用隐藏字段中的值初始化字段：

    protected void Page_Load(object sender, EventArgs e)
{
    SetPageTitle();

    //initialize itemsClicked before binding data to the repeater
    itemsClicked = hfButtonsClicked.Value.Split(new char[] { ';' }, StringSplitOptions.RemoveEmptyEntries).ToList();

    if (!Page.IsPostBack)
    {
        LoadStatusesAndButtons();

        ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "tmp", "<script type='text/javascript'>LoadBarWithFadeIN();</script>", false);
    }
    else
    {
        ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "tmp", "<script type='text/javascript'>LoadBar();</script>", false);
    }
}

  • 接下来，在页面中添加一个新方法，将在下一步中使用：

    private void SetOpacity(LinkButton linkButton, string opacityValue)
{
    linkButton.Style.Remove("opacity");
    linkButton.Style.Add("opacity", opacityValue);
}

  • 最后一件事是在单击项目时添加保存 id 的代码，您可以使用单击事件或仅使用现有的OnItemCommand事件处理程序：

    protected void repStatuses_ItemCommand(object source, RepeaterCommandEventArgs e)
{
    //get LinkButton that was clicked
    LinkButton lnkBtnClicked = (e.CommandSource as LinkButton);
    if (lnkBtnClicked != null)
    {
        //if item was not clicked before, so the opacity is not set
        if (lnkBtnClicked.Style["opacity"] == null)
        {
            //save control ClientID in the HiddenField
            hfButtonsClicked.Value += String.Format(";{0}", lnkBtnClicked.ClientID);

            SetOpacity(lnkBtnClicked, "0.4");
        }
    }

    //the rest of the original code should be here
    //...
}

以及当项目绑定数据时在回发后恢复不透明度的方法：

    protected void repStatuses_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        LinkButton lnkBtn = (e.Item.FindControl("linkBtnStatuses") as LinkButton);

        if (lnkBtn != null)
        {
            //if item was clicked before, so the opacity should be restored
            if (itemsClicked.Contains(lnkBtn.ClientID))
            {
                SetOpacity(lnkBtn, "0.4");
            }
        }

        //the rest of the original code should be here
        //...
    }

我在示例应用程序中实现了这一点，它似乎按预期工作。如果您在使用此代码时遇到任何困难，请告诉我。

补充说明

您也可以使用ViewState对象而不是附加HiddenField控件，但如果您想更改解决方案以最终在 jQuery 中保存/恢复不透明度，使用 aHiddenField应该更容易。

还应该对代码进行一些改进（即将字符串分隔符移动到只读变量或不对 opacity 属性的值进行硬编码），但我这样写是为了使答案更短，更容易理解读。

于 2013-01-01T12:56:25.757 回答