Sådan oprettes en webside med valgbare udskrivningskolonner

HTML div-tags tillader webstedsejere at oprette komplekse websiderlayouter, der indeholder kolonner. Dine virksomheds websider kan for eksempel indeholde tre div-elementer, der opretter en centerkolonne for dit hovedindhold og en kolonne på hver side af den ene. Mange webstedsejere bruger venstre kolonne til at vise links og den rigtige til at vise annoncer. Når folk udskriver websider, sender deres browsere hele siden til deres printere. Ved at tilføje en @media regel og et par linjer af JavaScript til din kode, kan du oprette valgbare kolonner, som folk kan udskrive efter behov.

1.

Start et HTML-editor eller Notesblok og indsæt følgende kode i kropsdelen af ​​dine HTML-dokumenter:

Venstre kolonne her

Center kolonne her

Højre kolonne her

Denne kode giver dig mulighed for at demonstrere valgbar søjleudskrivning. Tre div tags, leftColumn, centerColumn og rightColumn, sidder inde i en forælder div, hvis id er "container." Hver div-tag har en unik id-værdi, og hvert tag henviser til en CSS-klasse med navnet "kolonner".

2.

Tilføj nedenstående kode efter koden vist i det foregående trin:

Udskriv venstre kolonne Print Center Kolonne Udskriv højre kolonne

Denne div-tag indeholder tre afkrydsningsfelter. Hver afkrydsningsfelt svarer til en af ​​dine kolonner. Knappen under afkrydsningsfelterne kalder funktionen PrintPage, der udskriver siden.

3.

Tilføj følgende kode til dit dokuments hovedafsnit:

Den første blok kode skaber kolonneklassen, som de tre div-tags henviser til. I dette eksempel er baggrundsfarvens værdi gul. Dette giver dig mulighed for nemt at se de tre kolonner. Breddeparameteren indstiller hver søjlens bredde til 30 procent af browservisningsområdet. Float, den vigtigste egenskab, har en værdi af "venstre". Indstilling til venstre fortæller browsere at placere hver div, der refererer til klassen ved siden af ​​den forrige. Den næste blok kode opretter en @media regel. Medie regler gør det muligt at justere, hvordan et dokument vises på skærmen, når det udskrives og i en række andre scenarier. I dette eksempel findes en udskrivningsregel. Det definerer en klasse med navnet noprint. Denne klasse angiver visningsegenskaben for ethvert HTML-element, der refererer til klassen til "ingen".

4.

Indsæt JavaScript-koden nedenfor, efter koden beskrevet i det foregående trin:

Denne kode opretter funktionen PrintPage. Denne funktion undersøger den afkrydsede tilstand for hver afkrydsningsfelt. Hvis der ikke findes en markering, tilføjer koden noprint-klassen til den div, der er knyttet til afkrydsningsfeltet. Hvis et afkrydsningsfelt udgår, fjerner koden noprint-klassen fra den div. Hvis nogen for eksempel kontrollerer afkrydsningsfeltet "Udskriv venstre kolonne", som er knyttet til div'en, hvis id er "leftColumn", fjerner koden noprint-klassen fra den div.

5.

Gem dokumentet og se det i din browser. Du får se dine tre gule søjler og tre afkrydsningsfelter under disse kolonner. Navne i afkrydsningsfelterne er "Udskriv venstre kolonne", "Print Center Column" og "Print Right Column."

6.

Sæt kryds i nogen af ​​de afkrydsningsfelter du kan lide og klik på "Udskriv." Et udskrivningsdialogvindue åbnes. Dette er det samme standardvindue, du ser, når du udskriver dokumenter i andre programmer. Vælg den printer, du vil bruge, og klik på "Udskriv" for at udskrive websiden. Den udskrevne side vil indeholde de valgte kolonner.

Tip

  • Der er mange måder at vælge en kolonne på. Dette eksempel viser afkrydsningsfelter, som du kan klikke for at vælge kolonner, du gerne vil udskrive. Din kode kan bede folk om at skrive navnene på de kolonner, de gerne vil udskrive eller endda åbne et pop op-vindue, der viser radioknapper, de kan vælge. Du kan også vælge de kolonner, du vil have, at folk kan udskrive dig selv. Uanset hvilken udvælgelsesmetode du bruger, skal du ringe til PrintPage-funktionen. Funktionens addClass- og removeClass-metoder udfører alt arbejdet. Hvis du vil have en div til udskrivning, skal du udføre en sætning svarende til denne: $ (myColumnID) .removeClass ("noprint"). Udskift "myColumnID" med id'et af div'en du ønsker at udskrive. Ellers skal du ringe til addClass-metoden i stedet, da følgende eksempel illustrerer: $ (myColumnID) .addClass ("noprint");
 

Efterlad Din Kommentar