jQuery türkiye!: jquery user interface

jquery user interface etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

jQuery UI/Effects/Clip kullanımı

jQuery UI/Effects/Clip ile belirttiğimiz nesneye tıklandığı zaman kapatılmasını sağlayabiliriz. Clip efekti ile kapatılmasını sağlayan bu fonksiyonun yatay ve dikey seçenekleri bulunmakta.

//JQUERY FONKSYINU OLUSTURYORUZ
$("#nesne").click(function () {
      $(this).hide("clip", { direction: "horizontal" }, 1000);
});
//ASAGIDA DIV NESNELERINI RENKLENDIRELIM
<style type="text/css">
   div { margin: 0px; width: 100px; height: 80px; background: green;}
</style>
//DIV NESNESINI TANITIYORUZ
<div id="nesne"> </div>

Ayrıca "vertical" or "horizontal" seçeneklerinide kullanabilirsiniz.

jQuery UI/Effects/toggle kullanımı

jQuery UI/Effects/toggle ile belirttiğimiz html nesnelerini açıp kapatabiliriz. User Interface için mükemmel özellik olan toogle fonksiyonu işe yarar sonuçlar vermektedir.

<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"

rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
<script src="http://ui.jquery.com/latest/ui/effects.slide.js"></script>
<style type="text/css">
  div { display: none; margin: 0px; width: 100px; height: 80px; background: blue; position: relative; }
</style>
  <script>
  $(document).ready(function() {
    $("#tiklanacak_yazi").click(function () {
      $("#nesne").toggle("slide", {}, 2000);
    });
  });
  </script>
</head>
<body style="font-size:62.5%;">
  <span id="tiklanacak_yazi">BURAYA TIKLA</span>
<div id="nesne"></div>
</body>
</html>

$("#tiklanacak_yazi").click bu kısımda #tiklanacak_yazi ID'li nesneye tıklandığı zaman $("#nesne").toggle("slide", {}, 2000); bu kısımdaki #nesne ID'li nesneyi aç kapat diyoruz. Ayrıca 2000 yazan yeri saniye değerini belirtmektedir. Arttırabilir veya azaltabilirsiniz.

Ayrıca Slide yazan yeri değiştirebilirsiniz. Kullanılabilir diğer efektler : blind', 'clip', 'drop', 'explode', 'fold', 'puff', 'slide', 'scale', 'size', 'pulsate'

jQuery UI/Effects/toggle kullanımı ile ilgili detaylı bilgi ve yardım için coderler forumlarını ziyaret ediniz.

jQuery user interface accordion menü kullanımı

jQuery user interface kullanıcılar için çok güzel tasarımlar sunmasının yanı sıra bir çok özelliğide içinde sunmaktadır. jQuery User Interface ile seçeceğiniz tasarım hem sitenizi güzelleştirecek ve doğru kullanımı ile sitenize gerçekten hız ve canlılık katacaktır. Bakın jQuery Accordion menü demosunu burada kullanmak için aşağıdaki kullanım örneğini inceleyebilirsiniz.

Kullanım Örneği :

<link rel="stylesheet" href="theme/jquery.ui.all.css">
 <script src="jquery-1.4.4.js"></script>
 <script src="ui/jquery.ui.core.js"></script>
 <script src="ui/jquery.ui.widget.js"></script>
 <script src="ui/jquery.ui.accordion.js"></script>
 
 <script>
 $(function() {
  $( "#tabmenu" ).accordion();
 });
 </script>
 
<div id="tabmenu">
 <h3><a href="#">Bölüm 1</a></h3>
 <div>
  <p>
  Mustafa Tanrırverdi tarafından bu makale hazırlanmıştır.
  Hazırlıyorsunda niye reklam yapıyorsunuz?
  Reklamı seviyorum, tilpark.com
  Helal, coderler.com, mtanriverdi.blogspot.com
  </p>
 </div>
 <h3><a href="#">Bölüm 2</a></h3>
 <div>
  Mustafa Tanrırverdi tarafından bu makale hazırlanmıştır.
  Hazırlıyorsunda niye reklam yapıyorsunuz?
  Reklamı seviyorum, tilpark.com
  Helal, coderler.com, mtanriverdi.blogspot.com
 </div>
</div>

Şimdi kodları biraz açıklayalım. Aşağıdaki kod parçaları ile jQuery user interface dosyalarını sayfamıza tanıtımını yapıyoruz. Bunlar sizin kullandığınız klasörlere göre değişebilir. Eğer çalışmama gibi bi sorun çıkar ise büyük ihtimalle aşağıdaki nedenlerden dolayı çalışmayacaktır.
Kod açıklaması :

<link rel="stylesheet" href="theme/jquery.ui.all.css">
<script src="jquery-1.4.4.js"></script>
<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.widget.js"></script>
<script src="ui/jquery.ui.accordion.js"></script>

Aşağıdaki kod parçası ile ID değeri #tabmenu olan bölümü accordiona çevir komutunu vermiş olduk. Bir alt kısımdaki html kod yapısında gördüğünüz gibi ilk div'in ID değerini tabmenu olarak tanıttık.
Kod açıklaması :

<script>
 $(function() {
  $( "#tabmenu" ).accordion();
 });
 </script>

Sayfalar

jQuery UI/Effects/Clip kullanımı

jQuery UI/Effects/toggle kullanımı

jQuery user interface accordion menü kullanımı