html - 使用 jQueryUI 创建向导 HTML/CSS 界面

标签 html css jquery-ui

我正在尝试创建一个类似向导的界面,其中有后退/下一步和重新开始按钮,主要内容占据了大部分空间。这是在 HTML/CSS 中,并且将 jQueryUI 用于 HTML 应用程序 (HTA) 以仅针对 IE8。目前这是我所拥有的:

HTML:

<body scroll="no">
    <div id="maincontent">
    </div>
    <div id="buttons">
        <button class="bottombutton" id="backbutton">Back</button>
        <button class="bottombutton" id="startoverbutton">Start Over</button>
        <button class="bottombutton" id="nextbutton">Next</button>
    </div>
</body>

CSS:

.bottombutton {
    position: absolute;
    margin-top: 20px;
    bottom: 10px;
}

.centeredbuttons {
    margin-left: auto;
    margin-right: auto;
}

#backbutton {
    left: 10px;
}

#nextbutton {
    right: 10px;
}

#startoverbutton {
    position: absolute;
    left: 100px;
}

#maincontent {
    position: fixed;
    height: 340px;
    width: 96.3%;
    top: 12px;
    left: 12px;
}

但是,根据 Accordion 的内容( Accordion 总是放在#maincontent 中)和我希望它填充父 div(#主要内容)。尽管 Accordion 设置为 heightStyle: "fill",但页面之间的高度很容易发生变化。 (使用 load() 将内容动态加载到#maincontent 中。)

这就是我希望它看起来的样子(有些页面确实如此):

Correct Look

以及一些页面的外观(有些比这差很多):

Bad Look

最佳答案

最终我发现了如何解决这个问题。我的问题主要是由于试图将内容加载到具有我的尺寸参数的 div (#maincontent) 中。我需要做的是在 Accordion div 上指定我的尺寸参数,而不是仅在 #maincontent 上指定高度尺寸。这是我为使其工作所做的更改:

#maincontent {
    height: 300px;
}

#modeaccordion {
    height: 300px;
    width: 96.3%;
    position: fixed;
    top: 12px;
    left: 12px;
    max-height: 300px;
}

现在,当在页面之间加载时,您甚至无法判断它们是完全不同的 html 页面——大小保持非常稳定。

关于html - 使用 jQueryUI 创建向导 HTML/CSS 界面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20458203/

相关文章:

css - -webkit-pictograph 不适用于 safari

CSS - 图像加载

HTML/CSS 需要禁用边距

javascript - jQueryUI : Autocomplete with large data is hanging browser

jquery-ui - 选择菜单下拉菜单在调整大小时移动

css - 如何让 Bootstrap Tour 使用 jQuery 对话框?

html - 为什么 flexbox 子项具有相同的高度?

javascript - 水印mootools帮助

html - 三个流体 div,中心 div 包含一个表单输入

html - 为什么 Pattern 属性不适用于类型 ="date"?