2

我有一个与 iGoogle 类似的仪表板页面。我需要让页面在可用的客户端宽度上工作。我编写了一个 JavaScript 来获取宽度并将其均匀地分布在 div 中。该脚本为 div 设置element.style{width: 540px;}并且在页面加载时运行良好。它类似于：

window.onload = function SetWidth(){ document.getElementById(dashCell.id).style.width = (Math.round(window.innerWidth / 2)) + 'px';};

现在是痛点。该页面有一个带有Timer的UpdatePanel ，它每 5000 毫秒执行一次 PostBack。当页面再次加载并且element.style丢失时，这会破坏设计。

我已经阅读了有关流体 CSS 的内容，并且还考虑过使用min-width和max-width CSS 属性。但现在需要的是让它以这种方式工作。我现在需要一个可行的解决方案，但是绝对欢迎更好和正确的方法来实现这一点。

4

1 回答 1

1

您必须重新运行脚本并在每个 UpdatePanel 上重新修复您的 css 样式

    <script type="text/javascript">     
   function SetWidth(){ 
      document.getElementById(dashCell.id).style.width = (Math.round(window.innerWidth / 2)) + 'px';
    }
    // set the onload call
    window.onload = SetWidth;

    // capture the UpdatePanel javascript events
    var prm = Sys.WebForms.PageRequestManager.getInstance();    
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);

    function InitializeRequest(sender, args) {      
    }

     // after the updatepanel complet refix the css
    function EndRequest(sender, args) {
         SetWidth();
    }
    </script>

或者将初始化值保存在某处，然后在更新面板重新调整后应用它们。

于 2012-06-11T13:30:52.633 回答