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

contenteditable fare imleç pozisyonunu öğrenme

bir contenteditable içeriğimizde fare imlecinin pozisyonunu öğrenmek istersek window.getSelection() metodunu kullanacağız. Örnek vermek gerekirse.

<div contenteditable="true" id="test">bu bir deneme yazısıdır..</div>

Fare imleç pozisyonu: <span id="position"></span>

Şimdi dive tıkladıkça fare pozisyonunu alalım ve ekrana yazdıralım.

$('#test').on('click', function(){
  var sel = window.getSelection();
  $('#position').text( sel.extentOffset );
});

işte bu kadar basit 🙂 bana çoğu zaman lazım oluyor, blogda dursun dedim.

Demo

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;
}

AngularJS Notlarım – 5

Biraz daha direktiflerden bahsetmek istiyorum.. ng-clickng-model ve ng-repeat direktifleri ile devam edebiliriz yazımıza.

ng-click

ng-click direktifi elemana tıkladığımızda özel bir davranış belirlememizi sağlar. Örneğin elemana tıklanınca ne yapılması gerektiğini belirleyebiliriz. Ya da bir fonksiyon çalıştırabiliriz gibi..

<div ng-app ng-init="site='erbilen.net'">
  <a href="#" ng-click="site = 'prototurk.com'">[Siteyi değiştir!]</a>
  {{ site }}
</div>

ng-model

ng-model için küçük bir örnek ile başlayalım. Hiç controller karıştırmadan ng-app dedikten sonra bu kodları çalıştıralım.

<input type="text" ng-model="kelime" />
<p>{{ kelime }}</p>

Evet artık input’a ne yazarsam hemen aşağısında o çıkacak.

Ya da daha farklı bir örnek vermek gerekirse;

<div ng-app="app">
  <div ng-controller="myController">
  
    <input type="text" placeholder="Birşeyler yaz.." ng-model="kelime" ng-bind="alert(kelime)">
    
  </div>
</div>

Şimdi input’ta yazınca bind ettiğim için controllerımdaki alert metodum çalışacak ve yazılan değer ekranda alert ile gösterilecek.

var app = angular.module('app', []);
app.controller('myController', ['$scope', function($scope){
  
  $scope.alert = function(str){
    if ( typeof str != 'undefined' )
      alert(str);
  }
  
}]);

ng-repeat

$http servisi ile bir request yapıyoruz ve gelen datayı ng-repeat ile tekrarlatıyoruz. Yani kısaca döngüye sokuyoruz. Nasıl mı?

var app = angular.module('app', []);
var myController = function($scope, $http){
  
  var onComplete = function(response){
    $scope.repos = response.data;
  }
  
  var onError = function(response){
    $scope.error = 'Bir sorun oluştu!';
  }
  
  $http.get('https://api.github.com/users/tayfunerbilen/repos')
  .then(onComplete, onError);
  
};
app.controller('myController', ['$scope', '$http', myController]);

Şimdi html tarafında ise şöyle göstereceğim;

<div ng-app="app">
  <div ng-controller="myController">
    Tayfun Erbilen - Github Repo
    <ul>
      <li ng-repeat="repo in repos">
        {{ repo.name }}
        <span style="display: block; color: #777;">
          {{ repo.description }}
        </span>
      </li>
    </ul>
  </div>
</div>

AngularJS Notlarım – 4

Bu yazımda sizlere $http servisinin kullanımını göstermek istiyorum.
AngularJS’de amaç JSON olarak datayı almak ve DOM’da neler olacağını belirlemektir.

Örneğin jQuery’de get metodu nasıldı önce kullanımını bir hatırlayalım;

$.get('/request-url', function(response){
    console.log(response);
}, 'json');

AngularJS’de de mantık aynı sonuçta. Ancak bunu controllerımın içinde $scope gibi $http parametresini aldıktan sonra yapacağım.
İlk olarak html yapımıza bir göz atalım;

<div ng-app="github">
    <div ng-controller="getUserInfo">
        <img src="{{ user.avatar_url }}" alt="" title="{{ user.name }}" /><br />
        Ad: {{ user.name }}<br />
        E-posta: {{ user.email }}<br />
        Lokasyon: {{ user.location }}
    </div>
</div>

Evet şimdi github adında modülümüzü oluşturalım. Sonra getUserInfoadında bir controller tanımlayıp $http servisi ile github’a bir get request yapalım. Gelen değeride user data modeline aktaralım.

var github = angular.module('github', []);
github.controller('getUserInfo', ['$scope', '$http', function($scope, $http){
  
  $http.get('https://api.github.com/users/tayfunerbilen').then(function(response){
    $scope.user = response.data;
  });
  
}]);

Aslında böyle çok okunaklı değil. Örneğin hata aldığında 2. bir fonksiyonda bunu anlıyoruz ancak böyle iç içe yazmak sağlıklı olmuyor. Bunu daha okunaklı bir hale getirelim;

var github = angular.module('github', []);
github.controller('getUserInfo', ['$scope', '$http', function($scope, $http){
  
  var onComplete = function(response){
	$scope.user = response.data;
  };
  
  var onError = function(response){
	$scope.error = 'Github kullanıcısı bulunamadı!';
  };
  
  $http.get('https://api.github.com/users/tayfunerbilen')
       .then(onComplete, onError);
  
}]);

Şimdi ng-show ve ng-hide direktifleri ile html çıktımızı daha mantıklı hale getirelim.
Yani error var ise hatayı gösterip kullanıcı bilgilerini gizleyelim, tam tersi ise kullanıcı bilgilerini gösterip hatayı gizleyelim.

<div ng-app="github">
    <div ng-controller="getUserInfo">
	
        <div class="error" ng-show="error">
            {{ error }}
        </div>
	
        <div ng-hide="error">
            <img src="{{ user.avatar_url }}" alt="" title="{{ user.name }}" /><br />
            Ad: {{ user.name }}<br />
            E-posta: {{ user.email }}<br />
            Lokasyon: {{ user.location }}
        </div>
		
    </div>
</div>

AngularJS Direktiflerini Kullanarak Tab Örneği

Angularjs direktiflerini kullanarak hiç javascript kodu yazmadan tab örneği hazırladık.

Örnekte kullanılan direktifler şunlardır;

  • ng-app
  • ng-init
  • ng-class
  • ng-click
  • ng-switch
  • ng-switch-when

Kısaca kodlarımız

<body ng-app ng-init="tab = 'tab1'">

	<div id="tab">
	
		<ul class="tab">
			<li ng-class="{active: tab == 'tab1'}">
				<a href="#" ng-click="tab = 'tab1'">1. tab</a>
			</li>
			<li ng-class="{active: tab == 'tab2'}">
				<a href="#" ng-click="tab = 'tab2'">2. tab</a>
			</li>
			<li ng-class="{active: tab == 'tab3'}">
				<a href="#" ng-click="tab = 'tab3'">3. tab</a>
			</li>
		</ul>
	
		<div ng-switch="tab">
			<div class="tab-content" ng-switch-when="tab1">
				1. tab içeriği
			</div>
			<div class="tab-content" ng-switch-when="tab2">
				2. tab içeriği
			</div>
			<div class="tab-content" ng-switch-when="tab3">
				3. tab içeriği
			</div>
		</div>
	
	</div>

</body>

AngularJS Notlarım – 2

AngularJS

AngularJS’de MVC yapısı olduğunu söyledim mi bilmiyorum. Bunu en temelden öğrenmek gerekirse size ilk olarak bir controller’ın nasıl oluşturulacağını göstermek istiyorum.

AngularJS Controller Yapısı

İlk olarak ng-app direktifini uyguluyorum.

<div ng-app>
    kodlar..
</div>

Bir controllerı kullanmak için ng-controller direktifini kullanıyoruz.

<div ng-app>
     <div ng-controller="testController">
         {{ mesaj }}
     </div>
<iv>

Şimdi testController adında bir controller kullanacağımı söylüyorum. Ve mesaj değerini ekrana yazdırıyorum. Bu mesaj değerini controller içerisinde modelde tanımlayacağız. Hemen bir js dosyası oluşturup controllerı yazmaya başlayalım.

var testController = function($scope){
    $scope.mesaj = "Merhaba AngularJS!";
};

Evet gördüğünüz gibi $scope adında bir parametre aldı fonksiyonumuz. $scope bizim modelimiz. Daha aldığı birçok parametre var, bunlar servis olarak adlandırılıyor. Ayrıntılı olarak şuradan bakabilirsiniz: https://docs.angularjs.org/api/ng/service

Kısaca özetlemek gerekirse;

angularjs-mvc

AngularJS Notlarım – 1

AngularJS

AngularJS öğrenirken bazı notlar alıyorum. Bunu bloğumda da zaman zaman paylaşacağım.
İlk olarak EngılırCeyEs diye okunmasıyla başlayalım olaya 🙂 Ve devam edelim..

AngularJS’i kullanmak için 2 şey gerekli.
1) angular.js dosyasını sayfaya dahil etmek
2) HTML’de ng-app direktifini angular kullanacağımız alan için belirlemek
– Bu arada ng Angular‘ın kısaltılmış halidir.

<script src="angular.js"></script>
<div ng-app>
   bu alan Angular tarafından yorumlanmaktadır..
</div>

Artık div içerisine küçük bir angular kodu yazabilirim.

<script src="angular.js"></script>
<div ng-app>
   5 * 10 = {{ 5 * 10 }}
</div>

Bize çıktıda 5 * 10 = 50 sonucunu gösterecektir.
{{ ve }} karakterleri AngularJS’e özeldir. Bu yüzden bunu görüyorsanız bilin ki orada bir Angular olayı mevcut.

Evet sizinle küçük bir başlangıç yaptık, tebrikler 🙂

Daha fazlası için: https://angularjs.org/

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.