Использование jQuery.UI CSS Framework для DIV Styling

Проект, над которым я сейчас работаю, использует инфраструктуру пользовательского интерфейса jQuery для некоторых своих виджетов. Чтобы предоставить пользователю глобальный внешний вид, я бы хотел использовать фреймворк и для CSS.

Сейчас я внедряю домашнюю страницу, похожую на панель управления, где пользователь может видеть общее состояние своих данных. Эта панель инструментов состоит из нескольких элементов div, которые должны быть выровнены в сетку.

Я пытаюсь стилизовать div как

<div class="ui-widget">
  <div class="ui-widget-header">Box Header</div>
  <div class="ui-widget-content">
    Content of the Box
  </div>
</div>

Позже я хотел бы реализовать некоторые перетаскиваемые и сортируемые функциональные возможности.

Проблема, с которой я сталкиваюсь сейчас, заключается в том, что ящики не выровнены должным образом.

У кого-нибудь есть подсказка по использованию jQuery.UI для такого вида работы css? Я изучал документацию по фреймворку CSS на jqueryui.com, но там не так много информации.

с уважением,

Гордон

3 ответа

Если ваш блок контента и блок заголовка не совпадают, это, вероятно, связано с разным заполнением в css, попробуйте установить заполнение вашего блока контента так же, как заполнение вашего заголовка. Это решило проблему, когда я столкнулся с этим.

Можете ли вы привести пример, где это не работает для вас?

Может быть, вы загружаете свой собственный css после загрузки jQuery-UI-css и что-то перезаписываете.

Я попробовал ваш пример, и он работает. Я не вижу ничего плохого... Какой браузер вы используете? Если вы используете IE случайно, это может быть проблемой. Хотя предполагается, что это кросс-браузер... Я не использую IE, поэтому не могу это проверить, извините. Попробуйте это с любым другим браузером и посмотрите, исправлено ли это. Также убедитесь, что вы используете файлы ui-core и ui-theme. Не включайте любой другой файл CSS и посмотрите, исправлено ли это. Я рекомендую вам использовать Firebug (в Firefox), чтобы увидеть, как применяются стили.

Проверьте, как CSS применяется на этой странице. Вы можете найти это полезным.

Другие вопросы по тегам