Создание интерфейса HTML / CSS мастера с использованием jQueryUI

0

Я пытаюсь создать волшебный интерфейс, где есть кнопки "назад/вперед" и "пуск" с основным содержимым, занимающим большую часть пространства. Это в 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;
}

Однако результат чрезвычайно несовместим при использовании jQueryUI Accordion в зависимости от содержимого Аккордеона (Аккордеон всегда помещается в #maincontent), и я бы хотел, чтобы он заполнил родительский div (#maincontent). Высота может легко варьироваться между страницами, несмотря на то, что Аккордеон установлен на heightStyle: "fill". (Содержимое загружается динамически в #maincontent с помощью load().)

Вот как мне хотелось бы выглядеть (и некоторые страницы):

Изображение 174551

И как выглядят некоторые страницы (некоторые из них намного хуже):

Изображение 174551

  • 0
    Где другие ваши вкладки? Я не понимаю, почему вы используете Аккордеон из этих скриншотов. Вот скрипка, смешивающая демоверсию jQueryUI Accordion / Fill с вашими именами и кнопками. Пожалуйста, обновите его так, чтобы оно воспроизводило вашу проблему.
  • 0
    У меня не всегда есть другие вкладки. Я использую его как последовательный стиль для каждой страницы мастера. В случае размещенных скриншотов есть только одна вкладка.
Показать ещё 3 комментария
Теги:

1 ответ

0
Лучший ответ

В конце концов я обнаружил, как это исправить. Мои проблемы в основном были связаны с попыткой загрузить контент в div (#maincontent), на котором были мои параметры калибровки. То, что мне нужно было, это указать параметры размера на аккордеоне div вместо этого только размер высоты, указанный на #maincontent. Вот что я изменил, чтобы заставить его работать:

#maincontent {
    height: 300px;
}

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

Теперь при загрузке между страницами вы даже не можете сказать, что они полностью разные html-страницы - размер остается очень устойчивым.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню