jQueryUI ThemeRoller стили не отображаются в версии для печати - PullRequest
Новая
       21

jQueryUI ThemeRoller стили не отображаются в версии для печати

2 голосов
/ 03 августа 2011

Я использую ThemeRoller и jQueryUI на своей странице, и стили не применяются к версии для печати.

Есть ли где-нибудь в jQueryUI параметр, который бы заменял медиа на все вместо экрана? Или есть что-то еще, что мешает применению этих стилей к версии для печати. ​​

Ответы [ 3 ]

6 голосов
/ 11 августа 2011

Фоновые изображения, применяемые в CSS, не печатаются (по умолчанию).Если это проблема, которую вы видите, может быть, почему.Есть ли конкретные вещи, которые не печатают?

0 голосов
/ 17 августа 2011

Вы можете решить эту проблему, просто убедившись, что CSS-файл jQuery Theme Roller имеет атрибут media.Он не имеет ничего общего с пользовательским интерфейсом jQuery, он присущ браузерам.

изменить 

<link rel="stylesheet" href="URL to your print.css" type="text/css" media="screen" />

на это (или добавить оба) 

<link rel="stylesheet" href="URL to your print.css" type="text/css" media="print" />
0 голосов
/ 17 августа 2011

В большинстве браузеров печать фоновых цветов и изображений отключена.Вам необходимо включить это, прежде чем вы сможете правильно видеть стили при печати. ​​

В IE выполните предварительный просмотр печати, затем нажмите кнопку «Параметры страницы».Вы увидите флажок Цвета фона и изображения .

В FireFox выполните предварительный просмотр, а затем нажмите кнопку «Параметры страницы».Вы увидите Печатать фон (цвета и изображения) .

В Chrome, к сожалению, без расширения IETAB не обойтись.См. эту ветку поддержки .

И чтобы доказать, что фоновые изображения, применяемые в CSS do , действительно печатаются, когда настройка в браузере включена, примитекод и поместить его в простую страницу HTML.Откройте его в IE, FireFox или других браузерах, которые поддерживают настройку печати изображений.Затем включите / выключите настройку.Вы увидите, как изображение маленькой стрелки появляется / исчезает в предварительном просмотре. 

    <style type="text/css">
        .link {
            background: url(http://www.famfamfam.com/lab/icons/silk/icons/control_play.png) no-repeat;
        }
        .link a {
            padding-left: 18px;
        }
    </style>

    <div class="link">
        <a href="#">Test Link</a>
    </div>
...