2

iGoogle に似たダッシュボードのあるページがあります。利用可能なクライアント幅でページを機能させる必要があります。幅を取得し、div 間で均等に分散する JavaScript を作成しました。このスクリプトは、div のelement.style{width: 540px;}を設定し、ページの読み込み時に非常にうまく機能します。そのようなもの：

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

ここで問題が発生します。このページには、5000 ミリ秒ごとに PostBack を実行するTimerを持つUpdatePanelがあります。これにより、ページが再度読み込まれ、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>

または、初期化値をどこかに保存し、updatepanel refress の後にそれらを適用します。

于 2012-06-11T13:30:52.633 に答える