Sayfa Reklamı

Browsing Tag

jquery

Ajax, JQuery

JQuery ile Sınıf Oluşturma

Merhabalar,

 

Bu yazımızda sizlerle JQuery üzerinde nasıl sınıf oluşturabiliriz ve kullanırız onu göreceğiz. Peki nerelerde kullanabilirsiniz bu sınıfları diye soracak olursanız hemen hemen her projenizde kullanabilirsiniz. Hızlıca aşina olabilirsiniz ve sizleri pek zorlamaz. Aslında çok basittir ve öylede gözüküyor fazla söze ne hacet diyebiliriz. Aşağıda kısa bir örnek verelim ve ardından açıklamalarımıza devam edelim.

<script type=”text/javascript”>
$(document).ready(function(){
$.ilkSinifim = {
metinAlert: function(data){
alert(“Gelen Değer: ” + data);
}
}
});
</script>

Yukarıdaki kodlarımız Javascript için kullanacağımız kodlarımızdır, ve şimdide HTML alanında kullanacağımız kodlarımızı veriyorum.

<input type=”submit” onclick=”$.ilkSinifim.metinAlert(‘Bu benim ilk sinifimdaki fonksiyonumdur.’)” value=”Test et..” />

Aslında JQuery ve Javascript biliyorsanız içeriğinde kullanımlar gayet basittir. Ben sizlere sadece yapısının nasıl olduğunu ve kullanımı basitçe anlatmaya çalıştım. Sizler projeleriniz için düzenli bir yapı istiyorsanız kullanmanızı tavsiye ederim.

<script type=”text/javascript”>
$(document).ready(function(){
$.metinAlert = function(data){
alert(“Gelen Değer: ” + data);
}
});
</script>

Yukarıdaki gördüğünüz kodlar ise sadece bir fonksiyon için yazılmıştır aşağıdada HTML kodunu görebilirsiniz.

<input type=”submit” onclick=”$.metinAlert(‘Bu benim ilk sinif harici (tekli) fonksiyonumdur.’)” value=”Test et..” />

CSS, HTML, HTML5, JQuery

JQuery Ücretsiz Slider (30 Adet)

1. Basit JQuery Slider:

Sliderın en iyi özelliklerinden birisi bir çok farklı şekilde kullanılmasıdır. Sliderı kullanırken bir tasarıma bağlı kalmıyorsunuz. Metin, resim ve hatta videoları geçiş esnasında görüntülemek mümkündür. Eğer sitenizin düzenini bozmadan Slider için ayırdığınız alana sığdırmak istiyorsanız önceden oluşturulmuş 50 farklı şablondan birini kullanabilirsiniz.

jquery-sliders-01

 

2. Royal Slider:

Sliderın en iyi özelliklerinden birisi bir çok farklı şekilde kullanılmasıdır. Sliderı kullanırken bir tasarıma bağlı kalmıyorsunuz. Metin, resim ve hatta videoları geçiş esnasında görüntülemek mümkündür. Eğer sitenizin düzenini bozmadan Slider için ayırdığınız alana sığdırmak istiyorsanız önceden oluşturulmuş 50 farklı şablondan birini kullanabilirsiniz.

jquery-sliders-02

 

3. JQuery Slider Shock:

jQuery Slider Shock sliderlarda olması gereken özelliklerin tümüne sahiptir. Sliderın kenarına görüntüleri (dahili veya harici kaynaklardan getirilebilir) ve  video gibi farklı içerikler çeşitlilerini ekleyebilirsiniz. 30 farklı geçiş efekti bulunmaktadır. Kendi zevkinize uyacak şekilde özelleştirilebilirsiniz. jQuery Shock blogcular için WordPress desteği ile birlikte geliyor.

jquery-sliders-03

 

4. Responsive Slides:

Bu Slider bulunduğu divin genişliğine göre boyut değiştirmektedir. Internet Explorer 6 ve üstü gibi çoklu tarayıcı ile uyumludur. Eğer responsive temaları destekleyen bir tarayıcı kullanıyorsanız, sliderı görüntülemek için tarayıcıya bir CSS ile max-width özelliği ekliyoruz. Slaytlar geçişlerinde resimlerin görünürlüğü azaltılarak geçiş efekti uygulanmıştır. Slaytların geçiş sürelerini ve bekleme sürelerini ayarlayabilirsiniz.

jquery-sliders-04

 

5. iWiew Slider:

Sitenizinde mobil kullanıcılar için içerik sunmayı düşünüyorsanız iView Slider tam aradığınız sliderdır. Slider aslında dokunmatik ekranlar ile özellikle mobil cihazlar için tasarlanmıştır fakat mobil olamayan sitelerde de rahatlıkla kullanabilirsiniz. Sliderın 35 farklı geçiş efekti bulunmaktadır.

jquery-sliders-05

 

6. Adaptor:

Eğer sitenizin tasarımına güzel bir 3D efekt eklemek istiyorsanız Adaptor slider işinizi kolaylaştıracaktır. 3D efektlerin geçiş hızını ayarlayabilirsiniz. Sliderın kodların biraz karmaşık gibi gelebilir fakat düzenlemeye başladığınızda çok kolay ve anlaşılır olduğunu göreceksiniz.

jquery-sliders-06

7. Refineslide:

Refineslide kendi site düzenleri içinde düzgün görünecek bir slider arayan web masterlar için bulunmaz bir seçim. Sadece 4 kilobayt tan oluşan slider oldukça kullanışlıdır. Slider CSS3 geçişleri kullanır ve 3D efekti oluşturur.

jquery-sliders-07

 

8. Unoslider:

Unoslider sade bir geçiş efektine sahiptir. Mobil cihazlar ile uyumlu bir şekilde çalışır. Kaymak kodu çok fonksiyonludur ve kaynak kod üzerinde değişiklik yapmak çok kolaydır. Ayrıca kodları mobil cihazlar için optimize dilmiştir.  Birbirinden farklı birçok geçiş efekti ile her sliderın farklı bir şekilde açılmasını sağlayabilirsiniz.

jquery-sliders-08

9. Likno Web Scroller Builder:

Genel olarak eticaret sitelerinde ürün listelemeleri için kullanılan sliderın birçok geçiş özelliğini bulabilirsiniz. Benzer ürünler, yanında alınanlar, çok satanlar, indirimdekiler ve aynı kategorilerdeki ürünleri listelerken sitenizde yerden tasarruf etmenizi sağlamaktadır.

jquery-sliders-09

10. Nivo Slider:

Eğer iyi bir WordPress slider istiyorsunuz ve profesyonel sliderların ücretlerini ödemek istemiyorsanız NivoSlider Sizin için çok güzel bir alternatif. Sliderı uygulamak çok kolaydır. Aynı zamanda sade ve şık bir görün verir. Diğer sliderlara göre geçiş efektleri biraz daha azdır. 16 adet. Ne kadar sliderlardan bahsederken WordPress gibi sisleri ön planda tutsakta bizim yazdığım ASP.NET MVC sistemlere de çok kolay uyum sağlamaktadır.

jquery-sliders-10

 

11. Rhinoslider:

Rhinoslider da büyük grafikler ve esneklik ön plana çıkmaktadır. Sliderda resimler ve videolar gibi farklı HTML içerik çeşitleri kullanıla bilmektedir. Ayrıca geçiş efektleri için büyük bir kütüphaneye sahiptir.

jquery-sliders-11

12. Camera: JQuery Slider with Touch Support:

Mobil uyumlu siteler hazırlayan tasarımcılar için geliştirilmiş güzel bir jQuery sliderdır. Slider hareketleri mobil cihazlara duyarlıdır, dokunmatik ekranlı cihazlarda kolay entegrasyon sağlanır. Slider geçişleri için çok sayıda özellik bulunmaktadır.

jquery-sliders-12

 

13. Flow Slider:

Flow Slider Mouse hareketlerine duyarlı bir sliderdır. Mouse u sağa ve sola hareket ettirdiğiniz sliderda bulunan resimlerde Mouse hareket yönünün tersine hareket etmektedir.

jquery-sliders-13

 

14. Crafyslide:

Sadece standart ve yaygın olarak kullanılan özelliklere sahip bir slider istiyorsanız, Craftyslide mükemmel bir seçimdir. Diğer sliderlarda bulunana gereksiz bir çok özellik slidera eklenmemiştir. Fakat fonksiyonları sayesinde slider üzerinde bir çok değişiklik yaparak çeşitli özellik ekleme imkanına sahipsiniz.

jquery-sliders-14

15. RSlider:

RSlider büyük arka plan resimleri için güzel bir slider örneğidir. Ayrıca, otomatik olarak üzerinde çalıştığınız sitenin genişliğine uyuyor.

jquery-sliders-15

 

16. JCoverflip:

Bu web sitenizde kullanabileceğiniz harika bir jQuery sliderdır. CSS kullanarak yazıları resimleri değiştirebilir, slider içerisinde kaç adet resim görmek istiyorsanız bunu ayarlayabilirsiniz.

jquery-sliders-16

 

17. Slidedeck:

Slidedeck ile sitenizde listelediğiniz resimleri gruplayabilir ve bu gruplardan biri tıklandığın diğer guruba ait resimleri gizleyerek sadece o gruba ait resimlerin kalmasını sağlayabilirsiniz.  Referans sayfalarında kolaylıkla kullanabileceğiniz güzel bir slider örneğidir.

jquery-sliders-17

 

18. Liquid Slider 2:

HTML5 ile ekran genişliği otomatik olarak yararlanmaktadır. CSS3 geçişlerinin tümü desteklenmektedir. Ayrıca API sayesinde çok basit ve kolay düzenleme imkanı sunmaktadır.

jquery-sliders-18

 

19. Parallax İçeren Sliden (CSS ve JQuery):

Geniş ekran kullanılabilen slider ile yazıları, iconları, butonları ve resimleri birbirinden farklı bir şekilde hareket ettirebilirsiniz. Yeni temaların bir çoğunda kullanılan yazı, resim, icon değişikliği Parallax slider ile sağlanmaktadır.

jquery-sliders-19

 

20. Rotating Image Slider:

Fotoğraflar sıra ile çevrilerek gelmektedir. Kuaför salonları, modacılar ve fotoğraf stüdyoları için hazırlanan sitelerde rahatlıkla kullanabileceğiniz güzel bir slider örneği.

jquery-sliders-20

 

21. Bxslider: (Benim şiddetle tavsiye ettiğim bir slider)

Dikey ya da yatay geçişler istiyorsanız BxSlider’ı sitenizde kolaylıkla uygulaya bilirsiniz. CSS ile slayt geçişlerini düzenleyebilirsiniz. Sitesinde birçok detaya ulaşarak kendinize özel bir slider hazırlayabilirsiniz. Çoklu resim, video gibi birçok özelliği bulunmaktadır.

jquery-sliders-21

 

22. Fullscreen Slit Slider:

Slide geçişi resimleri ortadan bölerek yatay ve dikey şekilde sağlamaktadır. Resimleri ve yazıları ayrı hareket ettirerek mesela yuvarlayarak slide içerine getire bileceğiniz güzel efektleri bulunmaktadır.

jquery-sliders-22

23. Simple Multi-İtem Slider:

Çoklu ürün listelemeleri için kullana bileceğiniz güzel bir slider örneği. ETicaret sitelerine görsellik ve sadelik katacaktır. Kategoride bulunan ürünleri 4lü ya da 3lü değiştirebilirsiniz.

jquery-sliders-23

 

24. SlidesJS:

Basit geçişlere sahip iconları ve ileri, geri butonları ile resimleri hareket ettirmenize olanak sağlamaktadır.

jquery-sliders-24

25. Lean Slider:

Basit ve sade geçişleri ile düzenlemesi kolay standart bir sliderdır.

jquery-sliders-25

 

26. Easy Rotator:

Javascript ile sliderın tüm özelliklerini kullanabilirsiniz. Bir birinden güzel geçişleri sayesinde sitenize ayrı bir dinamizm katacaktır.

jquery-sliders-26

27. Slicebox:

3D ile görsel olarak küp şeklinde parçalanarak ya da bütün bir şekilde değişen slide geçişlerine sahip bir sliderdır. Eskiden flash olarak kullanılan ücretsiz bir slider vardı adını şu anda hatırlayamadım. Sitelerin neredeyse %70 inde kullanılan bu flash sliderın CSS ve Jquery ile uyarlanmış versiyonunu andırmaktadır.

jquery-sliders-27

28. Swiper:

Mobil cihazlar için kullanabileceğiniz çok güzel bir slider daha. Örnek siteye ilk girdiğiniz slider örneklerinin slide olduğunu zannedeceksiniz. Fakat o slide zannettiğiniz her ekranın içinde aynı bir örnek bulunmakta. Yazılı resimli bir çok örneği bulunan güzel bir slider örneği.

jquery-sliders-28

 

29. Elastic Image Slideshow:

Resimleri ve yazıları ayrı hareket ettirerek getirebileceğiniz sade basit geçişli slider.

jquery-sliders-29

 

30. JqRange Slider:

Sayısal veriler üzerinde oynayabileceğiniz ve çeşitli şekillerde bunları gösterebileceğiniz güzel bir slider örneği.

jquery-sliders-30

JQuery

Otomatik Seçili Textbox (focus)

Merhaba Arkadaşlar,

Bugün sizlerle örnek olarak google’a ilk girdiğinizde arama kutusunun üzerine direkt olarak yazı yazmak için imleç gelir yani mouse gidip götürmenize gerek yoktur bunları merak eden arkadaşlarımız için çok basit bir örnek göstereceğim ama bunun için jquery.com’dan jQuery kütüphanesini tasarımınıza entegre etmiş olmalısınız.

Aşağıdaki kodlar javascript kodlarımızdır:

Bu kodlar ise HTML kodlarımızdır:

JQuery

Javascript Multi Toggle

Javascript üzerinde birden fazla aynı class’a sahip div’leri toggle ile aç kapat yapmak istersek birazdan size göstereceğim yöntemi kullanabilirsiniz.

Şimdi vereceğim kodlar ise Javascript kodlarıdır lütfen doğru yerlere yerleştiriniz.

Yukarıda gördüğünüz şekilde tüm orhan’a ait divleri kapatabilirsiniz tek yaptığımız şey bir üst div’i yada tag’ı seçmek olacaktır.

Genel, JQuery

200 Adet JQuery Dersi

Merhaba Arkadaşlar,

İngilizce bir JQuery eğitim dersleri arşivi olan anlatımı güzel çok iyi bir yabancı kaynak olduğunu düşünüyorum ve sizlere sunmak istedim JQuery öğrenmek isteyen arkadaşlarımız için hazırlanmış ve ücretsiz kullanıma sunulmuş bende sizlere bunu paylaşmak istedim.

JQuery

JQuery sayfa yenilemeden alan yenileme işlemi

Merhaba arkadaşlar,

 

Benim çok kullandığım bir JQuery’nin özelliğini sizlerle paylaşmak ve bu codları uygulamayı göstereceğim…

 

Şimdi sayfamızı yenilemeden anlık olarak div arasında bir .php sayfası oluşturarak onun içindeki bilgileri anlık olarak aldırmak istiyoruz ve bunun için şöyle bir yol izliyoruz.

 

$(function() {

$(document).ready(function() {
$(“#sohbetonline”).load(“ajax/sohbet_online.php”);
var refreshId = setInterval(function() {
$(“#sohbetonline”).load(‘ajax/sohbet_online.php’);
}, 3000);
});

});

 

Ben şuanda ufak bir projede sohbet kısmında online sayısını gösteriyorum bunun yazdırılması için ise bir sayfaya #sohbetonline id’sine sahip bir div tanımlamak ve bu div’i tanımladıktan sonra sayfaya jquery kütüphanemizi ve jquery kodlarımızı yapıştırmak kalıyor test etmek için ise ajax klasörü oluşturun ve içine sohbet_online.php diye bir dosya açın ve ardından içerisine

 

<?php

echo “Sohbet (11)”;

?>

 

Yazarak kontrol edebilirsiniz şuanda 3 sn’de bir div arasını yenilemeyi sağlar…