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.
Blogimerkintää "Pyöristetyt kulmat jQueryn avulla" muokattiin viimeksi 5373 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.
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.
Mielenkiintoinen artikkeli! Paljonkohan tuollaisen skriptin ajaminen sitten vaikuttaa sivun latausnopeuteen, kun sekin kuulemma vaikuttaa hakukonenäkyvyyteen?
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.
Tai jos ei kiinnosta IE, eikä JavaScript (niin kuin minua), niin: border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;
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.
Selaat tällä hetkellä blogimerkintää Pyöristetyt kulmat jQueryn avulla. Se julkaistiin 21. päivä tammikuuta 2010. Voit siirtyä lukemaan blogin tuoreimpia kirjoituksia klikkaamalla tiesi weblogin etusivulle. Tässä blogissa julkaistaan kiinnostaviksi katsomiani asioita, joten jos tiedät kiinnostavan nettiin liittyvän aiheen, josta kannattaisi kirjoittaa, laita palautetta!