Korinaa kuopasta

Jo 582 juttua!

Tilaa RSS tai Atom

Pyöristetyt kulmat jQueryn avulla

Aikaisemmin olisin vaikka vannonut, etten koske tällaisiin jQueryyn liittyviin juttuihin, mutta kyllähän nuo tuollaiset helpottavat ulkoasujen rakentamista.

Nettisivujen ulkoasuissa leiskaan liittyviä elementtejä voi pyöristää asettamalla kuvatiedostoja esimerkiksi taustakuviksi CSS:n kanssa. Kuvatiedostojen sijaan joskus voi olla helpointa käyttää JavaScript-kirjastoa jQuery, johon on tarjolla hyväksi toteamani plugin, jolla kaikenlaisten laatikkojen, nappuloiden ja lomake-elementtien reunat voi pyöristellä hyvin näppärästi. Koska näinä päivinä JavaScriptin suorittamisen sallivat joitain poikkeuksia ottamatta lukuun melkein kaikki, reunojen pyöristäminen toimii valtaosalla käyttäjistä. Hyvänä pointtina on vieläpä se, että jos käyttäjälle reunojen pyöristykset eivät toimisikaan, se ei rikkoisi ulkoasun toimivuutta vaan saisi vain aikaan pyöristyksen puuttumisen.

Käytännössä reunojen pyöristäminen jQueryn ja Rounded corners -pluginin avulla käy siten, että imuroidaan molemmat JavaScript-kirjastot ja pistetään ne nettisivuilla vaikka johonkin omaan kansioonsa. Sen jälkeen linkitetään kirjastoihin ja asetetaan eräänlainen CSS:stä tuttu selektori, jolla voidaan suunnata reunojen pyöristäminen haluttuihin elementteihin. Alla on valmis koodi. Se olisi sullottava nettisivulla vaikka head-tagin sisälle. Tässä koodiesimerkissä oletetaan jQueryn ja pakatun version pluginista löytyvän kansion js sisältä. Sen jälkeen kolmannella rivillä määritellään mitkä nettisivulla olevat elementit saavat erityiskohtelua osakseen. Spesiaalikourimista kokevat kaikki div-palikat, joiden ryhmäselektorina on sana laatikko. Eli suomeksi sanottuna jos nettisivulta löytyy <div class="laatikko"><p>Hahaa!</p></div>, niin siinä tapauksessa divin reunat vääntyvät 10 kuvapikseliä kulmistaan.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.corners.min.js"> <script type="text/javascript">$(document).ready( function(){$('div.laatikko').corners("10px");});</script>

Jos ei haluta asettaa vain div-elementtejä pyöristettäväksi, voidaan vaihtaa yllä esitetyn koodirivin alimmainen rivi tällaiseksi:

<script type="text/javascript">$(document).ready( function(){$('.laatikko').corners("10px");});</script>

Tuossa tapauksessa ihan mikä tahansa elementti, jolla on laatikko-sana CSS:n selektorina, saa efektin itseensä. Systeemiä voidaan käyttää myös johonkin tiettyyn yksittäiseen elementtiin, kuten vaikka johonkin erikoiseen tekstikappaleeseen:

<script type="text/javascript">$(document).ready( function(){$('p#ohhoh').corners("10px");});</script>

Näitä tähtäyskoodeja voi pakata tuohon riviin useitakin jos halutaan asettaa joillekin bokseille vähemmän pyöreitä kulmia ja toisille enemmän. Tällainenkin on mahdollista:

<script type="text/javascript">$(document).ready( function(){$('div.laatikko').corners("10px");$('div.linkit ul li a').corners("5px");});</script>

Viimeisessä koodiesimerkissä on tuo viiden pikselin pyöristys. Se vaikuttaa seuraavanlaisen (X)HTML-koodin kohdalla vain sen linkkeihin:

<div class="linkit">
<ul>
<li><a href="#">Linkki n:o 1</a></li>
<li><a href="#">Linkki n:o 2</a></li>
</ul>
</div>

Nämä linkit voidaan säätää CSS:llä vaikka punaisiksi, joissa on tummanpunainen reunaviiva:

div.linkit ul li a { display: block; background: #c00; border: 1px solid #a00; }

Tällöin linkit saisivat sen viiden pikselin suuruisen pyöristyksen jokaiseen neljään reunaansa.

Koska aika on arvokasta, kannattaa tutustua tähän alla näkyvään listaan jos mielit löytää tämän nettisivuston parhaat kirjoitukset. Tässä alapuolella on kaikkein luetuimpia kirjoituksia Korinaa kuopasta -blogin aarreaitasta. Kirjoitukset on järjestetty suosituimmuusjärjestykseen siten, että luettelon kärjessä on tällä hetkellä eniten lukukertoja saaneet kirjoitukset.

Luetuimpia blogimerkintöjä

Blogimerkintää "Pyöristetyt kulmat jQueryn avulla" muokattiin viimeksi 3250 päivää sitten, eli torstaina 21.01.2010 kello 18:06. Kirjoitukseen on julkaistu kommentteja 5 kpl. Kaikki kirjoituksen saamat kommentit löytyvät suoraan tämän tekstimötikän alapuolelta.

Julkaisun kommentit

Gocom kommentoi 3249 päivää sitten

Kannattaa huomata että nuo kaikki JavaScriptillä tapahtuvat muokkaukset vain muotoilevat itse kuvauskieltä. Toisin sanoen, jos haluaa samat pyöristykset voi tehdä suoraan HTML:kin avulla.

Periaatteessa vain laitetaan muutamat div:t leijumaan halutun elementin reunoille joilloin ne muuttuvat pyöreiksi. Halutessaan sorsan voi jopa kopioida suoraan vaikka RoundedCorners -laajennuksen luomasta DOM:sta.

Maybachh kommentoi 3248 päivää sitten

Mielenkiintoinen artikkeli! Paljonkohan tuollaisen skriptin ajaminen sitten vaikuttaa sivun latausnopeuteen, kun sekin kuulemma vaikuttaa hakukonenäkyvyyteen?

Petri kommentoi 3247 päivää sitten

Gocom: Toden totta. Se taitaa jotenkin position: absolute -jutulla asemoida ne reunapalat laatikon laidoille. Näin sen ainakin uskon tapahtuvan, vai pistääköhän se koodi floattaamalla?

Maybachh: Tattista. Se jQuery taitaa kevyimmillään olla 20 kilotavua ja tuo plugini on vielä toiset mokoman, joten kyllä siitä aika paljon tavaraa tulee ladattavaksi. Ei se kuitenkaan laajakaistayhteydellä nettisivun latautumisaikaa hirveästi kasvata, ellei saittia ole täytetty jollain muulla sisällöllä. Tuo jQuery on laaja kirjasto erilaisia toimintoja täynnä, joten sitä samaa kirjastotiedostoa voi hyödyntää muissakin toiminnallisuuksissa.

Petteri Lahnala kommentoi 3231 päivää sitten

Tai jos ei kiinnosta IE, eikä JavaScript (niin kuin minua), niin: border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;

Petri kommentoi 3231 päivää sitten

Joo, noinhan se käy näppärimmin. Tuo vieläpä toimii ihan näppärästi vaikka ei Internet Explorerin käyttäjille taidakaan olla paljon hyödyksi. Toinen hieno selainkohtainen CSS-kikka on tekstin kallistaminen. Bongasin niceonen etusivulla tuon pääotsikon olevan tavallista tekstiä, joka on vain kallistettu vinoon. Toteutustapa löytyy sivun lähdekoodista. ;-)

Oho! Tämän julkaisun kommentointi onkin jo suljettu. Kun tämän julkaisun kommentointi oli vielä avoinna, tälle julkaisulle kirjoitettiin yhteensä 5 kommenttia. Tämä artikkeli on lokeroitu kategoriaan Web. Tämän julkaisun kestolinkin osoite on http://www.kuopassa.com/weblog/2010/01/21/pyoristetyt-kulmat-jqueryn-avulla.