javascript ile gizleme, geri açma?

magos · 04.04.2007

Merhaba arkadaslar. Yine aklıma gelen güzel bir soru ile karsınızdayım. Tuhaf seyler düşünüyorum amabir türlü beceremiyorum. Sizlerden yardım istiyorum.

Şimdi benim 2 satırlık bir tablom var. Tablonun 2. satırında alt alta yan yana markalar yazıyor. Örneğin;

Nokia Bosch Siemens Aeg

Sony Ericson Vestel Arçelik Kıl-Yün

1. Satırımda ise her markaya ait bir açıklama olacak ama bunlar ilk etapta görünmeyecek. Şöyleki;

Nokia
En iyi cep telefonları burda bulunur
www.nokia.com

Bosch
Mutfak Aletleri
www.bosch.com

gibi. (Tabi bunların hepsini veritabanından alacagım ki onlar sonraki aşama. Çünkü bazen JavaScript içine verileri veritabanından alamıyorum)

Ben 2. satırda olan bir markaya bastıgımda sayfa refresh olmadan (ki özelliği bu yoksa refresh olsa olay basit) 1. satırda o markaya ait bilgiler görünecek.

Olayın özeti bu umarım anlatabilmişimdir.

Yardımı gecen herkese şimdiden tesekkürler. Saygılarımla

İyi çalışmalar...

Bathory · 04.04.2007

Şu şekilde yapabilirsin;

Kod:

<a href="JavaScript:void(0);" onClick="document.getElementById('showInfo<%=ID%>').style.display='block';">Nokia</a>
<div id="showInfo<%=ID%>" style="display:none;">Nokia Ürün Bilgileri</div>

basit olarak bu şekilde yapabilirsin, tabi listelenen tüm ürünlerin bilgilerini zaten sayfaya yüklemişsen fonksiyon yazman gerekecektir, diğerine tıklayınca kapanması gibi. Ama tavsiyem eğer sayfada çok ürün listeliyorsan ve bunların bilgileri uzun metinlerden oluşuyorsa ajax kullanman tek div içerisinde ürün ID sine göre veri gösterimi yapabilirsin sayfanda çok uzun metinler içeren gizli divler kullanmamış olursun.

eklemeyi unutmuşum ASP'ye göre ID ekledim tüm ürün bilgilerini kendilerine ait gizli divlerle açıp kapamak istiyorsan kendilerine ait div ve açıp kapama komutundaki divID sinin adı değişik olmalı bunuda divID sinin sonuna ürün kodunu otomatik olarak ekleyebilirsin.

magos · 04.04.2007

bathıry teşekkür ederim ilgin için. ajax kullanmayı bilmedigimden beceremem aslında. Bu tarz seyleri aslında böyle ögrenmeye calısıyorum. Ben PHP ile yazıyorum. Ama işin içine sayfa refresh etmeme girince beni bozuyor

arsende · 05.04.2007

Küçük bir deneme;

HTML Code:

<!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>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-9" />
<title>Untitled Document</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function gizle(divID)
    {
    document.getElementById(''+divID+'').style.display = 'none';
    }

function goster(divID)
    {

gizle('RYN1');

gizle('RYN2');

gizle('RYN3');

    document.getElementById(''+divID+'').style.display = 'block';
    }
//-->
</script>
</head>

<body>
<table cellspacing="0" cellpadding="0" width="153" 
                                align="center" border="0">
  <tbody>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td class="Genel_yazi" style="CURSOR: pointer" 
                                onclick="goster('RYN1');" bgcolor="#e7e7e7" 
                                height="25"><strong>&nbsp;&nbsp;&nbsp;bilgisayar</strong></td>
    </tr>
    <tr>
      <td><div  id="RYN1" style="display:none;">
        <table height="20" cellspacing="0" cellpadding="0" 
                                width="100%" bgcolor="#f7f7f7" border="0">
          <tbody>
            <tr>
              <td 
                                colspan="2"></td>
            </tr>
            <tr>
              <td width="13%">&nbsp;</td>
              <td width="87%" height="25"><div class="Genel_yazi" align="left">Masaüstü</div></td>
            </tr>
            <tr>
              <td 
                                colspan="2"></td>
            </tr>
            <tr>
              <td width="13%">&nbsp;</td>
              <td width="87%" height="25"><div class="Genel_yazi" align="left">Taşınabilir</div></td>
            </tr>
            <tr>
              <td 
                                colspan="2"></td>
            </tr>
            <tr>
              <td width="13%">&nbsp;</td>
              <td width="87%" height="25"><div class="Genel_yazi" align="left">Cep 
                bilgisayarı</div></td>
            </tr>
          </tbody>
        </table>
      </div></td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td class="Genel_yazi" style="CURSOR: pointer" 
                                onclick="goster('RYN2');" bgcolor="#e7e7e7" 
                                height="25"><strong>&nbsp;&nbsp;&nbsp;Beyaz 
        Eşya</strong></td>
    </tr>
    <tr>
      <td><div  id="RYN2" style="display:none;">
        <table height="20" cellspacing="0" cellpadding="0" 
                                width="100%" bgcolor="#f7f7f7" border="0">
          <tbody>
            <tr>
              <td 
                                colspan="2"></td>
            </tr>
            <tr>
              <td width="13%">&nbsp;</td>
              <td width="87%" height="25"><div class="Genel_yazi" align="left">Aspiratör</div></td>
            </tr>
            <tr>
              <td 
                                colspan="2"></td>
            </tr>
            <tr>
              <td width="13%">&nbsp;</td>
              <td width="87%" height="25"><div class="Genel_yazi" align="left">Bulaşık 
                Makinası</div></td>
            </tr>
            <tr>
              <td 
                                colspan="2"></td>
            </tr>
            <tr>
              <td width="13%">&nbsp;</td>
              <td width="87%" height="25"><div class="Genel_yazi" align="left">Buzdolabı</div></td>
            </tr>
            <tr>
              <td 
                                colspan="2"></td>
            </tr>
            <tr>
              <td width="13%">&nbsp;</td>
              <td width="87%" height="25"><div class="Genel_yazi" align="left">Fırın</div></td>
            </tr>
            <tr>
              <td 
                                colspan="2"></td>
            </tr>
          </tbody>
        </table>
      </div></td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td class="Genel_yazi" style="CURSOR: pointer" 
                                onclick="goster('RYN3');" bgcolor="#e7e7e7" 
                                height="25"><strong>&nbsp;&nbsp;&nbsp;Elektronik</strong></td>
    </tr>
    <tr>
      <td><div  id="RYN3" style="display:none;">
        <table height="20" cellspacing="0" cellpadding="0" 
                                width="100%" bgcolor="#f7f7f7" border="0">
          <tbody>
            <tr>
              <td 
                                colspan="2"></td>
            </tr>
            <tr>
              <td width="13%">&nbsp;</td>
              <td width="87%" height="25"><div class="Genel_yazi" align="left">Cep 
                telefonları</div></td>
            </tr>
            <tr>
              <td 
                                colspan="2"></td>
            </tr>
            <tr>
              <td width="13%">&nbsp;</td>
              <td width="87%" height="25"><div class="Genel_yazi" align="left">DVD 
                player</div></td>
            </tr>
            <tr>
              <td 
                                colspan="2"></td>
            </tr>
            <tr>
              <td width="13%"><div align="right"></div></td>
              <td width="87%" height="25"><div class="Genel_yazi" align="left">Sinema 
                Paketi</div></td>
            </tr>
            <tr>
              <td 
                                colspan="2"></td>
            </tr>
          </tbody>
        </table>
      </div></td>
    </tr>
    <tr>
      <td  ></td>
    </tr>

  </tbody>
</table>
</body>
</HTML>

magos · 05.04.2007

arsende üstad eline saglık. ama tam anlatamamışım herhalde istedigim. bu tarz bir uygulamayı daha önce yapmıstım ama su anki durum biraz daha farklı. yani tablodanun üst satırında bilgiler yer alacak. alt satırında markalar. markalara tıklayınca üst satırsa sadece o markaya ait olan bilgiler görünecek.

arsende · 05.04.2007

Alıntı:

magos tarafından gönderilen mesaj:

arsende üstad eline saglık. ama tam anlatamamışım herhalde istedigim. bu tarz bir uygulamayı daha önce yapmıstım ama su anki durum biraz daha farklı. yani tablodanun üst satırında bilgiler yer alacak. alt satırında markalar. markalara tıklayınca üst satırsa sadece o markaya ait olan bilgiler görünecek.

Rica etsem bir sayfa hazırlar gönderirmisin, doğrudan yapmak istediğini çözmüş oluruz..!

magos · 05.04.2007

arsende üstad aslında verdiğin örnekten kafamda bişeyler çaktı. akşama deneme yapıp bakacagım. Eğer başarılı olamazsam sana örnek gönderecegim.

magos · 06.04.2007

üstad arsende teşekkür ediyorum. örnegini PHP ile düzgün bir biçimde isteğime uyarladım.Sagolasın. Ayrıca ilgin için sanada çok teşekkür ediyorum Bathory

karabela24 · 24.05.2007

Bathory verdiğin örnek çok işime yaradı teşekkürler

04.04.2007	#1 (permalink)
magos Üyelik Tarihi: 09.11.2006 Yer: izmir Mesaj: 194	javascript ile gizleme, geri açma? Merhaba arkadaslar. Yine aklıma gelen güzel bir soru ile karsınızdayım. Tuhaf seyler düşünüyorum amabir türlü beceremiyorum. Sizlerden yardım istiyorum. Şimdi benim 2 satırlık bir tablom var. Tablonun 2. satırında alt alta yan yana markalar yazıyor. Örneğin; Nokia Bosch Siemens Aeg Sony Ericson Vestel Arçelik Kıl-Yün 1. Satırımda ise her markaya ait bir açıklama olacak ama bunlar ilk etapta görünmeyecek. Şöyleki; Nokia En iyi cep telefonları burda bulunur www.nokia.com Bosch Mutfak Aletleri www.bosch.com gibi. (Tabi bunların hepsini veritabanından alacagım ki onlar sonraki aşama. Çünkü bazen JavaScript içine verileri veritabanından alamıyorum) Ben 2. satırda olan bir markaya bastıgımda sayfa refresh olmadan (ki özelliği bu yoksa refresh olsa olay basit) 1. satırda o markaya ait bilgiler görünecek. Olayın özeti bu umarım anlatabilmişimdir. Yardımı gecen herkese şimdiden tesekkürler. Saygılarımla İyi çalışmalar...

04.04.2007	#2 (permalink)
Bathory Üyelik Tarihi: 11.03.2004 Yer: Istanbul Yaş: 25 Mesaj: 53	Re: javascript ile gizleme, geri açma? Şu şekilde yapabilirsin; Kod: <a href="JavaScript:void(0);" onClick="document.getElementById('showInfo<%=ID%>').style.display='block';">Nokia</a> <div id="showInfo<%=ID%>" style="display:none;">Nokia Ürün Bilgileri</div> basit olarak bu şekilde yapabilirsin, tabi listelenen tüm ürünlerin bilgilerini zaten sayfaya yüklemişsen fonksiyon yazman gerekecektir, diğerine tıklayınca kapanması gibi. Ama tavsiyem eğer sayfada çok ürün listeliyorsan ve bunların bilgileri uzun metinlerden oluşuyorsa ajax kullanman tek div içerisinde ürün ID sine göre veri gösterimi yapabilirsin sayfanda çok uzun metinler içeren gizli divler kullanmamış olursun. eklemeyi unutmuşum ASP'ye göre ID ekledim tüm ürün bilgilerini kendilerine ait gizli divlerle açıp kapamak istiyorsan kendilerine ait div ve açıp kapama komutundaki divID sinin adı değişik olmalı bunuda divID sinin sonuna ürün kodunu otomatik olarak ekleyebilirsin.

04.04.2007	#3 (permalink)
magos Üyelik Tarihi: 09.11.2006 Yer: izmir Mesaj: 194	Re: javascript ile gizleme, geri açma? bathıry teşekkür ederim ilgin için. ajax kullanmayı bilmedigimden beceremem aslında. Bu tarz seyleri aslında böyle ögrenmeye calısıyorum. Ben PHP ile yazıyorum. Ama işin içine sayfa refresh etmeme girince beni bozuyor

05.04.2007	#5 (permalink)
magos Üyelik Tarihi: 09.11.2006 Yer: izmir Mesaj: 194	Re: javascript ile gizleme, geri açma? arsende üstad eline saglık. ama tam anlatamamışım herhalde istedigim. bu tarz bir uygulamayı daha önce yapmıstım ama su anki durum biraz daha farklı. yani tablodanun üst satırında bilgiler yer alacak. alt satırında markalar. markalara tıklayınca üst satırsa sadece o markaya ait olan bilgiler görünecek.

05.04.2007	#7 (permalink)
magos Üyelik Tarihi: 09.11.2006 Yer: izmir Mesaj: 194	Re: javascript ile gizleme, geri açma? arsende üstad aslında verdiğin örnekten kafamda bişeyler çaktı. akşama deneme yapıp bakacagım. Eğer başarılı olamazsam sana örnek gönderecegim.

06.04.2007	#8 (permalink)
magos Üyelik Tarihi: 09.11.2006 Yer: izmir Mesaj: 194	Re: javascript ile gizleme, geri açma? üstad arsende teşekkür ediyorum. örnegini PHP ile düzgün bir biçimde isteğime uyarladım.Sagolasın. Ayrıca ilgin için sanada çok teşekkür ediyorum Bathory

24.05.2007	#9 (permalink)
karabela24 Üyelik Tarihi: 16.05.2007 Yer: İstanbul Yaş: 21 Mesaj: 126	Re: javascript ile gizleme, geri açma? Bathory verdiğin örnek çok işime yaradı teşekkürler