bildirgec.org

Yönetim sistemleri platformlarının olmassa olmaz yapılarından biride datagrid’lerdir. İhtiyac ve kullanım amacına göre gridlerimizin stilleri ve kullanım şekilleride değişiklik gösterebilir. Popüler grid kullanım stilleri windows kullanıcı deneyimini benimsemiş çoğunluktan uzak olmaması için Office 2003 ,XP, Vista kalıpları çervesinde geliştirildiği görülmektedir. Ve daha bunlara verilebilecek onlarca örnek elbette vardır.Extjsvb. freamwork’ler ile ekseri olarak XML versini, Js üzerinden onların sağladığı olanaklar çervesinde pratikçe kullanma imkanımız olsada bu tür kodları ihtiyacımıza göre sadece HTML olarak kullanmak yada duruma göre özelleştirmek o freamwork’ün tüm ayarlarına hakim olmak gibi bir külfet getirebilmektedir.Bu tür yapıların sınırlarına takılmaktan hoşlanmayıp ilgili freamwork’lere tamamen hakim olmak gibi mesai harcamak istemeyen programcıların veya bu tür grid’lerin html ve css kodlarının nasıl hazırlandığını merak edenler için aşağıdaki XP Datagrid modelini bu fakir boyunun yettiği ölçüde detaylı bir örnek ile sunmaya çalışacaktır.

Grid html modellerinde kullanılan ana elementimiz table ’dır. Bu basit kuralı belirtmemin sebebi son zamanlarda çeşitli yerlerde bu tarz grid işlevlerini sapla samanı birbirine karıştırıp, css sitede table kullanılmaz öngörüsüyle div yada farklı elementler ile kastırdığına şahit olduğumuzdandır. Yeni başlayan arkadaşlarımız için semantik kodlamanın ne demek olduğunu biraz araştırdıklarında ise bunun yanlış bir yaklaşım olduğunun farkına varacaklardır.
Başlamadan Önce
İşine hakim olan arkadaşlarımız için 50, 60 satırlık bu kodu tek sayfada açıklamamız yeterli olacaktır ancak bir temayı her ayrtınsı ile html’e geçirilme sürcesini adım adım aktarmaya çalışacağımdan yazımız uzun görünecektir. Bu sebele tekrar eden html kodlarının uzamaması için anlattığımız bölümü parçalı olarak sunacağım. Bu parçaların içersinde belirtilen (<)... ifadesi kodun başlangıcının yazının öncesinde olduğunu, …(>) ifadesi ise kodun devamının yazının sonrasında olduğunu belirtmek için kullanılmıştır.
Reset
Browser farklılıkları ile html elementlerinin varsayılan değerlerinden olumsuz etkilenmememiz için reset.css‘imizi bağlıyalım. Yapacağımız örnek için bize gerekli olmayan border-spacing ve th elementlerinin aşağıdaki gibi sıfırlayarak reset.css’imize dahil ettik.table {border-spacing: 0;}th {font-weight:normal;text-align:left;}
Ana İskeletimiz
Bu örneğimiz için table parametrelerinden thead, tbodykullanmamız yeterli olacaktır, yine örneğimiz için satırların toplam vb. sonuçları gösteren bir ifade olsaydı tfootelementinide kullanabilirdik.

Table için css ya da id tanımlaması belirtmedim. Çünkü table ölçüsünü yüzdesel bırakıp, table’ ı bir üst block içersine alarak idaresini onun üstünden sağlayacağız.

Class Stillerimiz
# Grid başlangıcının varsayılan temel class’ımızın ismi ( .grid )
# Grid’in kullandığı temayı belirten class’ı ( .g_xp )
# Grid’lerin large, small, x-large, medium, gibi ölçülerini belirtlen class grubu (.g_large) olarak atadık
Şimdi (.grid) class’ı için gerekli temel tanımlamalara başlıyalım
/* genel */.grid table {width:100%; border-spacing:0;}/* hacks */*:first-child html .grid {border-collapse:collapse;}/* tema */.g_xp{font:normal 11px Tahoma,Arial,Helvetica,Lucida Grande,Verdana}/* boy */.g_large{width:720px}
Eğer CSS3’ün en büyük nimetlerinden biri olan Multiple Backgrounds tüm tarayıcılarımız için geçerli olsaydı, daha az bir element ile işimizi bitirip tableparametreleri harici kod kirliliği oluşturmamış olurduk. Ancak %1‘ lik safarikullanıcısı hariç bu nimetten faydalanabilecek bir kullanıcımız maalesef yok.Evet örnek şablonumuzun resimlerine bakarak oluşturacağımız html‘ i hesaplayarak ihtiyacımız olan elementleri kullandığımız grafik editörümüzden alacağız.
Thead – Grid Başlık Bölümümüz
Thead alanı grid’imizin sütun başlıklarını içermektedir, şemamızda belirtilen yüksekliğimize baktığımızda 26px’ lik tanımlama yapacağımız görünmektedir./* genel */.grid thead tr{height:26px}
Thead başlık bölümün ilk sütunu olan thtagı (ID) numaradır. Bu çalışma’nın yüzdesel büyükleğe göre değişiklik göstermemesi için sütunun genişliğini sabitleyeceğiz.
/* genel */.grid tr th:first-child,.grid tr th.ie_th_first {width:40px}
Burada ve daha pek çok yerde kullacak olduğumuz first-child (İlk Çocuk) tanımını IE6 algılayamaz. Bu durumu IE6’ı adına çözmek için javscript ile atanacak olan (ie_mevzu) adlı css isimlerimizi first-child ile ortak olarak atıyoruz.Aşaığıdaki şemada normal ve tek sütunu hover halinde olan tead bölümümüz görmekteyiz. Şimdi şemamızdaki oklara dikkatlice bakalım.

Burada gereken imajlar en az html koduyla birlikte nasıl yerleşeceği hayalimizde canlanmaya başladığında, toplamda 3 parçalık bir imaj ile ihtiyacımızı görebileceğimizi anlarız. Nasıl mı? O zaman madde, madde kodlarımızı hayalden gerçeğe dökelim.01) Thead başlığı altındaki trsatırı boyunca kullanılan tek bir renktir O halde:
/* tema */.g_xp thead tr {background-color:#ebeadb }
02) Ancak ikinci puzzle’a dikkatlice baktığımızda satırın altında satırın boyunca uzanan 3 pixcellik kabarık bir derinlik uyandıran geçiş imajı vardır. O halde yukarıdaki kodumuz şu şekilde değişirmi?
/* tema */.g_xp thead tr {background:#ebeadb url(img/thead_border.gif) bottom left repeat-x}
03) Thead altındali thsütunlarının sağ tarafında border stili kullanmamıza olanak sağlamayan2 pixcel’lik imaj vardır. Aşağıda bu olumsuz durumu özetleyen şemada görüldüğü üzere, ayrıcı imaj tr yüksekliğinde olsa idi border stili kullanılabilirdik.

Bu durumda aklımıza sütun tagı olan TH içersinde yazacağımız A tagına display:block özelliğiyle birlikte TR yüksekliğine göre üst ve alt margin değerleri atayıp rahatça border tanımlayabileceğimizi düşünmek gelebilir. Ama ! her sütunumuz için A-Z sıralaması’nın zorunlu olmadığından ötürü bu teorimizin suya düşmüş olduğunu görebiliriz.
Bir adım daha ileri giderek sütün içersindeki başlıklarımızı block özelliği atadığımız bir dış element içine alarak bu teori gerçek kılınabilir. Fakat sütunun hover halindeyken border üstüne binmesi gibi incir çekirdeğini doldurmayacak bir kusuru vardır, tabi olarak banene deyip bu tekniği kullanılabiliriz.Ancak ben örnek şemaya sadık kalarak browser’a göre border kullanımı ile daha fazla css optimazyonu gerektircek bu hendekten atlamak yerine 1, 2 byte’lık imajımızı kullanmayı tercih ediyor ve kaldığımız yerden kodumuza devam ediyorum.Sütunlarımız içersinde azalan ve çoğalan sıralaması olanları link <strong> </strong> tagı içine atıyoruz.

No

Fakat sütün’daki text renklerimiz aynıdır. Şemamızda linki olanların ilk harfleri altı çizili olduğunu yine hover durumuyla tümünün çizili halde geldiği görülmektedir. Bunu sağlıyabilmek için ilk harfleri emtagına atıyoruz.

No

Sütunları ayıran border imajını background olarak atacağımız tagını ise sütun içersindekileri kapsayacak şekilde yerleştirecez.

No

Şimdi geldiğimiz noktaya örnek veri ile bakalım

Bu bölüm için B’tagının genel css’den miras aldığı özellikler, birinci B tagının background iptal ediyoruz çünkü sol yaslı olan image için ilk başlangıctaki ayrıcı bir şey ifade etmeyecektir.
/* genel */.grid th b {display:block; height:20px; padding-top:6px; font-weight:normal}.grid tr th:first-child b,.grid tr th.ie_th_first b {background:none !important}/* Simdi de B tagini tema sitilinden miras aldigi ozelliklerle yazalim. */
/* tema */.g_xp th b {background:url(img/th_border.gif) no-repeat top left}
/* Sıralamaya sahip sütunların tema sitilindeki özelliklerimiz.*/.g_xp th a {color:black; text-decoration:none}.g_xp th a em {font-style:normal}.g_xp th a em,.g_xp th a:hover {text-decoration:underline}
04) Sütunlarımız olan TH’tagının hoverdurumundaki background rengi temamıza yazalım.
/*xp tema */.g_xp th:hover {background-color:#faf9f4}
05) Yine TH’tagının hoverdurumunda sütunun en altındaki 3 pixcellik turuncu bir imajımız gözükmektedir. O halde bir üstte yazdığımız kodu şu şekle terfi ettirelim.
/*xp tema */.g_xp th:hover,.g_xp th.ie_th_hover{background:#faf9f4 url(img/thead_border_hover.gif) repeat-x bottom left}
Thead için son olarak azan ve artan sıralama linklerinin yönlerinin belirtileri için OKimajımızı koyabilmemiz için temamıza aşağıdaki kodları yazalım.
/* tema */.g_xp th a.down,.g_xp th a.up {padding-right:11px}.g_xp th a.down {background:url(images/down.gif) no-repeat right 4px}.g_xp th a.up {background:url(images/up.gif) no-repeat right 4px}
Yapmış olduğumuz programlama ile aktif olan sütunun linklerine sıralama türüne göre class ismi atamamız yeterli olacaktır. Örnek : Up (Artan) Down (Azalan)

Name

Tbody – Grid Gövdesi Liste Bölümü
Tbody altında TD’taglarının css tanımlıyoruz
/* genel */.grid td,.grid th b {padding-left:5px}.grid tr td {height:22px}
/* tema */.g_xp tr td {border-bottom:1px solid #f1efe2; border-right:1px solid #f1efe2}
Tbody altında TR satır tagında bir kayıt aralık ile renk veriyoruz
Yine TR’tagının hover rengi veriyoruz
/* tema */.g_xp tbody tr:hover,.g_xp tbody tr.ie_tr_hover {background-color:#f8fbff}Tbody TD’tagının hover rengini de veriyoruz
/* tema */.g_xp tbody tr td:hover,.g_xp tbody tr td.ie_td_hover {background-color:#e8f6ff}
Tbody’deki ID sütununu içeren ilk TD alanı aşağıdaki şemamızda görüldüğü üzere farklı bir stil giydirilmiştir.

01) Talep edilen renkte, 1px lik border-bottom veriyoruz.
/* tema */.g_xp tbody tr td:first-child{border-bottom:1px solid #d6d2c2;}
02) Td alanının bottom’u içi iki ayrı renkte border veremem, o zaman 1. Madde yaptığım duracağın gibi 1px lik background imajını repeat-x bottom yönünde döşüyoruz.
/* tema */.g_xp tbody tr td:first-child{border-bottom:1px solid #d6d2c2;background: url(img/first_td_one.gif) repeat-x bottom left;}
03) Talep edilen renkte 1px lik border-top verdik*/
/* tema */.g_xp tbody tr td:first-child{border-bottom:1px solid #d6d2c2;border-top:1px solid white;background: url(img/first_td_one.gif) repeat-x bottom left;}
04) Talep edilen renkte 1px lik border-right verdik
/* tema */.g_xp tbody tr td:first-child{border-bottom:1px solid #d6d2c2;border-top:1px solid white;border-right:1px solid #d6d2c2background: url(img/first_td_one.gif) repeat-x bottom left;}
05) Arkaplan rengini değişiyoruz/* tema */.g_xp tbody tr td:first-child{border-bottom:1px solid #d6d2c2;border-top:1px solid white;border-right:1px solid #d6d2c2background:# EBEADB url(img/first_td_one.gif) repeat-x bottom left;}
Son rütüşlar ile text-center ile, IE hack grubunu yazıyoruz
/* tema */.g_xp tbody tr td:first-child,.g_xp tbody tr td.ie_first_td{text-align:center;border-bottom:1px solid #d6d2c2;border-top:1px solid white;border-right:1px solid #d6d2c2background:# EBEADB url(img/first_td_one.gif) repeat-x bottom left;}
Ve hover özelliğinide vermemizle birlikte tbodyişimizi bitirmiş oluyoruz.
/* tema */.g_xp tbody tr td:first-child:hover,.g_xp tbody tr td. ie_first_td_hover{background:#F1F0E4;color:red}
Grid Dış Çerçevesi
Grid’imizin dış çervesini oturmak için pad adlı class’a sahip bir div içine alıyoruz. İleride yapacağımız çerçeve sitilleri için kolaylık sağlıyacaktır.

/* tema */.g_xp {border:4px solid #f5f5ef;background:#f5f5ef}.g_xp .pad{border:1px solid #e6e2d5; background:white; margin:1px;padding:1px}
Grid Pager
Grid’imizin sayfalaması’nın html ve css’inde gerekli olan malzemeler aşağıdaki şemamıza yakından bir gözatalım.

Grid’imizi çerçevelediğimiz padclass’ına sahip div’in bitiminin ardından pagerclass’ına sahip yeni bir div blockunu açalım.

Şimdi bu pager’ın genel css’inden alacağı mirasları yazalım ve temadaki özellikleri belirtelim/* pager genel */.grid .pager {height:40px; overflow:hidden; margin:4px 1px 0px 1px}/* xp teması pager’ı */.g_xp .pager {background:url(img/g-pager-b.gif)}
Pager’ın şemasında sağda kırmızı bir block solda da mavi bir block olacağının işaretini vermişiz. Sağdaki bilgilersadecebilgi amaclı ve bir adet link olduğundan parargaf ile sağa yaslamamız yeterli olacaktır.

Bu tagımız için stillerimizi yazalım./* genel */.grid .pager p {float:right;padding:5px 6px 0 0; text-align:right}/* xp teması pager’ı */.g_xp .pager p {color:#7c7c6a; line-height:14px}.g_xp .pager p a {color:#6f6f57; text-decoration:underline}.g_xp .pager p a:hover{text-decoration:none}
Mavi renkle belirtilen alanımıza ise navismi ile bir div block’u olarak açalım.
(<)...

Bu div block’umuzun da stillerini tanımlayalım./* genel */.grid .pager .nav {padding:9px 0px 0px 10px}.grid .pager .nav * {float:left}
Şimdi navblock’umuzun iç kısmını şemamızdan inceleyelim. Sanırım son aşamanın en civcivli bölümüne geldik.

Yukarıda şemamızdan da göreceğimiz üzere kırmızı, yeşil, mavi olmak üzere 3 ana bölgemiz vardır. Şemamızdaki açıklamalar eşliğince önce bu ana bölgeleri oluşturan tag’larımızı boş olarak yazalım. (<)...

Şimdi boş olarak yazdığımız bu ana bölüm taglarını sırasıyla açıklayarak koda dökelim.1 ) Kırmızı bölgelerimiz B’ tagı içersindeki (<< < | > >>) işlevlerine ait A’ linkleridir, yapısal olarak aynı tag gurubunun içinde ortak özelliklere sahiptirler.
(<)...

Şimdi B’ tagı ve bu tagın kapsamış olduğu (<< < | > >>) navigasyon linklerinin stillerini tanımlıyoruz.
Bu navigasyonun linklerinde spritetekniği kullanacağız. css’in yüklenmeme durumuna karşın ise display:none kıldığımız emtagları açılmış olarak linklerimizi ifadesiz olmaktan kurtaracaktır.
/* xp teması pager’ı */.g_xp .pager .nav b {padding-top:5px}.g_xp .pager .nav b em {display:none}.g_xp .pager .nav b a {width:16px; height:16px; backgroundimage:url(img/g-pager-nav.png);background-repeat:no-repeat}.g_xp .next,.g_xp .prev,.g_xp .first {margin-right:5px}.g_xp .first {background-position: 0 0}.g_xp .first:hover {background-position: -16px 0}.g_xp .prev {background-position: -32px 0}.g_xp .prev:hover {background-position: -48px 0}.g_xp .next {background-position: -80px 0}.g_xp .next:hover {background-position: -64px 0}.g_xp .last {background-position: -112px 0}.g_xp .last:hover {background-position: -96px 0}
2 ) Şemada yeşil block ile belirtilen span tagımız sayfa numaralarının kapsayıcısıdır. Span tagımızın içersindeki (1 2 3) linklerimiz html yapısını aşağıdaki şekilde oluşturuyoruz.
(<)...

Span tagı ve kapsamış olduğu sayfa linklerimizin css tanımlarını yazıyoruz. Bu linklerimizin background-image’ larındaki tüm haller için yine spritetekniğinden yararlanıyoruz.
/* genel pager */.grid .pager .nav span a {margin-right:3px; color:#333}.grid .pager .nav span a:hover {color:#000; text-decoration:none}/* xp teması pager’ı */.g_xp .pager .nav span a {margin-right:4px; height:18px; padding:4px 5px 0 5px;border:1px solid #c9c9c8;background:url(img/g-pager-no.png) repeat-x left top}.g_xp .pager .nav span a:hover {background-position:0 -22px}.grid .pager .nav span a.active{background-position:0 -44px!important; color:#999}
3 ) Şemada mavi block ile belirtilen tagımız ise class ismi goolan bir divelementidir. Bu element ise hemen git adlı form hizmetini kapsayısıdır. Bunuda html dökmemiz gerekirse…
(<)...

Evet son olarak hemen git hizmetinin css tanımlarını yazarak datagrid şemasına dair tüm html ve css kodlamalarımızı tamamlamış oluyoruz.
/* genel özellikler */.grid .pager div.go * {margin-right:6px}.grid .pager div.go {padding-left:15px; padding-top:2px}.grid .pager div.go span {padding-top:4px}/* xp teması pager’ı */.g_xp .pager div.go .text{width:44px;padding:2px 0;height:15px;background-color:#FEFEFE; color:#6f6d5b;font-size:11px;text-align:center; font-family:verdana;border-top:1px solid #9a9a9a;border-right:1px solid #e9e8da;border-bottom:1px solid #e9e8da;border-left:1px solid #9a9a9a;}.g_xp .pager div.go .submit{padding-bottom:2px; width:58px; height:23px; margin-top:-1px; color:black}
Test & Download
Örneği görmek veya çalışmayı tatbik ederek doğru bir sonuca ulaşamayan arkadaşlar varsa bu linkten uygulama örneğini test edebilir ayrıca buradançalışmamızıda indirebilirsiniz.JavaScript Opsiyonları
Tercihlerimize göre Js ile müdahale edilecek olan bölgeleri örnekleyelim. Ben bu iş için JQuery Freamwork’ünü kullanacağım.Satır Renklerini Js ile Atama
Satır renklerin programlama kodumuz ile manual atıyabiliriz. Ancak html kalabılığı olmasın deyip bu işin yükünü js ye bırakmak istersek$(document).ready(function(){$(“.grid table tbody tr:odd”).addClass(“dark”);})
Demodan gösterExplorer 6 Hover Durumları
Tüm css kodumuz boyunca yazmış olduğumuz (.ie_mevzu) adlı class isimlerimizi aktif duruma getirelim.$(document).ready(function(){if($.browser.msie) // IE ISE{if(jQuery.browser.version<7) // IE 7 DEN KUCUK ISE{// tbody tr sütunları hover'u$(".grid table tbody tr").hover(function(){$(this).addClass("ie_tr_hover");},function(){$(this).removeClass("ie_tr_hover");})// tbody td hucrelerin hover'u$(".grid table tbody td").hover(function(){$(this).addClass("ie_td_hover");},function(){$(this).removeClass("ie_td_hover");})// tbody tr satırının ilk td hucresi$(".grid table tbody tr td:first").addClass("ie_first_td");// tbody tr satırının ilk td hucresinın hover'ı$(".grid table tbody tr td:first").hover(function(){$(this).addClass("ie_first_td_hover");},function(){$(this).removeClass("ie_first_td_hover");})// thead th baslik sütununun hover'ı$(".grid table thead th").hover(function(){$(this).addClass("ie_th_hover");},function(){$(this).removeClass("ie_th_hover");})}}})
Demodan GösterExplorer PNG Sorunu
Temamızda kullandığımız transparent imajlar için malum explorer 6’nın png sorunu karşımıza çıkacaktır. Bunuda kolayca aşmak istersek
$(document).ready(function(){$(“.grid .pager .nav b a”).addClass(“pngfix”);})
Demodan GösterOkul Geçer Notu
Şimdi okulumuzun sınav sonucunu GösterSonuc
Kolayca tema hazırlayıp istediğimiz çalışmalara entegre edebileceğimiz bu yapıyı gönül rahatlığıyla kullanabilirsiniz. Çalışmayı daha ileri nokataya taşıyıp geliştirenlerin paylaşımlarını görmekten menun kalırız.Kaynaklar
Örneği İnceleÖrneği İndir