Препятствование отделению и его содержанию быть распечатанным
Объекты в списке, который Вы представили, являются действительно зависимым ситуации - они будут варьироваться от приложения до приложения. Для некоторых приложений будет нужна кнопка сохранения, некоторые не будут. Некоторые условия гарантируют модальное диалоговое окно, некоторые не будут.
Мое главное правило для разработки применимого интерфейса: Следуйте существующим соглашениям UI. Ничто не смущает пользователя больше, чем UI, который не работает как ничто, что они когда-либо использовали. Lotus Notes имеет один из худших пользовательских интерфейсов, когда-либо созданных, и это почти полностью, потому что они шли вразрез с общими соглашениями UI с примерно всем, что они сделали.
, Если Вы подвергаете сомнению, как необходимо разработать определенную часть UI, думайте о нескольких стандартных/известных приложениях, которые обеспечивают схожую функциональность и видят, как они делают это.
9 ответов
Распространенным методом является использование отдельного CSS для печати. У вас может быть CSS для всех носителей и один для печати:
<link rel="stylesheet"
type="text/css"
media="print" href="print.css" />
В print.css просто поместите display: none в div.
Davide
Вставьте таблицу стилей только для печати:
<link rel="stylesheet" href="/path/print.css" media="print" />
Затем поместите css, чтобы скрыть div в этой таблице стилей
<link type="text/css" rel="stylesheet" media="print" href="/css/print.css" />
в этом стиле файла CSS поместите display: none; для элементов, которые не нужно печатать
Укажите в HTML-коде таблицу стилей, используемую для печати:
<link rel="stylesheet" type="text/css" media="print" href="print.css"/>
А в этом CSS:
#mydiv {display: none;}
http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml
Дополнительная информация о таблицах стилей печати
Вы можете включить таблицу стилей, которая применяется только при печати.
<LINK REL="stylesheet" TYPE="text/css" MEDIA="print" HREF="print-specific-styles.css">
В этой таблице стилей вы можете скрыть ваши div и внести любые другие необходимые изменения.
Поскольку об этом не говорилось ранее, вам не обязательно иметь внешнюю таблицу стилей:
<style type="text/css" media="print">
.hideMeInPrint { display: none; }
</style>
Самое простое решение - добавить это в основной файл CSS. Обратите внимание, что при связывании файла CSS не следует указывать атрибут мультимедиа ( ):
@media print {
div.classname {
display:none;
}
}