Question

我有一个可调整大小的jquery-ui对话框，我只想在其中只有一个div可滚动。我认为这在固定大小的对话框中相当容易，但是这个确实需要调整大小。这是我的对话框的示例

<div id="dialog">
<div id="dialogHeader">
    <span>Header Content</span><br/>
    <input type='radio' value='1' name='options' checked='checked' />Option 1
    <input type='radio' value='2' name='options' />Option 2
</div>
<div id="dialogContent">
    <table>
        <thead>
            <tr><th>Column 1</th><th>Column 2</th></tr>
        </thead>
        <tbody>
            <tr><td>Data Item</td><td>Data Item</td></tr>                
            <tr><td>Data Item</td><td>Data Item</td></tr>
        </tbody>
    </table>
</div>
<div id="dialogFooter">
    <span>Footer Content</span>
</div>    
</div>

对话框代码：

$(document).ready(function(){    
  $("#dialog").dialog({
    width: 400,
    height: 300,
    autoOpen: true,
    resizable: true,
    title: 'My Dialog'
  });
});

我认为这有点自我解释 - 我想要＆＃34; dialogHeader＆＃34; div保持在顶部和＆＃34; dialogFooter＆＃34;中的内容。当用户向上或向下滚动时，在对话框底部保持可见。

Answer 1

好的，我用一些javascript和一点css

来解决这个问题

$(document).ready(function(){    
  $("#dialog").dialog({
    width: 400,
    height: 300,
    autoOpen: true,
    resizable: true,
    title: 'My Dialog',
    resize: function(event,ui){
        ResizeDialog();
    }
  });

  ResizeDialog();
});

function ResizeDialog(){
  var headerHeight = $('#dialogHeader').height();
  var footerHeight = $('#dialogFooter').height();
  var theadHeight = $('#dialogContent thead').height();
  var dialogHeight = $('#dialog').height();
  $('#dialogContent').height(dialogHeight - (headerHeight + footerHeight) - 25);
}

CSS：

#dialogContent{    
  overflow: scroll;
}

修复了可调整大小的jquery-ui对话框中的页眉和页脚？

1 个答案: