jPlyer kullanışlı arayüzü ve harika görüntü sistemi ile, HTML5 mükelliğinin jQuery ile birleşiminde oluşturulmuş enfes bir player’dir. Player içerisinde hem mp3- ses hem de Video oynatabiliyorsunuz..

Güzelliği ve basitliğiyle ön plana çıkan jPlayer bir de ücretsiz ve açık kaynak koduyla Webmaster’ların yeni gözdesi

olabilir.

[fancy_header]jPlayer[/fancy_header]

jPlayer için Birçok demosu mevcut olan kendi sitesinden indirebilirsiniz.

[button link="http://www.jplayer.org/"]Demo[/button]

[download_button link="http://www.jplayer.org/download/"]Download[/download_button]

1 yılı aşkın bir süredir, jQuery medyasını takip etmekteyim. Elimden geldiğince yenilikleri ve ücretsiz pluginleri sizlere sunmaktayım..

Yeni haberleri, ve esşiz video dersler  için jQuery kategorimi de ziyaret edebilirsiniz.

Aynı zamanda jQuery Plugin ve Araçları sekmesinden internet üzerinde bulup burada paylaştığım pluginleri de inceleyebilirsiniz.

Bu yazımda da jQuery ile yapılmış güzel bir Hesap Makinesinden bahsedeceğim..

Plugini kullanmak için kaynak sayfasındaki download linkinden yararlanabilirsiniz.

[button link="http://www.jquerydesign.com/jquery-ile-hesap-makinesi-yapimi.html"]Kaynak Ders[/button]

[download_button link="http://demo.jquerydesign.com/demo/jquery-hesap.rar"]jQuery Hesap Makinesi İndir[/download_button]

İyi Eğlenceler Dilerim

Roundabout adında Dolambaçlı türkçe ismiyle oluşturacağınız bu plugin sayesinde her hangi bir HTML nesneyi kullanabileceğiniz gibi şık resim galerileri de yaratabilirsiniz. Tamamen özelleştirilebilir bu plugin jQuery nimetlerinden sıcak lokmadır..

Plugin hakkında bu kadar bilgi verdikten sonra bu plugini nasıl yaparız ona değilenil biraz..

[button link="http://fredhq.com/projects/roundabout"]Demolar[/button]

[highlight_1]İlk Olarak HTML dosyamızı hazırlıyoruz.[/highlight_1] Bunu 3 aşamada gerçekleştireceğiz. Ama bundan önce Roundabout scrptinde kullanacağımız nesneleri Listeler hailnde markup‘a gömmemiz gerekecek. Örnek bir şekilde yapalım;

<ul id="myRoundabout">
<li>Kutu 1</li>
<li>Kutu 2</li>
<li>Kutu 3</li>
<li>Kutu 4</li>
</ul>

[fancy_header]1-) Scriptleri Dahil Etme[/fancy_header]

Şimdi Pluginde kullanacağımız Sciprtleri html içerisine girelim. Tabiki bildiğiniz gibi tag’leri arasına gireceğiz;

<script src="jquery.min.js"></script> <script src="jquery.roundabout.min.js"></script>

[fancy_header]2-) CSS Kodları[/fancy_header]

Default değerlerde bir liste oluşturduysanız bu liste Mermi stilleriyle alt alta bir liste oluşturacaktır. Fakat bizim pluginimizde farklı bir stil uygulamamız gerekiyor. Bu yüzden UL parafını düzenliyoruz;

.roundabout-holder { padding: 0; height: 5em; list-style: none }
.roundabout-moveable-item {
height: 4em;
width: 4em;
cursor: pointer;
background-color: #ffc;
border: 1px solid #999;
}
.roundabout-in-focus { cursor: auto; }


[fancy_header]3-) Roundabout Ekleme[/fancy_header]

1. maddede scripti gömmüştük, fakat script kendi başına kullanılamıyor. Bunun kullanım alanı için bizim Markup’umuzun içerisindeki id ya da sınıflara ihtiyacı var.. HTML ‘de kullandığımız ul etiketinin id si olan myRoundabout’a roundabout etkisi veriyoruz. Bu sayede bu html içerisindeki bu id de olan tüm bileşenler roundabout’lanacaktır.

$(document).ready(function() {
$('ul#myRoundabout').roundabout();
});

Bu safhadan sonra Plugini özelleştirmek size kalmış. Aşağıda vereceğim birkaç jQuery ek özelliği sayesinde kendi plugininizi kendiniz oluşturabilirsiniz.

Animasyon Hızı

jQuery kodlarımızı aşağıdaki gibi düzenlediğimizde 1200 milisaniye olarak ayarlanmış animasyonla karşılaşacağız;

$(document).ready(function() {
$('div.moveMe').roundabout({
duration: 1200 // milisaniye      });
});

Şeffaflık ve Ölçek - Opacity ve Scale

Aşağıdaki kodlar sayesinde de yine animasyonunuza Şeffaflık ve ölçeklenebilirlik özelliği katıyorsunuz;

$(document).ready(function() {
$('ul').roundabout({
minOpacity: 0.0, // görünmez!
minScale: 0.1 // çok küçük!
});
});

Yön Butonları

Aynı zamanda animasyonun istediğiniz bir yerinde Sağ ve Sol oklar gibi nesneleri kullanarak animasyonunuzun manuel kullanımını sağlayabilirsiniz. Bunun için markupa ;

<a id="next" href="#">Sonraki!</a>
<a id="previous" href="#">Önceki!</a>

Eklemesini yaptıktan sonra;

$(document).ready(function() {
$('ul').roundabout({
btnNext: '#next',
btnPrev: '#previous'
});
});

Şeklinde girerek önceki ya da sonraki içeriğe ulaşılmasını sağlayabilirsiniz.

Daha fazla özellik ve plugin sahibinin sitesi için tıklayın.

[warning_box]Plugin Sayfasında da denildiği gibi, Copy + Paste olayını bir kenara bırakıp, kendi pluginimizi kendimiz yazmaya bakalım [/warning_box]

Daha sonra HTML dosyasının içerisinde aşağıdaki kodlar mevcut;

<div id="sigaraCukka" class='cukka'>

					<img src='images/baca.png' alt='baca' />
				</div>

src yerine kendi baca resminizi koyabilirsiniz.

Ardından yine head tagleri arasında göreceğiniz aşağıdaki kod mevcuttur. Bu kodda kendi duman resminizi koyabilir ve resminizin boyutlarını girebilirsiniz;

SigaraEfekti.imgLocation = "http://zingocan.com/wp-content/uploads/duman11.png";
SigaraEfekti.sigaraWidth = 80;
SigaraEfekti.sigaraHeight = 45;

İyi Eğlenceler

Bu eklenti şuan dünyanın bir çok büyük web sitesinde PHP ile entegri olarak çalışmakta ve çok memnun kalınan bir özellik olmaktadır.

Bu özelliği daha da güzelleştirmek adına bir çok kişi ve kurum Plugini geliştirmişler. Ben de bu pluginin 15 adet örneğini sizlere sunuyorum.

jqModal

jqModal bir websitesinde içerikten ayrı olarak kullanıcıya karşı gösterebileceğiniz küçük popup pencerelerden oluşan diyalog kutularından oluşur. Kullanımı kolaydır.

NyroModal

jQuery Dialog eklentisinin en büyük problemlerinden birisi olan özelleştirilebilme sorunu da bu plugin sayesinde ortadan kaldırılmaya çalışılmış.. Ne derece başarılı olmuş tartışılmaz fakat bu plugin sayesinde yeni Modal Popuplar ile bir sayfa verisi atayabiliyorsunuz.

Simple jQuery Modal Window Tutorial

Burada jQuery Modal Penceresi nasıl oluşturulur o anlatılmış ve derste anlatılan pluginin demosuda mevcut.

jQuery UI Dialog

Hepimizin bildiği, şık, kullanışlı, çok basit jQuery interface dialog pluginidir. En çok kullanılan ve özelleştirilibilitesi en yüksek olan.

SimpleModal

Buda yine sevdiğim Dialog eklentilerinden birisidir. Lightbox tarzı bir görünüme sahip, tabiki bunların tümü bildiğiniz gibi jQuery ile oluşturuluyor.

Boxy

Flexy, köşeli, tut çek özellikli tam bir facebook tarzı jQuery Dialog kutusudur. En çok tercih edilenler arasında.

ThickBox

Thickbox jQuery UI kütüphanesi kullanılarak hazırlanmış son derece şık bir Dialog eklentisidir.

Diğer popüler dialog eklentileri;

jQuery BlockUI Plugin

jQuery Impromptu

jQuery Alert Dialogs (Alert, Confirm & Prompt Replacements)

How to Create a Stunning and Smooth Popup Using jQuery

jQuery Ajax Validation Contact Form with Modal + Slide-in Transition

Creating an Exit Modal Box using jQuery

Upload in Modal Window and Pass Values with jQuery

jQuery Modal Dialog Plugin

ColorBox

Bir Web Tasarım firmasının Web Tasarımcı Arıyoruz başlığındaki şu ilana dikkat edin;

Php, Asp, xhtml ve Javascript dillerine hakim

Photoshop, Flash, Illustrator ve Cinema4D programlarını kullanabilen

jQuery ve Ajax  konusunda kendini ilerletmiş,

Takım çalışmasına yatkın

Orjinal ve yaratıcı fikirler çıkarabilen

5 Yıllık deneyimi olan Web Tasarımıclar aranıyor. CV’nizi gönderin size geri dönüş yapalım..

Hani derler ya işte bu beni güldürdü! diye.. Hakikaten bunlar profesyonel çalışma iç güdüsüyle hareket eden fakat kendini alacağı Web Tasarımcı(lar) ile gündeme taşınmak isteyen, aç gözlü, para kazanamayan edit konusuna bayağı bir hakim gruptan başkası olarak göremedim.. Neden mi?

Gelin şu ilanı biraz didikleyelim..

ASP, PHP ve XHTML bilen.. Daha ilan başlamadan afallamaya başladım ben.. Hem ASP Hem PHP bilicem.. PHP bilicem ama XHTML ile görücem işimi.. Gerçekten hoş.. Peki  devam edelim

Photoshop, Flash, Illustrator ve Cinema4D programlarını kullanabilen hadi canım sende,,, Sanırım Hem WEb Tasarımcı hem de Animasyon Sinema çekimleri için çalışan profesyonel bir grafikçi olmam gerekiyor..

jQuery ve Ajax  konusunda kendini ilerletmiş, Bu cümleyi gerçekten anlam veremedim. Kendini ilerletmiş ne demektir yahu..

Takım çalışmasına yatkın — Grafiğinden Kodlamasına kadar zaten proyum bir de takımla çalışcam.. Eyvah eyvah..

Orjinal ve yaratıcı fikirler çıkarabilen – Bu da oldu mu zaten zrilyoner bir insan olmam fakat şöyle düşünüp; ” Ulan yıllardır profesyonelce iş yapıyorum iyi para kazanıyorum bir bakayım web tasarım firmasında başlamak nasıl birşey” diye aklımın estiği yere başvurmam gerekiyor..

5 Yıllık deneyimi olan Web Tasarımıclar aranıyor. CV’nizi gönderin size geri dönüş yapalım.. — Zaten en komik olanda 5 yıllık deneyimdi.. Bu kadar program ve kodu profesyonelce yazmayı dün gece rüyamda gördüm? Bir günlük bir deneyimim var beni kabul etmez misiniz?

Bir bardak su içtikten sonra kendime geldim.. Hoşgeldim..

Uzun zamandır jQuery konusuna değinmiyordum.. Bazı takipçilerim artık derslere neden devam etmediğimi sordular.. Aslına bakarsanız, binbir emekle oluşturduğum video derslerin hak ettiği yere gelemediğini düşündüğümden dolayı, hem de zaman sıkıntısı çektiğim için derslere ara vermiştim.

Şimdi kendime ait olmasa da yine takipçilerin jQuery konusunda hem örnek gösterilecek tasarımlar hakkında fikir sahibi olmaları hem de düşünsel olarka jQuery tasarımında yaratıcılıklarının gelişebilmesi açısından birkaç örneği burada toplamak istedim.

Menu

1) LavaLamp

2) jQuery Collapse – Bir Div etiketinin içeriğinin çöküşüne örnek olan plugin.

3) A Navigation Menu- İç iç ya da sıralı listeleri navigasyon stili ile menü haline getiren jQuery Plugini

4) SuckerFish Style

Tabs

5) jQuery UI Tabs / Tabs 3 – Basit jQuery tab navigasyonu

6) TabContainer Theme – jQuery tablarını konteynir gibi gösteren ve içeriğine dilediğiniz şeyi koyabileceğiniz template

Accordion

7 ) jQuery Accordion

Demo

Simple JQuery Accordion menu

SlideShows

9) jQZoom- jQuery ile hem zoom efekti hem de slideshow hazırlayabileceğiniz güzel bir plugin.

10) Image/Photo Gallery Viewer- Herbirşeyi ile jQuery Fotoğraf galerisi.

Transition Effects

11) InnerFade – Solma ve gömme efekti ile değişken jQuery plugini

12) Easing Plugin- jQuery Easing Plugini

13) Highlight Fade

14) jQuery Cycle Plugin- jQuery ile seçim yapabileceğiniz foto galeri plugini.

jQuery Carousel

15) Riding carousels with jQuery –jQuery küresel geçişli potfolyo plugini.

Demo :

Color Picker

16) Farbtastic –Javasciprt ile kullanılan jQuery renk seçim plugini

Demo :

17) jQuery Color Picker

LightBox

18) jQuery ThickBox –jQuery ile sayfanıza hoşgeldiniz paneli gibi bir hat oluşturan kaybolan kutucuk

Demo :

19) SimpleModal Demos – jQuey İletişim Formu

Demo :

20) jQuery lightBox Plugin – jQuery nin devasa boyutlarda kullanılabilen Lightbox plugini.

Demo :

iframe

21) JQuery iFrame Plugin – jQuery ile iframe içerikleri gömebileceğiniz plugin.

Form Validation

22) Validation –jQuery ile formları doğrulama yapmak için kullanabileceğiniz plugin.

Demo :

23) Ajax Form Validation –Yine form validasyonu oluşturabileceğiniz Ajax doğrulama scripti.

Demo :

24) jQuery AlphaNumeric – jQuery Doğrulama plugini. (harf ya da sayı)

Form Elemanları

25) jquery.Combobox –jQuery ile combobox yani kutucukları dilediğiniz gibi kullanabileceğiniz form elemanıdır.Demo

İnsanlar, özellikle Türkiyede ki insanlar, gösterişe çok önem vermekte.. Bir web sitesini akılda tutucu olan şeylerden içerikten sonra göze temas ve tasarım çok önemlidir. Bu tür kayıt alanı ve formlar sayesinde akılda kalıcı bir yer yapabilirsiniz sitenizi.

Demo – Download

Slider terimi, türkçemize yakın anlamıyla Slayt geçişlerinin bulunduğu ve slaytları barındıran içerik görüntüleme sistemidir.İlk olarak Flash ile karşımıza çıkan bu sistem, jQuery ile daha görselleştirilebilir, ve indexlenebilir formatıyla el ile aranmaktadır.

Slider içerisini sadece resim değil de gerekirse HTML/CSS kullanarakta içerik şablonlarını gömebiliriz. Bunu flashtan ayıran en önemli örneği de yukarıda dediğim gibi salyt içeriklerinizin indexlenebilir olması durumuyla artık rahatlıkla içeriğe gömeceğiniz bilgiler SEO açısından önemli olacaktır.

Demo

You might have noticed that Facebook used something like this to explain the new features of the profile.

The idea is to add a certain class to elements that you want to guide the user through and explain what they do. We will use a little tooltip to show what that tour point is about, and a navigation will allow the user to go back and forth, to end the tour or to restart it.

Demo – Download