Zincirleme (Chain) Metodu

Bir çoğunuz yazılmış sınıfları incelediğinizde şu şekilde bir yazım tarzıyla karşılaşmış olabilirsiniz.

$text = new Text();
echo $text->write('Tayfun Erbilen')->color('red')->fontSize('20px')->show();

Bu örneğe ait sınıfımızı oluşturalım hemen.

class Text {
    
    private $text;
    private $style;

    public function write($text)
    {
        $this->text = $text;
    }

    public function color($color)
    {
        $this->style .= 'color: ' . $color . ';';
    }

    public function fontSize($size)
    {
        $this->style .= 'font-size: ' . $size . ';';
    }

    public function show()
    {
        return '<div style="' . $this->style . '">' . $this->text . '</div>';
    }

}

Ancak bu örnek hata verecektir. Çünkü bu şekilde bir yazım tarzı için yapmanız gereken $this objenizi geriye döndürmek. Yani sınıfımızı şu şekilde düzenlersek eğer;

class Text {
    
    private $text;
    private $style;

    public function write($text)
    {
        $this->text = $text;
        return $this;
    }

    public function color($color)
    {
        $this->style .= 'color: ' . $color . ';';
        return $this;
    }

    public function fontSize($size)
    {
        $this->style .= 'font-size: ' . $size . ';';
        return $this;
    }

    public function show()
    {
        return '<div style="' . $this->style . '">' . $this->text . '</div>';
    }

}

Artık bu şekilde bir kullanımı yapmaya hazırız.

Chain (zincirleme) metodu aynı zamanda jQuery içinde aynı mantıkta çalışır. Muhtemelen her dil için bu mantıktadır. Örneğin jQuery’de bir örnek vermem gerekirse, basit bir eklenti hazırlayalım.

$.fn.Text = function(text){
  $(this).html(text);
};

$('body').Text('Tayfun Erbilen').css({
    'color': 'red',
    'font-size': '20px'
  });

Bu şekilde bir zincirleme kullanımda çalışmayacaktır. Çünkü bir this objesi döndürmedik eklentimizde geriye. Eğer geriye this’i döndürürsek geriye kalan jQuery metodlarını da zincirleme olarak kullanabilirsiniz. O halde buna göre düzelttiğimizde son kod parçamız şöyle olacak;

$.fn.Text = function(text){
  $(this).html(text);
  return this;
};

$('body').Text('Tayfun Erbilen').css({
    'color': 'red',
    'font-size': '20px'
  });

jQuery Autocomplete Kullanımı

Merhaba arkadaşlar, bu videoda sizlere jquery autocomplete (otomatik tamamlama) eklentisinin kullanımını gösterdim.

Video içinde bazı linklere giriş yaptım, bunları aşağıda sizlere vereyim hemen;

jQuery CDN Servisi: https://code.jquery.com/
jQuery UI Autocomplete Demo: https://jqueryui.com/autocomplete/
jQuery UI Autocomplete Api Sayfası: http://api.jqueryui.com/autocomplete/

Video içinde hazırladığım kodların örnekleri aşağıdadır;

api.php

try {
    $db = new PDO('mysql:host=localhost;dbname=demo;charset=utf8', 'root', '');
} catch (PDOException $e ){
    die($e->getMessage());
}

$term = $_GET['term'];

$query = $db->query('SELECT * FROM uye
WHERE uye_adi LIKE "%' . $term . '%"', PDO::FETCH_ASSOC);

if ( $query->rowCount() ){

    $data = array();

    foreach ( $query as $row ){
        $data[] = array(
            'value' => $row['uye_adi'],
            'uye_id' => $row['uye_id'],
            'uye_adi' => $row['uye_adi'],
            'uye_eposta' => $row['uye_eposta'],
            'uye_avatar' => $row['uye_avatar']
        );
    }

    echo json_encode($data);

}

index.html

<!doctype html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>Document</title>
    
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css"/>
    <script>
        $(function(){

            var $search = $('#search');

            $search.autocomplete({
                source: 'api.php',
                focus: function(event, ui){
                    $search.val(ui.item.uye_eposta);
                },
                select: function(event, ui){
//                    window.location.href = 'https://www.google.com/#q=' + ui.item.uye_adi;
                    $search.val(ui.item.uye_eposta);
                }
            });

            $search.data('ui-autocomplete')._renderItem = function( ul, item ){

                var $li = $('
  • '); $li.html('<a href="#">' + '<img src="' + item.uye_avatar + '" />' + '<span class="username">' + item.uye_adi + '</span>' + '<span class="email">' + item.uye_eposta + '</span>' + '</a>'); return $li.appendTo(ul); }; }); </script> <style> #search { width: 500px; } .ui-autocomplete li a { overflow: hidden; display: block; } .ui-autocomplete li a img { float: left; margin-right: 10px; height: 40px; } .ui-autocomplete li a .username { display: block; font-size: 16px; line-height: 17px; } .ui-autocomplete li a .email { display: block; font-size: 12px; color: #999; } </style> </head> <body> <input id="search" type="text"/> </body> </html>
  • mysql: demo

    -- phpMyAdmin SQL Dump
    -- version 4.1.12
    -- http://www.phpmyadmin.net
    --
    -- Host: 127.0.0.1
    -- Generation Time: May 01, 2015 at 11:43 PM
    -- Server version: 5.6.16
    -- PHP Version: 5.5.11
    
    SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
    SET time_zone = "+00:00";
    
    
    /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
    /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
    /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
    /*!40101 SET NAMES utf8 */;
    
    --
    -- Database: `demo`
    --
    
    -- --------------------------------------------------------
    
    --
    -- Table structure for table `uye`
    --
    
    CREATE TABLE IF NOT EXISTS `uye` (
      `uye_id` int(11) NOT NULL AUTO_INCREMENT,
      `uye_adi` varchar(255) NOT NULL,
      `uye_eposta` varchar(255) NOT NULL,
      `uye_avatar` varchar(255) NOT NULL,
      PRIMARY KEY (`uye_id`)
    ) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=6 ;
    
    --
    -- Dumping data for table `uye`
    --
    
    INSERT INTO `uye` (`uye_id`, `uye_adi`, `uye_eposta`, `uye_avatar`) VALUES
    (1, 'Tayfun Erbilen', '[email protected]', 'https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xpt1/v/t1.0-1/p40x40/11150571_931151590276660_1648829158305262977_n.jpg?oh=4069d5e773b3d14b97ad52573aec18d6&oe=55E30655&__gda__=1440015885_52a5a0b45451bc87bad8e780c41e8f35'),
    (2, 'Mert Osman Başol', '[email protected]', 'https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xpf1/v/t1.0-1/p50x50/1964950_10206688116828423_6583006539395380068_n.jpg?oh=a7364b334a368f825451c814b7677eda&oe=55D607BF&__gda__=1439900624_dfaef636f9ea1c6076c155eb71781c8d'),
    (3, 'Murat Miregil', '[email protected]', 'https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xpa1/v/t1.0-1/p50x50/11052443_10205415379451129_1842162222714031022_n.jpg?oh=e7c98bc33a241cb00a27f032e3314cbd&oe=55D5BFCE&__gda__=1439485299_413a895407dfa5889a18c2bed7e3c683'),
    (4, 'Batuhan Aydın', '[email protected]', 'https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xap1/v/t1.0-1/p50x50/10898165_641650965964699_1189819791888549590_n.jpg?oh=d4101d34b89c0bafd5f138fe41eb2329&oe=55D32566&__gda__=1440316752_ab45034618b777f1202a446b41e51e70'),
    (5, 'Tolga Çatalahmetoğlu', '[email protected]', 'https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xfp1/v/t1.0-1/c0.1.50.50/p50x50/10154428_10202845905101633_105216030809094613_n.jpg?oh=6cd6cc5970d17f5070b1edc51117ef17&oe=55A20088&__gda__=1440413345_f47c2827f982db88ecd76c3849067949');
    
    /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
    /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
    /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
    

    Ekstralar

    input’a bir şeyler yazıp json servisinden verileri alırken geçen sürede bir loader eklemek isterseniz .ui-autocomplete-loading classını kullanacaksınız css’de.
    yani;

    .ui-autocomplete-loading {
    	background: #fff url(ajax-loader.gif) no-repeat 97%;
    }

    gibi..

    jQuery Touchswipe Eklentisi ile Parmak Hareketlerini Yakalamak

    Telefon ve Tabletlerde ekrana parmak ile dokunduğumuzda bunu yakalayıp işlem yapmamızı sağlayacak güzel bir eklenti tanıtacağım size.
    Ben bu eklentiyi kullanarak parmak ile kaydırarak açılıp kapanan bir yan menü örneği hazırladım videoda.
    Umarım işinize yarar, zira ben responsive dökümlerde bu eklentisi sıkça kullanıyorum.

    Eklenti Adresi;
    https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

    jQuery ile Basit Checkbox ve Radio Özelleştirmesi

    Çok basit şekilde checkbox ve radio inputlarını özelleştirebilirsiniz. İlk olarak radio ve checkbox için html yapılarına göz atalım;

    <label>
        <input type="radio" name="cinsiyet" checked />
        Kadın
    </label>
    <label>
        <input type="radio" name="cinsiyet" />
        Erkek
    </label>

    Bu radio inputu içindi. Gördüğünüz gibi label kullanıyoruz. Sebebi ise labele tıklandığında otomatik olarak radio butonunu kendisi seçeceği için jquery’de ekstra bir şey yapmamıza gerek kalmıyor. Aynı şekilde checkboxiçinse yapı şöyle;

    <label>
        <input type="checkbox" value="1" name="test" checked />
        Kullanım Koşulları'nı okudum, kabul ediyorum.
    </label>


    Şimdi jquery kodlarımızda ilk olarak :radio ve :checkbox seçicilerini kullanarak bir döngüye sokacağız. Eğer checked olan inputlar var ise bunların kapsayıcı nesnesine yani labellere checked classı atayacağız.

    $(':radio, :checkbox').each(function(){
        $(this).after('');
        if ( $(this).is(':checked') ){
            $(this).parent().addClass('checked');
        }
    });

    Evet şimdi label’e tıklandığında radio ise farklı checkbox ise farklı işlemler yapalım.
    Radio inputu ise, onun name’ini alıp diğer radioların labellerindeki classı kaldırıp tıklanana checked classı atayacağız.
    Eğer checkbox inputu ise:checked ile seçili olup olmadığını anlayıp ona göre checked classını ekleyip kaldıracağız.

    $('label').on('click', function(e){
    
        // radio
        if ( $(':radio', this).length ){
            var name = $(':radio', this).attr('name');
            $('input[name=' + name + ']').parent().removeClass('checked');
            $(this).addClass('checked');
        }
    
        // checkbox
        if ( $(':checkbox', this).length ){
            if ( $(':checkbox', this).is(':checked') ){
                $(this).addClass('checked');
            } else {
                $(this).removeClass('checked');
            }
        }
    
    });

    Artık geriye sadece css’den düzenleme yapmak kalıyor.
    Örneğin şöyle bir düzenleme yapabilirsiniz;

    label {
      cursor: pointer;
    }
    label input {
      position: absolute;
      opacity: 0;
    }
    label span {
      display: inline-block;
      width: 10px;
      height: 10px;
      background: #ddd;
      margin-right: 3px;
    }
    label.checked {
      color: green;
    }
    label.checked span {
      background: green;
    }

    jQuery .trigger() Metodu

    Bir nesne için atadığımız olayın gerçekleşmesini sağlıyor. Örneğin yukarı çık örneğimiz olsun.

    $('#up').on('click', function(e){
        $('html, body').animate({
            scrollTop: 0
        }, 1500);
        e.preventDefault();
    });

    Şimdi #up nesnesinin click eventını tıklamadan nasıl tetiklerim? Tabi ki trigger ile.. Yani;

    $('#up').trigger('click');

    dediğim zaman sanki #up nesnesine tıklanmış gibi yazdığım click eventım çalışacaktır.
    Bunu özellikle slider’da çok kullanıyorum ben, sizinde işinize yarayacağına eminim ????

    Daha geniş kullanımı için: http://api.jquery.com/trigger/

    kolay gelsin ????

    jQuery .not() Metodu

    Hariç anlamına gelir. Mesela bir nesne seçtik ama atıyorum 2. indexli nesne hariç. Ya da atıyorum .active classı olan nesne hariç. Hariçler haricinde bize kalan nesnede işlem yapmamızı sağlıyor.
    Mesela seçtiğimiz nesneler içinde active classı yoksa tıklama işlemi yaptıralım;

    <ul>
        <li>test</li>
        <li>test2</li>
        <li class="active">test3</li>
        <li>test4</li>
    </ul>
    $('.menu li').not('.active').on('click', function(e){
        alert('ta da!');
    });

    Verdiğim örnekte 3. lide click işlemi olmayacaktır çünkü active sınıfına sahip ve benim istediğim olayım ona sahip olmayan nesnelerde çalışıyor not sayesinde.

    jQuery .filter() Metodu

    jQuery’de bulunan metodlar içinde en sevdiğimdir. Çünkü büyük ölçüde işimi kolaylaştırıyor.
    Örneğin bir nesneyi değişkene aktardım.

    var tab = $('.tab li');

    Şimdi burada ilk elemanı seçip addClass metodunu uygulamam gerektiğinde bunu filter ile belirtiyorum.

    tab.filter(':first').addClass('active');

    Böylece değişkenin taşıdığı nesnelerde filtreleme işlemi yapıp ilk elemanı seçmemi sağlıyor.
    Tabi sadece ilk eleman için değil :not(), :eq(), this vb. bir çok şey için geçerlidir. Örneğin küçük bir tab uygulaması yapacak olsaydık işimiz çok kısa olacaktı;

    var tab = $('.tab li'),
    content = $('.tab-content');
    
    content.filter(':not(:first)').hide();
    tab.filter(':first').addClass('active').end().on('click', function(e){
        tab.removeClass('active').filter(this).addClass('active');
        content.hide().filter(':eq(' + $(this).index() + ')').show();
        e.preventDefault();
    });

    Ya da örneğin daha farklı bir örnek verelim;

    $('.item').filter(function(index){
        return $( this ).hasClass('boxed');
    }).addClass('active');

    http://api.jquery.com/filter/

    İşte böyle, kolay gelsin ????

    jQuery .end() Metodu

    Sıkça kullandığım bir metoddur kendisi.
    Yaptığı iş ise, ilk seçilen elemana geri dönmesi. Yani örnek vermek gerekirse;

    $('.item').find('a').addClass('external-url').end().on('click', function(e) {
       alert('test');
    });

    Burada item içerisinde a nesnelerini bulup sınıf atadık. Eğer end metodunu kullanmamış olsaydık click işlemi a nesneleri için geçerli olacaktı. Ancak end kullandığımız için tekrar başa sardık ve filtreleme işlemlerini önemsemeden eventımızı uyguladık.
    http://api.jquery.com/end/

    Kolay gelsin.

    jQuery Scrollbar Eklentisi

    Sizlere perfectScrollbar adında bir jquery scrollbar eklentisini tanıtacağım.. Uzun zamandır kendi projelerimde kullanıyorum, jquery ile özel scrollbar yapmak isteyenler için ideal bir eklenti.

    Öncelikle eklentiyi şuradan indirebilirsiniz.. İçerisinde src klasörü altında bize lazım olacaklar bulunuyor.. Bunlar;

    • jquery.mousewheel.js
    • perfect-scrollbar.js
    • perfect-scrollbar.css

    Nasıl kullanacağız?

    İlk olarak jquery kütüphanesi lazım tabi, bunu söylememe gerek yok ???? Bir html oluşturalım hemen..

    <div id="content">
     … içerik …
    </div>

    Basitte bir css yazalım. CSS’de olması gerekenler overflow: hidden ve position: relative bunları koymayı unutmayın ????

    .content {
    	width: 500px;
    	height: 500px;
    	overflow: hidden;
    	position: relative;
    }

    Ve tabi ki eklentiyi kullanmaya geldi sıra..

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
     <script src="perfect-scrollbar/jquery.mousewheel.js"></script>
     <script src="perfect-scrollbar/perfect-scrollbar.js"></script>
     <link href="perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet" />
     <script type="text/javascript">
     $(function(){
          $('#content').perfectScrollbar();
     });
     </script>

    İsterseniz parametrelerde kullanabilirsiniz.. Örneğin scroll hızını ayarlayabilirsiniz.. Ya da scroll’un sadece x ya da y ekseninde çıkmasını sağlayabilirsiniz..

    $('#content').perfectScrollbar({
    	suppressScrollX: true,
    	wheelSpeed:100
    });

    Nesneye yeni içerikler eklendiğinde scroll’u update etmek içinse şu şekilde bir kullanım gerekiyor;

    $("#content").scrollTop(0);
    $("#content").perfectScrollbar('update');

    jQuery cursorWatcher Eklentisi

    Bir nesne düşünün.. Ve bu nesneye göre fare nesnenin neresinde kalıyor, bunu öğrenmemiz gerek.. Temelde 9 farklı konumu hesaba katarak küçük bir eklenti hazırladım.. Eklenti nesneye göre farenin 9 farklı konumunu tespit edip bir şeyler yapmanızı sağlıyor.

    Nesneye göre konumlar:

    • Yukarı
    • Aşağı
    • Sol
    • Sağ
    • Yukarı Sol
    • Yukarı Sağ
    • Aşağı Sol
    • Aşağı Sağ
    • Orta

    İndir (Github)

    https://github.com/tayfunerbilen/cursorWatcher