jQuery UI弹出式自定义和css布局

我正在开发基于jQuery的Web应用程序。对于弹出窗口我使用jQuery UI对话框+ jQuery UI选项卡+ jScrollPpane自定义滚动条。主要结构如下：jQuery UI弹出式自定义和css布局

顶部的标题容器（高度：60px;）。
容器高度：85％; min-height：300px;其中包括：
- jQuery的UI选项卡与数据动态地填充点（2.1）
- 保存（表中的容器内），并取消按钮容器与绝对定位（底部：15像素;右：20像素），这应该是始终在弹出的底部。点（2.2）

对话框应可调整大小垂直，所以jQuery的对话框的可调整大小的选项是打开的。问题是：如何使中央容器（2.1）填充标题（1）和按钮容器（2.2）之间的所有空间？

2012-02-02 SergeyV

诀窍是有一个包装容器的所有元素。然后，使用内容容器，您必须将其设置为position：relative。然后，您在该元素内设置的任何绝对元素都可以相对于父元素进行定位。

我为你制定了jsbin.com的场景。提琴手网站不适合我。

所以你可以把它粘贴到jsbin看它的工作。注意：运行render时它不会工作，jsbin站点和jsfiddler不能正确应用css。这些网站并不是因为这个原因，你可以通过制作CSS所有内联样式来使其工作。

<html> 
<head> 
<style> 
    .wrapper {border:1px solid black;height:100%;background-color:#DDD } 
    .top { border:1px solid black;padding:15px;text-align:center;height:60px;background-color:#BBB;display:block; } 
    .tabs {} 
    .tabs li {list-style-type:none; display:inline; border:1px solid #888;padding:3px;background-color:#999} 
    .tabs li:hover {background-color:#AAA;} 
    .container {position:relative; border:1px solid;min-height:300px;height:85%;} 
    .buttonSection {position:absolute;bottom:15px;right:20px;} 
</style> 
</head> 
<body> 
    <div class="wrapper" > 
    <div class="top" style=""> 
     <p>This is the top maybe a banner?</p></div> 

    <div id="container" > 
     <div class="buttonSection" style=" " > 

     <ul class="tabs" style="margin:0px;padding:0px;"> 
     <li>Button 1</li> 
     <li>Button 2</li> 
     </ul> 

     </div> 
     <ul class="tabs"> 
     <li>Link 1</li> 
     <li>Link 2</li> 
     </ul> 
     <p>This is your body Container. I suggest using list instead of using tables for links or tabs.</p> 
    </div> 
    </div> 
</body> 
</html>

来源

2012-02-07 14:39:13 Jpepper

jQuery UI弹出式自定义和css布局

回答

相关问题