Как я могу использовать стили themeroller в «обычных» частях страницы?

Question

У меня есть веб-приложение, к которому я недавно применил тему jQuery ThemeRoller. Теперь я хочу, чтобы простой элемент

имел такой же прямоугольник с закругленными углами, как заголовок диалогового окна или заголовок даты. Как я могу наилучшим образом применить их к моим элементам, которые не являются частью больших конструкций пользовательского интерфейса jQuery? Я начал просто устанавливать значения класса css вручную, основываясь на том, что я видел в инструменте Chrome для инспекторов, и я прошел путь до того, как начал волноваться, что это не обязательно будет лучшим способом так как я обхожу любую логику присваивания класса css, которая может возникнуть внутри пользовательского интерфейса jQuery. Итак, есть ли более простой способ применения этих стилей, или я должен просто пойти по пути явной установки стилей CSS для моих заголовков?

Answer 1

Стивед Браун ответ вполне корректно.

Вы можете применить закругленные углы к любому содержащему элементу, используя префикс ui-corner-. Например, чтобы применить закругленные углы ко всем четырем углам элемента div, вы должны использовать ui-corner-all.

Чтобы стилизовать только верхние углы этого элемента, вы должны применить ui-corner-tr ui-corner-tl для углов TopLeft и TopRight.

Answer 2

Нет никакого волшебства в стилях CSS jQuery ThemeRoller. Если вы посмотрите на генерируемые им CSS-файлы, то обнаружите, что они, как правило, четкие, лаконичные и достаточно легкие для чтения.

Закругленные углы в ThemeRoller CSS не будут работать в IE, поэтому вы, возможно, не захотите слишком сильно зависеть от них, но если вы это сделаете, просто примените CSS, используя style = 'blah'.

Answer 3

Другая возможность, описанная выше, заключается в том, что если вы знаете атрибуты CSS, которые хотите скопировать, вы можете сделать это программно, например:

var defaultColor = $(".ui-state-default").css("color");
var defaultMargin = $(".ui-state-default").css("margin");

и примените их к своим элементам

$(".your-css-class").css("color",color);
$(".another-css-class").css("margin",margin);

и т.д.

Вроде неуклюжий, но он позволяет вашим CSS-разработчикам обновлять themerolled темы, и вам больше не нужно беспокоиться об обновлении любого вашего кода.