HTML5 özellikleri uzun zamandır kodlarımız arasında birçok özelliği ile yer aldı bu özelliklerinden biride genellikle css ile kazandırdığımız özellik olan gizle/göster özelliğidir. Attribute ile göster gizle olayını nasıl sağlarız makale devamında göreceğiz.

HTML5 Hidden Attribute Nedir?

Projelerimizde yetki durumundan yada o an akış ilgili kısımda olmadığından veya farklı senaryolar için kullanıya göstermememiz gereken kısımları gizler kullanıcının etkileşime gireceği kısımları gösteririz gizle/göster yaparken birçok farklı yöntem kullanabiliriz örnek verecek olursak CSS, Pure Javascript, jQuery v.b. yöntemler ile bu işi gerçekleştirebil Peki HTML5 öncesinde göster gizle olayını nasıl yapıyorduk hemen basitçe bu konuya bakalım.

HTML için şöyle basit bir kodumuz olsun.

CSS için alttai gibi class seçicisini kullanarak hide adında bir tanım yapıyorum.

Display: none css ile html nesnelerinin gizlenmesini sağlıyor. Display kodu ile alakalı kullanılan birçok seçenek yer almaktadır bu seçenekleri ve çok daha detaylı bilgiyi daha önce yazdığım CSS Display Kullanımı Ve Örnekleri adlı makalemde yer almaktadır okumanızı tavsiye ederim.

JS tarafında ise göster gizle onclick event’lerinin tetikleneceği hide/show fonksiyonlarını tanımlayıp gerekli kod bloklarını yazalım.

Üstteki html, css ve js kodları ile oluşturulmuş alttaki demoda gördüğünüz gibi CSS tarafında hide adında tanımladığınız seçici’yi javascript’de ilgili button’a tıklama duruma göre ekle çıkar yaparak göster gizle yapmış oluyor. Bu işi sadece html tarafında bir attribute tanımlamadan önce javascript ve css tarafında bu işlemleri yapmamız gerekiyordu.

Demo

jQuery Gizle/Göster

Gün geçtikçe web teknolojilerine katılan yeni özellikler sayesinde birçok kütüphane yavaş yavaş kullanılmamaya başlandı bunların başında jquery gelmektedir yeni oluşturduğum birçok projede kendim jquery özelliklerini neredeyse hiç kullanmıyorum ama halen mevcutta yer alan birçok popüler proje çekirdeğini jquery üzerine kurduğundan bizim gibi radikal bir karar alıp kullanmıyorum diyemediğinden(ki kısa vade de diyememesi normal) bağımlı bir kütüphane olması dolayısıyla ekliyoruz projelerimize neyse jquery’nin bu makalede gündeme gelmesi şundan kaynaklanıyor, jquery içerisinde kullanılan en popüler fonksiyonlardan biride hiç kuşkusuz show/hide fonksiyonlarıdır peki bu fonksiyonlar nasıl yapıyor bu işi? Tam olarak üstteki örneğin aynısını yapmaktadır fakat tek fark class selector ile uğraşmayıp direkt olarak style attribute’üne .hide class seçimiz içerisinde yer alan aynı kodu yani display: none; kodunu ekleyip kaldırarak bu işi yapmaktadır. Üstteki title id’li elementimizi jquery tarafında aç kapa yapmak istersek şöyle yapmamız gerekirdi.

Kod daha da kısaldı değil mi? Evet kısaldı ama sırf show/hide özelliği için projesinde jquery olmayanlar büyük ihtimalle jquery’i dahil etmeyeceklerdir o yüzden gelelim makalenin asıl konusuna bu işi sadece html tarafında nasıl çözebiliriz?

HTML5 ile beraber gelen bu özellik sayesinde hidden attribute’ünü ilgili html elemanlarına ekleyerek kolayca gizleme yapılabilir.

Makalenin başında sizinle paylaşmış olduğum html kodunun sadece h1 etiketine hidden attribute’ü eklenerek kolayca elemet’in gizlenmesi sağlanıyor eğer attribute’ü kaldırırsanız gösterilmesinide sağlarsanız.

Attribüte üzerinden javascript ile gizle/göster olarak nasıl yapılacak?

Üstteki kodlardan farklı olarak sadece javascript’de classList yerine bu defa attribute için oluşturulmuş fonksiyonlar üzerinden attribute ekle kaldır işlemini yaparak gizle/göster olayını çözeceğiz. Gizlemek için document.querySelector('h1').setAttribute('hidden', '') kodunu kullanacağız ve göstermek için de document.querySelector('h1').removeAttribute('hidden')  kodunu kullanacağız. Alttaki demo’dan çalışan haline ve kodlara gözatabilirsiniz.

Demo

Not: Hidden global bir attribute’dür istenilen tüm elementlerden kullanılabilir.

Peki iyi güzelde HTML5 hidden attribute’ü için yine 2 ayrı fonksiyon yazdık ve 2 ayrı fonksiyon kullanıp standart olan parametre değerlerini sürekli geçmemiz gerekiyor bunu daha iyi nasıl iyileştirebiliriz? Tabiki HtmlElement nesnelerinin prototype’ını kullanarak nesne özellik geliştirmesini sonradan dahil edebileceğimizi biliyoruz o zaman jquery’deki gibi toggle, show, hide adında 3 fonksiyon tanımlayalım zaten hidden global bir attribute’dü o zaman benim bunu tüm html elementlerinin prototype’ına yapmamda bir engel yok. Şöyle diyebilirsiniz prototype’ın makale girişinde yaptığınız show, hide fonksiyonlarından ne farklı olacak her yerde tanımlayacak mıyım?

Hayır, eğer C# geliştiricisi iseniz C# üzerinden örnek verip olayı pekiştirmek istiyorum C#’da extension metodlar vardır dll içerisinde bulunan nesnelere müdahale edemediğimiz durumlarda veya farklı senaryolardan ilgili nesneye yeni metod kazandırmak istediğimizde extension metodlar kullanırız ve oldukça hayat kurtaran ve temiz kod prensibine uymamızı sağlayan işler çıkarabiliyoruz aynı işi javascript tarafında prototype ile yapabiliyoruz HtmlElement’ler DOM nesnesi olduğundan çekirdekten bir müdahale durumumuz olmuyor o yüzden sonradan nesneyi geliştirmek için prototype gibi bir açık kapı sunmuşlar kullanmanızı şiddetle tavsiye ederim özellikle Array nesnesi üzerinden harika işler çıkarabiliyorsunuz. Özetle prototype’a ekleyeceğimiz show, hide, toggle global bir tanım olarak ve tüm html elementlerinde tek bir yerden tanım yaparak kullanabileceksiniz.

Bu HTMLElement nesnesinin prototype’ına nasıl yeni özellikler kazandıracağız?

Şu alttaki kodlar ile tüm HTMLElement’ler için show, hide ve toggle adında 3 ayrı fonksiyon eklemiş olacağız ve kolaylıkla göster gizle olayını çözmüş olacağız.

Hemen basit bir demo üzerinden bu 3 fonksiyonu nasıl kullandığımıza bakalım.

Demo

Bu defa kodu biraz daha kısaltabilmek için document.querySelector’ü 3 defa tanımlamak ve 3 ayrı buton için 3 fonksiyon tanımlamaktansa h1 değişkenine HTMLElement nesnesini atayıp show, hide, toggle fonksiyonlarını kolaylıkla kullanabildik.

Herşey iyi güzel ama yeni özelliklerden genellikle tarayıcı destekleyip desteklemediğinden çekinilip kaçınılır ama hiç korkmayın her yeni özelliğin bir polyfill’i hep vardır o yüzden hidden attribute’ünün eğer desteklenmeyen tarayıcı ile karşılaşıp projede bug oluşturmak istemiyorsanız alttaki ufacık kod ile kolaylıkla bu özellik tarayıcıda olmasa bile siz kazandırmış oluyorsunuz.

Oldu ki üstteki kodu eklemediniz hangi tarayıcı sürümlerinde veya hangi sürümler tarafından destekleniyor ona hızlıca gözatalım.

Lütfen olumlu-olumsuz tüm görüşerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin. Makalede kullanılan örneğe ve Html ile ilgili diğer tüm örneklere github hesabımdan erişebilirsiniz. Buraya tıklayıp github hesabıma erişebilirsiniz.

Bir sonraki makalede görüşmek dileğiyle.