Использование 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 применяется на этой странице. Вы можете найти это полезным.