jQuery türkiye!: jQuery UI

jQuery UI 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 UI/Effects/effect kullanımı

Merhabalar bi başka makale ile birlikte sizlerleyim. Bu yazımda sizlere UI/Effects/efeect kullanımı hakkında biraz bilgi vereceğim. jQuery UI effect ile belirttiğimiz Id'ye bağlı nesnenin gösterimi UI efektleri ile gösterebiliriz. Öreği ve demosu için buraya bakabilirsiniz.

<html>
<head>
  <link href="libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css"/>
  <script src="libs/jquery/1.4/jquery.min.js"></script>
  <script src="libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <script src="latest/ui/effects.core.js"></script>
<script src="latest/ui/effects.explode.js"></script>
<style type="text/css">
  div { margin: 0 auto; width: 100px; height: 80px;

background: blue; position: relative; }
</style>
  <script>
  $(document).ready(function() {
    $("#tiklanacak").click(function () {
      $("#div_id").effect("slide");
    });
  });
  </script>
</head>
<body style="font-size:62.5%;">
 
<span id="tiklanacak">BURAYA TIKLA</p>
 
<div id="div_id"></div>
 
</body>
</html>

Yukarıdaki kod parçasında $("#tiklanacak").click(function () kısmında: #tiklanacak ID'li nesneye tıklandığında $("#div_id").effect("slide"); #div_id ID'li nesneyi slide effect'i ile göster diyoruz. Ayrıca "slide" yerine aşağıdaki efektleri kullanabilirsiniz.

'blind', 'bounce', 'clip', 'drop', 'explode', 'fold', 'highlight', 'puff', 'pulsate', 'scale', 'shake', 'size', 'slide', 'transfer'

Konu hakkında ayrıntılı bilgi ve soru cevap için coderler jQuery UI/Effects/effect kullanımı forumunu ziyaret edin.

jQuery UI/Effects/Blind kullanımı

jQuery ile belirlediğiniz nedneyi kapatmak ister misiniz? Bu kullanıcı arayüzü sayesinde istediğiniz nesneyi tek tıklama ile kapatabilirsiniz. İsterse nesnenin tag'ını belirtir ister nesnenin Id numarasını belirtirsiniz.

<html>
<head>
<link href="jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="1.4/jquery.min.js"></script>
<script src="jqueryui/1.8/jquery-ui.min.js"></script>
 <style type="text/css">
   div { margin: 0px; width: 100px;

height: 80px; background: green;

border: 1px solid black; position: relative; }
 </style>
 
<script>
$(document).ready(function()
{
 $("div").click(function ()
 {
      $(this).hide("blind", { direction: "horizontal" }, 1000);
 });
});
</script>
</head>
<body style="font-size:62.5%;">
  <div id="merhaba"></div>
</body>
</html>

Yukarıdaki kod parçası ile div nesnenesine(yeşil kutu) tıklandığı zaman kutu sağdan sola doğru kapanacaktır.
direction : "vertical" yada "horizontal" senecekleri bulunmakta.
Ayrıca hide yerine show yazarsanız kapalı nesneyi çıkarmış olacaksınız. Yani işlemin tam tersi.
Şimdi Id adını bellirttiğimiz nesnenin etiketini kapatalım.

$("div").click(function ()
// DIV KISMININ ÖRNEĞİ
<div></div>

yukarıda kısmı aşağıdaki gibi yapınca sadece belirttiğimiz ID nesneleri değişecek.

$("#div_adi").click(function ()
// DIV KISMININ ÖRNEĞİ
<div id="div_adi"></div>

Konu hakkında detaylı bilgi ve örnekler için sizi buraya alalım. Ayrıca konu hakkında soru-cevap için sizi coderler jQuery UI/EffectsBlind kullanımı forumlarına alalım.

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>