Пользовательский интерфейс jQuery слишком большой

Когда я загружаю тему jQuery-ui, что мне нужно добавить, чтобы получить значения по умолчанию, которые выглядят так же, как на демонстрационной странице jQuery-ui?

Диалог, который я вижу из коробки, ОГРОМНЫЙ (см. ниже). Я знаю, что все css доступны мне с демонстрационной страницы, но я не специалист по CSS, и не знаю, что взять, и что уйти.

Ответы

Ответ 1

Я вижу, в чем проблема: P

body{font-size:10px;}

Размеры по отношению к странице (больше макета жидкости). Таким образом (по крайней мере, в скрипке) изменение размера шрифта тела фиксирует его. Просто измените размер шрифта ваших страниц, и диалог изменится вместе с ним.

http://jsfiddle.net/hnBmC/

Ответ 2

Лучший способ: изменить базу jQuery-ui font-size:

.ui-widget{font-size:12px;}

См. эту скрипту для примера.

Ответ 3

Для этой проблемы с заголовком диалога вы можете просто добавить атрибут ниже в родительский класс диалога

.ui-dialog { clear: both; }

Для справки, jQuery UI Dialog Заголовокbar слишком высокий

Ответ 4

Если вы посмотрите на 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".

Ответ 5

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;
}

Ответ 6

вы можете использовать это правило css для применения меньшего размера шрифта:

.ui-dialog{font-size: 62.5%;}