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 – 3

Önceki konularda sizlere ng-app direktifini göstermiştim. Bu şekilde anonim bir kullanım oluyor. Burada biz kendi modülümüzü oluşturmalıyız.

Neden modül oluşturuyoruz?

Controller, servisler, filterler, direktifler ve diğer şeyler için modülü kullanıyoruz. Yani aslında modüle tanımlıyoruz bunları.

Şimdi bir örnekle daha iyi anlayalım. Normalde ng-app dememiz yeterliydi. Ancak şimdi buna bir isim vereceğiz.

<div ng-app="modul">
    <div ng-controller="test">
       {{ merhaba_dunya }}
    </div>
</div>

Şimdi angular’da ilk olarak modülümüzü oluşturalım.

var modul = angular.module('modul', []);

Evet modül’e bir controller tanımlayalım. Normalde şöyle kontrol oluşturuyorduk;

var test = function($scope){
    $scope.merhaba_dunya = "hello world!";
}

Ancak modüle tanımlarken biraz daha farklı. Yani şöyle;

modul.controller('test', ['$scope', function($scope){
    $scope.merhaba_dunya = "hello world!";
}]);

Filtre Kullanımı

Başka bir örnek yapalım. Bu seferde bir filtre oluşturalım. Henüz bunu göstermedim ama bir merhaba demekten zarar gelmez ???? Örneğin;

module.filter('degistir', function(){
   return function(name){
      return name.replace('world', 'dünya');
   }
});

Kullanırken ise şöyle kullanacağız;

{{ merhaba_dunya | degistir }}

Bude bizde hello dünya! çıktısını verecektir.

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/

HTML contenteditable – Düzenlenebilir İçerik

Html’de bir etiketin değerini düzenlenebilir yapmak için contenteditablekullanılıyor.

Örnek vermek gerekirse;

<div id="test" contenteditable="true">buraya tıkla ve beni düzenle!</div>

Ya da diğer nesneler içinde kullanmak isterseniz contenteditable="true"demeniz yeterli.

jQuery’de Değişikliği Yakalamak

Düzenlenebilir içerik değiştirildiğinde bunu input eventı ile yakalayabiliyoruz.

$('#test').on('input', function(e){
   alert( $(this).text() );
});

kolay gelsin.

Mail Tasarımı Kodlarken Dikkat Edilmesi Gerekenler

Front-end‘ci arkadaşlarım eminim ki mail tasarımı kodlama işi alıyorlardır.
Ancak mail tasarımlarını dökerken dikkat etmemiz gereken bazı durumlar var, bunlardan biraz bahsetmek istiyorum.

Bütün mail tasarımlarının dökümünde tablo yapısı kullanılır, çünkü mail servisleri çok kısıtlı imkanlar veriyor bizlere.

Elbette başka elemanlarda kullanılabilir ancak taslağın tablo yapısı üzerine inşa edildiğini incelerseniz hepsinde görebilirsiniz.

Dolayısı ile normal bir web sitesi gibi döküm rahatlığı yoktur.

<style></style> ve <link /> etiketleri çalışmaz

Outlook ve gmail‘e baktığımda ne style etiketi içinde css yazımını ne de dış bir css dosyası çalıştırmayı kabul ediyor.

Dolayısı ile tablo yapısı ve inline css yazımı ile hazırlamamız gerekiyor mail tasarımlarını.

<div style="color: darkred; font: 15px Arial, sans-serif; border: 1px solid red;">
test et
</div>

(Tam emin değilim aslında bu konuda, yine de ben tüm denemelerime rağmen çalıştıramadım.)

Script kodlarını boşuna yazmayın

Yüksek ihtimalle güvenlikten dolayı yazdığınız kodlar çalışmayacaktır, basit düşünün. Mail tasarımı dediğiniz şey basittir, web sitesi yapmıyoruz burada ????

Hazır mail tasarımları kullanabilirsiniz

Eğer uğraşacak vaktiniz yok ise themeforest’te satılan hazır mail tasarımlarını alıp kendi yapınıza göre düzenleyebilirsiniz.

Mail servislerinin desteklediği CSS özellikleri

Sizlere güzel bir kaynak vereceğim, hangi mail servisinin hangi kodları çalıştırdığını buradan inceleyebilirsiniz.

https://www.campaignmonitor.com/css/

PHP ile Excel Dosyası Oluşturmak

Bunun için yazılmış bir çok sınıf bulunmakta, ancak sanırım en basiti şu abimizin yaptığı ????
https://github.com/oliverschwarz/php-excel

Kullanımına örnek verecek olursak.

<?php

// sınıf dosyası
require 'excel_xml.class.php';

$data = array(
    1 => array(
        'ad', 'soyad', 'yas'
    ),
    array(
        'Tayfun', 'Erbilen', 21
    ),
    array(
        'Murat', 'Miregil', 21
    )
);

$xls = new Excel_XML('UTF-8', false, 'My Test Sheet');
$xls->addArray($data);
$xls->generateXML('xls-dosyasi-adi');

?>

İşte bu kadar basit ???? Daha önce hiç yapmamış ama şimdi lazım olmuş olanlar için çok kullanışlı basit bir örnektir.
Kolay gelsin.

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 ????