Web-sivun luominen valittavissa olevilla tulostuspylväillä

HTML-div-tunnisteiden avulla sivuston omistajat voivat luoda monimutkaisia ​​verkkosivun asetteluita, jotka sisältävät sarakkeita. Yrityksen Web-sivut saattavat sisältää esimerkiksi kolme div-elementtiä, jotka luovat keskimmäisen sarakkeen pääsisältösi ja sarakkeen molemmille puolille. Monet sivustojen omistajat käyttävät vasenta saraketta linkkien näyttämiseen ja oikean mainoksen näyttämiseen. Kun ihmiset tulevat Web-sivuja, niiden selaimet lähettävät koko sivun tulostimille. Lisäämällä koodiin @media-säännön ja muutaman JavaScript-rivin voit luoda valittavia sarakkeita, joita ihmiset voivat tulostaa tarpeen mukaan.

1.

Käynnistä HTML-editori tai Muistio ja liitä seuraava koodi minkä tahansa HTML-dokumenttisi runko-osaan:

Vasen sarake

Keskellä oleva sarake

Oikea sarake

Tämän koodin avulla voit näyttää valittavan sarakkeen tulostuksen. Kolme div-tagia, vasemmanpuoleinen sarake, centerColumn ja rightColumn, istuvat vanhemman divin sisällä, jonka id on "kontti". Jokaisella div-tunnisteella on yksilöllinen tunnusarvo ja jokainen tunniste viittaa CSS-luokkaan, jonka nimi on "sarakkeet".

2.

Lisää alla lueteltu koodi edellisessä vaiheessa näkyvän koodin jälkeen:

Tulosta vasemmanpuoleinen sarake Tulostuskeskuksen sarake Tulosta oikea sarake

Tämä div-tunniste sisältää kolme valintaruutua. Jokainen valintaruutu vastaa yhtä sarakkeistasi. Valintaruutujen alapuolella oleva painike vie sivun tulostavan printPage-toiminnon.

3.

Lisää seuraava koodi asiakirjan pääosaan:

Koodin ensimmäinen lohko luo sarakkeet, jotka kolme div-tunnisteita viittaavat. Tässä esimerkissä taustavärin arvo on keltainen. Näin voit nähdä kolme saraketta helposti. Leveysparametri asettaa kunkin sarakkeen leveyden 30 prosenttiin selaimen katselualueesta. Float, tärkein ominaisuus, on arvo "vasemmalla". Kun valitset sen vasemmalle, selaimet asettavat kunkin luokan, joka viittaa luokkiin edellisen vieressä. Seuraava koodilohko asettaa @media-säännön. Media-sääntöjen avulla voit säätää, miten asiakirja näkyy näytössä tulostettaessa ja monissa muissa skenaarioissa. Tässä esimerkissä on olemassa tulostussääntö. Se määrittelee luokan nimeltä noprint. Luokka asettaa minkä tahansa HTML-elementin näyttöominaisuuden, joka viittaa luokkaan "ei".

4.

Liitä alla mainittu JavaScript-koodi edellisessä vaiheessa kuvatun koodin jälkeen:

Tämä koodi luo printPage-toiminnon. Tämä toiminto tutkii kunkin valintaruudun tarkistetun tilan. Jos valintamerkkiä ei ole, koodi lisää noprint-luokan valintaruutuun liittyvään diviin. Jos valintamerkki poistuu, koodi poistaa noprint-luokan siitä div. Jos esimerkiksi joku tarkistaa "Tulosta vasemman sarakkeen" -valintaruudun, joka liittyy siihen div: iin, jonka tunnus on "leftColumn", koodi poistaa noprint-luokan siitä div.

5.

Tallenna asiakirja ja tarkastele sitä selaimessasi. Näet kolme keltaista saraketta ja kolme valintaruutua näiden sarakkeiden alla. Valintaruutujen nimet ovat "Tulosta vasen sarake", "Tulostuskeskuksen sarake" ja "Tulosta oikea sarake".

6.

Laita valintamerkit mihin tahansa haluamaasi valintaruutuun ja napsauta "Tulosta". Tulostus-valintaikkuna avautuu. Tämä on sama oletusikkuna, joka näkyy, kun tulostat asiakirjoja muissa sovelluksissa. Valitse tulostin, jota haluat käyttää, ja tulosta Web-sivu napsauttamalla "Tulosta". Tulostettu sivu sisältää valitsemasi sarakkeet.

Kärki

  • Voit valita sarakkeen monella tavalla. Tässä esimerkissä näkyy valintaruudut, joiden avulla voit valita tulostettavat sarakkeet. Koodisi voisi pyytää ihmisiä kirjoittamaan niiden sarakkeiden nimet, jotka he haluaisivat tulostaa, tai jopa avata ponnahdusikkunan, jossa näkyy valittavissa olevat painikkeet. Voit myös valita sarakkeet, jotka haluat, että ihmiset voivat tulostaa itse. Riippumatta käytettävästä valintamenetelmästä sinun täytyy soittaa printPage-toimintoon. Toiminnon addClass- ja removeClass-menetelmät suorittavat kaiken työn. Jos haluat, että div tulostetaan, suorita samanlainen lausunto: $ (myColumnID) .removeClass ("noprint"). Korvaa "myColumnID" tulostettavan div: n tunnuksella. Muussa tapauksessa soita addClass-menetelmään, kuten seuraava esimerkki kuvaa: $ (myColumnID) .addClass ("noprint");
 

Jätä Kommentti