jQuery İle HTML Yazının HTML Kodunu Gösterme

26 Aralık 2008 Yorum Yok

jquery Biraz karışık bir başlık oldu kabul ediyorum. Hemen açıklayayım. jQuery ile belirleyeceğimiz bir yazının, üzerine tıkladığımız zaman HTML kodunu göstermek için birazdan çabalayacağız. Bu ne işimize yarar derseniz, HTML eğitim sitelerinde, güzel bir mantıkla çalıştırılabilir. Açıklama faslı geçtiğine göre, artık harekete geçelim…

$(document).ready(function(){

    $("p").click(function () {
      var htmlStr = $(this).html();
      $(this).text(htmlStr);
    });

  });

Kodunu ekleyip, stil bölümünü harekete geçiriyoruz. Stil bölümümüze de;

  p { margin:8px; font-size:20px; color:red;
      cursor:pointer; }
   button { cursor:pointer; }

ekliyoruz. Böylece birazdan ekliyeceğimiz tuşu şekillendirmiş olduk. Şimdi dosyamızın aldığı hâl şu şekilde olmalı;

<html><head>
<script src="jquery.js" type="text/javascript"></script> <script type="text/javascript">

  $(document).ready(function(){

    $("p").click(function () {
      var htmlStr = $(this).html();
      $(this).text(htmlStr);
    });

  });
  </script>
  <style>
  p { margin:8px; font-size:20px; color:red;
      cursor:pointer; }
   button { cursor:pointer; }
  </style>
</head>
<body>
  <p>
  <a href="http://www.mavigenc.com/">MaviGenç | jQuery Dersleri</a>
   <button name="ekran">Göster</button>
  </p>

</body></html>

Böylece Göster tuşuna bastığımızda, MaviGenç | jQuery Dersleri ifadesi HTML formatına dönüşecek ve siz her tıklamanızda bu ifade iyice açılacak…

Güzel bir yazı olduğuna inanıyorum. Umarım yararlı olmuştur. Beni seyretmeye devam edin =)