Когда я загружаю тему jQuery-ui, что мне нужно добавить, чтобы получить значения по умолчанию, которые выглядят так же, как на демонстрационной странице jQuery-ui?
Диалог, который я вижу из коробки, ОГРОМНЫЙ (см. ниже). Я знаю, что все css доступны мне с демонстрационной страницы, но я не специалист по CSS, и не знаю, что взять, и что уйти.
ИЗМЕНИТЬ
Здесь ссылка jsFiddle, показывающая то же самое.
ИЗМЕНИТЬ
Я вижу, в чем проблема: P
body{font-size:10px;}
Размеры по отношению к странице (больше макета жидкости). Таким образом (по крайней мере, в скрипке) изменение размера шрифта тела фиксирует его. Просто измените размер шрифта ваших страниц, и диалог изменится вместе с ним.
Лучший способ: изменить базу jQuery-ui font-size:
.ui-widget{font-size:12px;}
См. эту скрипту для примера.
Для этой проблемы с заголовком диалога вы можете просто добавить атрибут ниже в родительский класс диалога
.ui-dialog { clear: both; }
Для справки, jQuery UI Dialog Заголовокbar слишком высокий
Если вы посмотрите на themeroller.css с помощью своего любимого инспектора веб-страниц, вы найдете следующее: -
#themeroller {
font-size: 10px;
}
#themeroller button,
#themeroller input,
#themeroller select,
#themeroller textarea {
font-size: 12px;
}
Немного копания в HTML показывает, что <div id="themeroller"> охватывает всю "демонстрационную" область страницы, поэтому все виджеты jquery-ui находятся внутри него и поэтому берут размер шрифта относительно этих значений.
Глядя на мою "слишком большую" страницу, обычный текст имеет размер шрифта 18 пикселей. Это происходит от .ui-виджета в темах /ui -darkness/jquery-ui.css, имеющих font-size: 1em, который он вычисляет из моего базового размера шрифта браузера 16px. Я обнаружил этот размер базы, проверив простой документ:
<html><body>
<span style="font-size: 100%">here is some plain body text</span
</body></html>
Итак, ответ на вопрос о том, как установить размер шрифта для jquery-ui widgets, - это установить размер шрифта для входящего в него элемента. <body> (как рекомендовано Joseph Marikle) гарантированно поразит все, но может быть слишком широким для ваших нужд, и в этом случае вы должны использовать внутренний <div> вместо этого, <span>, вероятно, злой, потому что вы не должны обертывать объекты уровня блока в неблокирующие элементы, но проверьте это утверждение с помощью Политики стилей CSS, я просто хакер!
Я собирался рассказать о том, почему дизайнеры предпочли основывать высоту на em, которая представляет собой ширину, а не ex, которая является высотой. Тем не менее, я подозреваю, что ответ: em дает более последовательные результаты по более широкому диапазону шрифтов, так как в большинстве случаев высота "l" примерно такая же, как ширина "m". И наоборот, если вы использовали 2ex как свою основную меру, вы получили бы странные высоты в шрифтах с очень короткими или очень длинными восходящими и десендерными по сравнению с высотой "x".
jquery ui - это структура, которую вы можете изменить, создав новую или существующую тему:
/*css which made title too large, reduce padding as you need*/
.ui-dialog .ui-dialog-titlebar {
padding: 0.5em 1em 0.3em;
position: relative;
}
вы можете использовать это правило css для применения меньшего размера шрифта:
.ui-dialog{font-size: 62.5%;}