• Bu site çerezler kullanır. Bu siteyi kullanmaya devam ederek çerez kullanımımızı kabul etmiş olursunuz. Daha fazla bilgi edin.

Javascript Göster / Gizle Yapımı

Konuyu Okuyan Kişiler (0)

bicoder

webmaster.tc
Katılım
5 Eyl 2012
Mesajlar
188
Beğeniler
0
#1


Forumlarda, alışveriş sitelerinde ve blog temalarında buna benzer özelliklerin sıkça kullanıldığını görebilirsiniz. Bizim ufacık scriptimiz de div, span, resim veya farklı bir taşıyıcı elemanın ziyaretçiler tarafından gizlenebilmesine olanak sağlıyor. Fakat bu script ajax gibi eş zamanlı, yani sayfa değişmeden işlemler yaptırabilmenize yardımcı olmuyor, sadece ziyaretçinin o an gördüğü içeriği gizleyip yeniden gösterebilmesi için tasarlandı. Eğer aradığınız böyle bir işlev ise daha sonra ajax ile bunun nasıl yapıldığını anlatacağız.

Scriptin kullanımı:
Yöntem 1: Gizlenecek eleman için “Göster/Gizle” gibi tek bir link kullanmak istiyorsanız <head> </head> satırları arasına eklenecek kod şu şekilde:

PHP:
<!-- egonomik.com -->
<script type="text/javascript">
// göster/gizle
function showMe(blockId) {
* * *if ( document.getElementById(blockId).style.display == 'none' ) {
* * * * * document.getElementById(blockId).style.display = ''; }
else if ( document.getElementById(blockId).style.display == '' ) {
* * * * * document.getElementById(blockId).style.display = 'none'; }
}
</script>
Daha sonra gizlenecek içeriğin id’sini tanımlıyoruz
PHP:
<div id="gizlebeni">Div içeriği</div>
bu link tek başına içeriğin gösterilip gizlenmesini sağlayacaktır.

Yöntem 2: Eğer gizlenecek içerik için ayrı ayrı “Göster” ve “Gizle” linkleri atamak istiyorsanız <head> </head> satırları arasına ekleyeceğiniz kod şu şekilde olmalı:

PHP:
<script type="text/javascript">
// Göster ve gizle
function showMe(blockId) {
          document.getElementById(blockId).style.display = ''; }
function hideMe(blockId) {
          document.getElementById(blockId).style.display = 'none'; }
</script>
yine gizlenecek içeriğin id’sini tanımladıktan sonra

PHP:
<div id="gizlebeni">Div içeriği</div>
içeriği gösterip gizlemek için linkleri aşağıdaki gibi tanımlıyoruz:

PHP:
<a href="javascript:;" onclick="showMe('gizlebeni');">Göster</a> 
<a href="javascript:;" onclick="hideMe('gizlebeni');">Gizle</a>
Umuyorum ki bu iki farklı yöntem scripti kullanacağınız alanlara göre işinizi kolaylaştıracaktır.

Kaynak : Javascript ile göster/gizle özelliği (Show/hide) — Egonomik