DD_ROUNDIES KÜTÜPHANESİ
DD_Roundies kütüphanesi resim kullanmadan, yuvarlatılmış köşeli şekiller (HTML kutular) kullanmamızı sağlar. Herhangi bir DOM elemanlarının (Belge Nesnesi Modeli: sayfada bulunan resim, yazı, buton gibi tüm elemanlar) şeklini yuvarlatabiliriz. Bu kütüphaneyi kullanabilmek için, DD_roundies JS linkinden indirebilirsiniz. Kütüphaneyi indirdikten sonra bir ASP.NET sayfasında kulanabilmek için, öncelikle sayfanın kaynak dosyalarına şekilde görüldüğü gibi eklememiz gerekiyor:
Bu işlem sonrasında kütüphaneyi kullanabilmek için sayfanın <head> bölümüne aşağıdaki kodu ekleyerek, kütüphaneyi sayfa için kullanabilir hale getiriyoruz:
<script type="text/javascript" src="Scripts/DD_roundies.js"> </script>
Artık kütüphane sayfamızda kullanılabilir durumda. Örneğimize geçmeden önce kütüphanenin nasıl işlediğini öğrenelim. Kütüphanenin kutuları, çerçeveleri yuvarlatma işlemi "addRule()" fonksiyonu ile gerçekleştirilmektedir. Bu fonksiyon 3 parametre almaktadır:
- 1. parametre: Köşeleri yuvarlatılacak sayfa elemanının, id veya class özelliğinin değerini bir dizgi olarak alır.
- 2. parametre: Sayfa elemanının köşelerinin yuvarlatılma yarıçapını, piksel olarak derecelendirilmiş değeriyle bir dizgi olarak alır.
- Bu parametreye aynı dizgi içerisinde tek bir piksel değeri girilirse, sayfa elemanının tüm köşeleri aynı piksel oranında yuvarlatılır ('55px' gibi).
- Eğer bu parametreye aynı dizgi içerisinde 2 piksel değeri girilirse; bu değerlerden ilki,sayfa elemanının sol üst ve sağ alt köşelerinin yuvarlatılma oranı, ikincisi ise sol alt ve sağ üst köşelerinin yuvarlatılma oranıdır ('55px 40px' gibi).
- Parametreye 3 adet piksel değeri girilirse; birincisi sol üst, ikincisi sağ üst ve sol alt ve de üçüncüsü sağ alt köşenin yuvarlatılma oranı olacaktır ('55px 40px 30px' gibi).
- Parametreye eğer 4 adet piksel değeri girilirse girilen değerler sırasıyla sol üst, sağ üst, sağ alt ve sol at köşelerin yuvarlatılma oranı olacaktır ('55px 40px 30px 10px' gibi).
- 3. parametre: Bu parametre isteğe bağlı olarak yazılır ve varsayılan olarak "false" (yanlış) değerini alır. "false" olması durumu, fonksiyonun sadece Internet Explorer tarayıcısında çalışmasını sağlar. Tüm diğer tarayıcılarda çalışabilmesi için bu parametre "true" (doğru) olarak girilmelidir.
DD_roundies.addRule('#idozellik', '55px', true); DD_roundies.addRule('.classozellik', '55px', true);
Kütüphanenin çalışması anlaşılacağı üzere, oldukça basit ve kullanışlıdır. Şimdi kütüphaneyi kullarak ASP.NET sayfamız üzerinde bir örnek çalışma yapalım:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript" src="Scripts/DD_roundies.js"> </script>
<script type="text/javascript">
//htmlBox class etiketli elemanın tüm kenarları 40 px yuvarlatıldı.
DD_roundies.addRule('.htmlBox', '40px', true);
//textid id'li alanın sol-üst ve sağ alt köşesi 60
//sol alt ve sağ üst köşesi 10 px yuvarlatıldı.
DD_roundies.addRule('#textid', '60px 10px', true);
//butonid id'li butonun köşeleri girilen piksellerde yuvarlatıldı.
DD_roundies.addRule('#butonid', '0px 65px 25px 50p', true);
//imgid id'li resmin köşeleri sol üst 20 px, sağ üst ve sol alt 0px
//ve sağ alt 90 px olarak yuvarlatıldı.
DD_roundies.addRule('#imgid', '20px 0px 90px', true);
//text alanının yuvarlatma oranını ve genişlik,
//renk gibi özelliklerini değiştirdik.
function roundTextArea()
{
DD_roundies.addRule('#textid', '0px 50px', true);
var elem = document.getElementById('textid');
elem.style.borderColor = '#3366CC';
elem.style.borderWidth = '4px';
elem.style.height = '25px';
elem.style.backgroundColor = '#CCCC66';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="htmlBox"
<pre style="background-color: #ffcc99; border: 5px solid rgb(153, 153, 153);
overflow: auto; padding: 5px; width: 168px;">
HTML yazı kutusu
</pre>
</div>
<br />
<textarea id="textid" style="padding: 12px" onclick="roundTextArea()">Text Alanı </textarea>
<br />
<input type="button" id="butonid" name="name" value="Yuvarlatılmış buton" style="height:39px"/>
<br />
<br />
<input type="image" id="imgid" name="I1" value=" image"
style="border-style: solid; border-color: inherit; border-width: 5px; width: 225px; height: 176px;"
src="javascript.png" /><br />
</form>
</body>
</html>
Örneğimizin çıktısı bu şekildedir:
Yazı alanına tıklayınca:
Yazı alanına tıklayınca:
Bu haftalık anlatacaklarım bu kadar. Görüldüğü gibi DD_roundies kütüphanesi, internet sayfamız üzerinde, görsel olarak daha özelleşmiş ve standardın dışında sayfa elemanları kullanmamızı sağlamaktadır.
Kaynaklar:
http://dillerdesign.com/experiment/DD_roundies/
http://www.javascriptsource.com/css/dd_roundies.html
https://code.google.com/p/simplefolio/downloads/detail?name=DD_roundies.js&can=2&q=
Hiç yorum yok:
Yorum Gönder