Kuidas luua veebilehe valikuliste printimisveergudega

HTML div tags võimaldab saidi omanikel luua keerulisi veebilehe paigutusi, mis sisaldavad veerge. Näiteks teie ettevõtte veebilehtedel võib olla kolm div elementi, mis loovad teie põhisisu keskmist veergu ja veergu selle mõlemal küljel. Paljud saidi omanikud kasutavad linkide kuvamiseks vasakut veergu ja reklaami näitamiseks paremat. Kui inimesed printivad veebilehti, saadavad nende brauserid kogu lehe oma printeritele. Lisades oma koodile @media reegli ja mõne JavaScripti rea, saate luua valitavad veerud, mida inimesed vajadusel printida saavad.

1.

Käivitage HTML-redaktor või Notepad ja kleepige järgmine kood mõne HTML-dokumendi kehaosasse:

Vasak veerg siin

Keskmise veeru siin

Parem veerg siin

See kood võimaldab teil näidata valikulist veeru printimist. Kolm div tags, leftColumn, centerColumn ja rightColumn, istuvad vanemdivis, mille ID on "konteiner". Igal div-märgil on unikaalne id-väärtus ja iga silt viitab CSS-klassi nimele "veerud".

2.

Lisage allpool loetletud kood pärast eelmises sammus näidatud koodi:

Prindi vasakpoolse veeru trükikeskuse veeru printimise parem veerg

See div-silt sisaldab kolme märkeruutu. Iga märkeruut vastab ühele teie veergudele. Märkeruudude all olev nupp kutsub lehekülge printiva printPage funktsiooni.

3.

Lisage oma dokumendi peaosasse järgmine kood:

Koodi esimene plokk loob veergude klassi, mida kolm div-märgendit viitavad. Selles näites on taustavärvi väärtus kollane. See võimaldab teil näha kolme veergu lihtsalt. Laiuse parameeter määrab iga veeru laiuse 30 protsendini brauseri vaateväljast. Float, kõige olulisem atribuut, on väärtusega "vasakul". Vasakule seadistamine näitab, et brauserid panevad iga klassi, mis viitab klassile eelmise, kõrvale. Järgmine koodi plokk loob @media reegli. Meedia reeglid võimaldavad teil muuta printimise ajal ja mitmesugustes muudes stsenaariumides dokumendi kuvamise viisi. Selles näites on olemas printimise reegel. See määratleb klassi nimega noprint. See klass määrab mis tahes HTML-elementi, mis viitab klassile "ei ole", kuvamise omaduse.

4.

Kleepige allpool loetletud kood koodi pärast eelmises etapis kirjeldatud koodi:

See kood loob printPage funktsiooni. See funktsioon kontrollib iga ruudu kontrollitud olekut. Kui märk puudub, lisab kood noprint klassi ruuduga seotud divile. Kui linnuke väljub, eemaldab kood noprinti klassi sellest div. Näiteks, kui keegi kontrollib märkeruutu "Print Left Column", mis on seotud diviga, mille ID on "leftColumn", eemaldab kood noprint klassi sellest div.

5.

Salvestage dokument ja vaadake seda oma brauseris. Nende veergude all näete kolme kollast veergu ja kolme märkeruutu. Märkeruutude nimed on "Print Left Column", "Print Center Column" ja "Print Right Column".

6.

Pange märkeruudud mistahes soovitud kastidesse ja klõpsake "Prindi". Avaneb dialoogiaken Print. See on sama vaikimisi aken, mida näete dokumentide printimisel teistes rakendustes. Valige printer, mida soovite kasutada, ja klõpsake veebilehe printimiseks nuppu "Prindi". Trükitud lehekülg sisaldab valitud veerge.

Vihje

  • Veeru valimiseks on mitmeid viise. Selles näites kuvatakse ruudud, mida saate klõpsata, et valida veerud, mida soovite printida. Teie kood võib paluda inimestel kirjutada nende veergude nimed, mida nad soovivad printida, või isegi avada hüpikaken, mis kuvab raadionuppe, mida nad saavad valida. Saate valida ka veerud, mida soovite, et inimesed saaksid ise printida. Sõltumata kasutatavast valikumeetodist peate helistama printPage funktsiooni. Funktsiooni addClass ja removeClass meetodid täidavad kogu töö. Kui soovite divi printida, täitke sellele sarnane avaldus: $ (myColumnID) .removeClass ("noprint"). Asendage "myColumnID" väljadega, mida soovite printida. Vastasel juhul nimetage selle asemel lisaklassi meetodit, nagu alljärgnev näide illustreerib: $ (myColumnID) .addClass ("noprint");
 

Jäta Oma Kommentaar