Jak vytvořit webovou stránku s volitelnými sloupci tisku

Značky HTML div umožňují majitelům stránek vytvářet složité rozvržení webových stránek, které obsahují sloupce. Webové stránky vaší firmy například obsahují tři elementy div, které tvoří hlavní sloupec pro váš hlavní obsah a sloupec na obou stranách. Mnoho majitelů stránek používá pro zobrazení odkazů levý sloupec a ten správný na zobrazování reklam. Když lidé tisknou webové stránky, jejich prohlížeče posílají celou stránku do svých tiskáren. Přidáním pravidla @media a několika řádky jazyka JavaScript do kódu můžete vytvářet volitelné sloupce, které mohou lidé podle potřeby tisknout.

1.

Spusťte editor HTML nebo Poznámkový blok a vložte následující kód do části těla libovolného dokumentu HTML:

Levý sloupec zde

Centrální sloupec zde

Pravý sloupec zde

Tento kód umožňuje prokázat volitelný tisk sloupců. Tři tagy div, leftColumn, centerColumn a rightColumn, sedí uvnitř nadřazené diviny, jejíž id je "kontejner". Každý tag div má jedinečnou hodnotu id a každá značka odkazuje na třídu CSS s názvem "sloupce".

2.

Přidejte níže uvedený kód za kódem uvedeným v předchozím kroku:

Tisk sloupce v levém sloupci tiskového středu vytiskněte pravý sloupec

Tento tag div obsahuje tři zaškrtávací políčka. Každé zaškrtávací políčko odpovídá jednomu ze sloupců. Tlačítko pod zaškrtávacími políčkami vyvolá funkci printPage, která vytiskne stránku.

3.

Do hlavní části dokumentu přidejte následující kód:

První blok kódu vytvoří třídu sloupců, na které odkazují tři tagy div. V tomto příkladu je hodnota barvy pozadí žlutá. To vám umožní vidět tři sloupce snadno. Šířka parametru nastavuje šířku každého sloupce na 30 procent plochy prohlížeče. Float, nejdůležitější atribut, má hodnotu "left". Nastavení vlevo informuje prohlížeče, aby umístili každý div, který odkazuje na třídu vedle předchozí. Další blok kódu nastavuje pravidlo @media. Pravidla médií umožňují vylepšit způsob zobrazení dokumentu na obrazovce při tisku a v řadě dalších scénářů. V tomto příkladu existuje pravidlo pro tisk. Definuje třídu s názvem noprint. Tato třída nastaví vlastnost zobrazení libovolného prvku HTML, který odkazuje na třídu, na hodnotu "none".

4.

Vložte níže uvedený kód JavaScript za kód popsaný v předchozím kroku:

Tento kód vytvoří funkci printPage. Tato funkce zkoumá kontrolovaný stav každého zaškrtávacího políčka. Není-li zaškrtávací značka, kód přidá třídu noprint do div přidruženého k zaškrtávacímu políčku. Pokud zaškrtne značka, kód odebere třídu noprint od té div. Například, pokud někdo zkontroluje políčko "Tisk levého sloupce", který je spojen s div, jehož id je "leftColumn", kód odebere třídu noprint z té div.

5.

Uložte dokument a zobrazte jej ve svém prohlížeči. Uvidíte tři žluté sloupce a tři zaškrtávací políčka pod těmito sloupci. Jména zaškrtávacích políček jsou "Vytisknout levý sloupec", "Sloupec tiskového středu" a "Pravý sloupec tisku".

6.

Zaškrtněte všechny požadované políčka a klikněte na tlačítko "Tisk". Otevře se dialogové okno Tisk. Toto je stejné výchozí okno, které se zobrazí při tisku dokumentů v jiných aplikacích. Vyberte tiskárnu, kterou chcete použít, a klepnutím na tlačítko "Tisk" vytiskněte webovou stránku. Vytištěná stránka bude obsahovat vybrané sloupce.

Tip

  • Existuje mnoho způsobů, jak vybrat sloupec. Tento příklad zobrazuje zaškrtávací políčka, pomocí kterých můžete klepnutím zvolit sloupce, které chcete vytisknout. Váš kód by mohl požádat uživatele o zadání názvů sloupců, které by chtěli vytisknout, nebo dokonce otevírat vyskakovací okno, které zobrazuje přepínací tlačítka, která si mohou vybrat. Můžete také vybrat sloupce, které chcete, aby se lidé mohli tisknout sami. Bez ohledu na použitou metodu výběru budete muset volat funkci printPage. Funkce metody addClass a removeClass provádí veškerou práci. Pokud chcete div tisknout, proveďte příkaz podobný tomuto: $ (myColumnID) .removeClass ("noprint"). Nahraďte "myColumnID" identifikátorem div, který chcete vytisknout. V opačném případě zavolejte metodu addClass místo toho, jak následuje v následujícím příkladu: $ (myColumnID) .addClass ("noprint");
 

Zanechte Svůj Komentář