Gayet beğendiğim bir Ajax Control Toolkit üyesi daha...
Tabcontainer ve tab panel tasarımlara hem hoş bir görünüm hemde içeriklerin bir araya toplanmasında gayet iyi bir çözüm.Malesef web sayfalarında pek sık göremiyorum.Bunun nedenide sanırım bu tür bir özelliği tasarımcıların değil daha çok yazılımcıların kullanması yada web tasarımcılarının site içeriklerini toplamak değil dağıtarak sayfa kalabalığını tercih etmeleri.Birazdan kodlarını yazmaya başlayacağımız aracın bitmiş web görüntüsü aşağıdaki ilk resim gibi olacak.
Yatay sekmeli bu panellerimizle aynı türden bilgileri bir araya toplamak hoş bu benim resmimdende kaynaklanıyor olabilir .
Hemen kodlarımıza başlayalım.
Her Ajax aracını eklerken static yapmanız gereken çözümünüze Script Manager eklemektir ki bu diğer araçların tümü içinde geçerlidir.
Bu aracı direk kod yazarak design modda yazarak yada Tollbox sekmenizde bulunan aracı sürekle bırak şeklindede çözüme ekleyebilirsiniz.Fakat yinede design modda bazı özellikleri düzenlemek gerekecektir.
1- TabContainer ekleyip ve TabContainer tagları arasına TabPanel'imizi ekliyoruz.TabPanel tagları arasınada ContentTemplate ekliyoruz...
bu kısa kod bloğu ile ilk Tab Container tamamlanmış oluyor...Tabikii tek bir Tab Panel pek bir işe yaramıyacağından 2 ncisinide yapmamız gerek.
Ama daha önce bu kodları biraz açarak tanıyalım...
TabContainer Bu aracın kendisidir ve çözüme 1 adet eklenir
TabPanel Bu sekmeli panellerdir ve kaç adet sekme panel istersek o kadar eklemeliyiz.
Header Text Sekmenin ismidir
ContenrTemplate Her TabPanel de 1 Content Template olabilir ve düzenlenecek içerik bu iki tag arasında olacaktır.
2- 2nci TabPaneli eklemek için yapmamız gereken yukarıdaki kodların aynısını <cc1:TabContainer><cc1:TabContainer> arasına yeniden yazmaktır.Bu 3ncü TabPanel içinde böyledir.Bu işlemlerden sonra aşağıdaki gibi bir kod blogumuz olacaktır.
Oldukça kolay oldu ve artık kullanıma hazır Panel kontrollerde olduğu gibi yine içerikler ContentTemplate tagları arasıda düzenlenerek kullanmaya başlayabileceğiz.Son resimde göreceğiniz gibi bende basit bir table ile resim ve bir kaç yazı yazarak örneği aktarmaya çalıştım.Başarılar
Bu Yazının Sponsorları
Hocam bu sothlink te yaptigimiz 3 tab li bir paneli nasil ekleriz. daha dogrusu sayfaya ekliyorum ama tikladigim zmn olaylari nasil tetikleriz?
YanıtlaSilGreat post!
YanıtlaSil