我正在一个展示一些瓷砖的网站上工作。瓷砖的高度可能根据插入的图像和文字而有所不同。为了确保所有瓷砖达到相同的高度,我在头部编写了以下脚本:
function BindEvents()
{
$(window).load(function ()
{
var maxHeight = Math.max.apply(null, $(".producttile").map(function () {
return $(this).height();
}).get());
$('.producttile').height(maxHeight);
maxHeight = Math.max.apply(null, $(".clistdiv").map(function () {
return $(this).height();
}).get());
$('.clistdiv').height(maxHeight);
});
}
以上脚本已绑定到datalist,如下所示:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<hr width="100%" noshade/>
<script type="text/javascript">
Sys.Application.add_load(BindEvents);
</script>
<asp:DataList
ID="DataList1"
runat="server"
onitemcommand="DataList1_ItemCommand1"
class="itemsdatalist"
RepeatDirection="Horizontal"
RepeatLayout="Flow"
onload="DataList1_Load">
<ItemTemplate>
...........rest of the code
现在,首次加载页面时,此绑定和磁贴自动调整工作正常。一个按钮触发ajax调用并引入更多tile并重新更新此更新面板。这就是问题所在。
BindEvents()
未再次调用,因此图块大小不同,不会再次自动调整。
我试图将脚本保留在更新面板内容模板中,希望它能正常工作,但没有奇迹,它根本不起作用。
请帮忙。
答案 0 :(得分:0)
最后我解决了这个问题。这是您的帮助解决方案。 我刚刚在页面加载上编写了以下代码,它工作得很完美。
protected void Page_Load(object sender, EventArgs e)
{
if (((ScriptManager)this.Master.FindControl("ScriptManager1")).IsInAsyncPostBack)
{
StringBuilder sb = new StringBuilder();
sb.Append("<script language='javascript' type='text/javascript'>");
sb.Append("Sys.Application.add_load(func);");
sb.Append("function func() {");
sb.Append("Sys.Application.remove_load(func);");
sb.Append("var maxHeight = Math.max.apply(null, $('.producttile').map(function () { return $(this).height(); }).get()); $('.producttile').height(maxHeight);");
sb.Append("maxHeight = Math.max.apply(null, $('.clistdiv').map(function () { return $(this).height(); }).get()); $('.clistdiv').height(maxHeight);");
sb.Append("}");
sb.Append("</script>");
ScriptManager.RegisterStartupScript(this, GetType(), "script", sb.ToString(), false);
}
}
感谢以下帮助我实现此解决方案的文章: The solution link
请告诉我这种方法有没有安全/性能漏洞?