‘jQuery’ Kategorisi Arşivi:
jQuery ile Bağlantılı Geçişli Sayfa – Slick Transition Page with jQuery
7 Yorum | Bu yazı 24 Şub 2010 tarihinde yazılmıştır
Sayfalarınız arasındaki geçişleri direk değil de biraz daha hoş şekilde ayarlayabilirsiniz. http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/ adresindeki makalede okuduklarımı deneyerek bu işelimin çok daha kullanışlı olduğunu söyleyebilirim.
Adım 1 – Html Kodunu Eklemek
Ben örnekte sadece 2 fotoğraf ekleyerek denedim. Sizler farklı linkler ile deneyebilirsiniz.
<a href="index.html" class="trans"><img src="330581.jpg" alt="Resim" /></a>
Burada dikkat etmeniz gereken şey a elemanının sınıfıdır. Ben “trans” isimli bir sınıf kullandım. Birazdan jQuery kod bloğunu yazarken bu sınıfa ihtiyacımız olacak.
Adım 2 – Css Kodunu Eklemek
html { background-color:#000000; color:#ffffff; font-family:Arial, Helvetica, sans-serif; font-size:14px;}
a { color:#CCCCCC;}
ben genel ve basit bir kullanım yaptım. Projenize göre değiştirebilirsiniz.
Adım 3 – jQuery Çekirdek Dosyasını ve Tetikleyiciyi Eklemek
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('body').css("display", "none");
$('body').fadeIn(2000);
$('a.trans').click(function(event) {
event.preventDefault();
linkLocation = this.href;
$('body').fadeOut(1000, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
</script>
Body’ e sayfa yüklendiği anda css özelliğini atadık. fadeIn ile 2 saniye içinde yüklettik. Az önce sınıf atadığımız a elemanına bir tıklama işlemi gerçekleşirse eğer işlemi hemen gerçekleştirme dedik. Fakat linkLocation isimli değişkenimize a’ nın href’ ini atadık. Daha sonra ise body elemanına fadeOut işlemini atadık ve 1 saniye içinde kaybolmasını ardından redirectPage fonksiyonunu çalıştırmasını söyledik. redirectPage fonksiyonumuz da linkLocation değişkenine atadığımız hrefi alarak window eylemi ile birleştiriyor. Bu şekilde aynı adres çubuğumuzdaki yol değişiyor ve aynı sayfa içinde işlem yapmamış oluyoruz.
Uygulamaya Ait Örneği Görmek İçin Tıklayınız
Uygulamaya Ait Örneği İndirmek İçin Tıklayınız
Daha detaylı bilgi için -> http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions
jQuery resize Kullanımı
2 Yorum | Bu yazı 14 Ara 2009 tarihinde yazılmıştır
Çalıştığım bir projede 100% lük bir alanın 980px’ e geldiğinde üst kısımdaki bazı öğelerin gizlenmesi gerekiyordu. Yani site normal şartlarda 100% lük bir görünümde olmalı fakat tarayıcı penceresi veya çözünürlük 980 veya 980′ den düşük olursa üst kısımdaki bazı alanlar yok olmalıydı. Nasıl olur diye düşünürken jQuery’ nin resize fonksiyonunun bu iş için biçilmiş kaftan olduğunu öğrendim. Çok basit bir kullanım ile sorunu çözdüm. Ve bunu sizlerle paylaşmak istedim.
Adım – HTML Kodlarını Eklemek
<div id="Main"> <div id="Header"> <div>Logo</div> <div> <ul> <li>Top Menu 1</li> <li>Top Menu 2</li> <li>Top Menu 3</li> <li>Top Menu 4</li> <li>Top Menu 5</li> <li>Top Menu 6</li> </ul> </div> <div id="UserPanel"> <div id="UserAvatar"></div> <div id="UserMenu"> <p>Menu <ul> <li>Menu1</li> <li>Menu2</li> <li>Menu3</li> </ul> </p> </div> </div> </div> <div id="Content"> <div id="SolKolon"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vestibulum, massa eu porttitor hendrerit, lectus magna fringilla nulla, in volutpat enim est a augue. Donec malesuada consequat tempus. Donec gravida imperdiet molestie. Donec blandit luctus lectus, id consectetur erat tincidunt vel. Proin sagittis eleifend sapien eget suscipit. Nunc sit amet dapibus nisi. Pellentesque at lorem venenatis ante iaculis aliquam sit amet eget nibh. Phasellus velit nisl, consectetur volutpat convallis ac, blandit quis nunc. Nullam dignissim, mi sit amet eleifend posuere, ipsum massa faucibus libero, a pulvinar nisl massa ut urna. Aliquam ut massa at nunc ornare placerat. Nullam eleifend diam non lectus accumsan iaculis. Fusce mattis, sem ac tincidunt suscipit, mauris massa semper metus, non viverra neque libero ac est. Proin ac urna sed sem tincidunt fringilla non sit amet justo. Cras mollis purus eu nibh pretium non rutrum ligula consequat. Cras massa justo, volutpat vel venenatis at, scelerisque a ante. Ut sollicitudin varius libero eu viverra. Vivamus nec quam ac neque iaculis eleifend sit amet in ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam erat volutpat. Vestibulum tortor lacus, aliquet in ultricies consequat, aliquam eu nibh. Nulla faucibus odio vel risus molestie eu placerat enim placerat. Maecenas at ligula at neque viverra aliquet venenatis vitae nunc. Curabitur ut nisl a elit varius ullamcorper. Praesent est sem, sollicitudin nec fermentum et, scelerisque non odio. Mauris quis nisl eleifend metus ullamcorper laoreet nec sit amet urna. Etiam ut nunc erat. Nunc sit amet magna diam, sit amet interdum ante. Nulla convallis volutpat dignissim. Praesent auctor leo id ipsum commodo ut scelerisque erat tristique. Etiam nibh dolor, volutpat sed sollicitudin sit amet, elementum ac nisl. Maecenas lorem enim, commodo id accumsan vitae, ultricies at justo. Sed euismod venenatis quam, at eleifend dui rhoncus quis. Sed gravida dictum mauris vitae posuere. Vestibulum pretium sapien in magna ultricies tincidunt ut vel mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend mi sit amet nisl sodales interdum. Ut varius tincidunt sem, vitae blandit nisl euismod sed. Quisque lobortis venenatis est sed porta. Praesent a tortor ac leo venenatis pharetra sed ut massa. Ut sit amet malesuada sapien. Pellentesque scelerisque pulvinar accumsan. Pellentesque mollis, massa vitae adipiscing euismod, nulla enim egestas sem, vel adipiscing lectus eros eget nunc. Etiam sapien nibh, pretium non viverra eget, porttitor ac sapien. Suspendisse pretium lacinia lobortis. Quisque at imperdiet nisi. Phasellus arcu tellus, auctor id pretium sit amet, bibendum vel tellus. Aliquam mi libero, sollicitudin nec malesuada eu, mollis eu libero. Donec non faucibus massa. Maecenas imperdiet egestas suscipit. Donec id magna vel erat malesuada malesuada. Aenean consectetur porta odio non tincidunt. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque auctor, erat quis feugiat scelerisque, dolor orci rhoncus metus, et dapibus sapien ante sit amet ligula. In eleifend ante vitae magna bibendum mollis nec in eros. Nulla venenatis neque vitae augue aliquam sed sagittis massa eleifend. Quisque rhoncus lacinia turpis, sollicitudin venenatis lacus feugiat sed. Aenean aliquam congue turpis, sed convallis mauris lobortis at. Aliquam erat volutpat. Vestibulum ac massa eu nisl adipiscing dictum sed a odio. Proin ante lorem, vulputate sed vestibulum ut, elementum id quam. Donec vitae iaculis nibh. Nulla facilisi. In et turpis bibendum nisi commodo pharetra consequat in tortor. Ut dapibus rutrum mauris a varius. Cras ullamcorper sollicitudin neque, quis facilisis mauris eleifend sed. Nullam imperdiet, augue nec euismod fermentum, diam risus vehicula leo, non porttitor tellus ligula convallis enim. Sed id mi est. Duis tincidunt dui nec mi varius et tempus eros elementum. Quisque neque nulla, dictum id pellentesque a, facilisis id metus. Quisque pretium vulputate interdum. Vestibulum fermentum, velit et dictum elementum, libero massa placerat est, ac varius lectus massa quis nisi. Cras elementum dictum posuere. Nulla tempus pharetra turpis, eu consequat odio venenatis quis. Nulla facilisi. Maecenas tempor, magna pellentesque iaculis scelerisque, diam justo volutpat urna, id ultrices velit sapien id lacus. Sed vehicula volutpat tincidunt. Praesent posuere luctus placerat. Nullam placerat condimentum massa, in convallis est pellentesque sed. Mauris imperdiet pharetra justo sed hendrerit. Phasellus at metus nisl, vel sollicitudin diam. Ut elementum velit id odio laoreet tempor. Suspendisse potenti. Pellentesque massa lacus, facilisis vitae ullamcorper a, facilisis ac lectus. </p> </div> <div id="SagKolon"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vestibulum, massa eu porttitor hendrerit, lectus magna fringilla nulla, in volutpat enim est a augue. Donec malesuada consequat tempus. Donec gravida imperdiet molestie. Donec blandit luctus lectus, id consectetur erat tincidunt vel. Proin sagittis eleifend sapien eget suscipit. Nunc sit amet dapibus nisi. Pellentesque at lorem venenatis ante iaculis aliquam sit amet eget nibh. Phasellus velit nisl, consectetur volutpat convallis ac, blandit quis nunc. Nullam dignissim, mi sit amet eleifend posuere, ipsum massa faucibus libero, a pulvinar nisl massa ut urna. Aliquam ut massa at nunc ornare placerat. Nullam eleifend diam non lectus accumsan iaculis. Fusce mattis, sem ac tincidunt suscipit, mauris massa semper metus, non viverra neque libero ac est. Proin ac urna sed sem tincidunt fringilla non sit amet justo. Cras mollis purus eu nibh pretium non rutrum ligula consequat. Cras massa justo, volutpat vel venenatis at, scelerisque a ante. Ut sollicitudin varius libero eu viverra. Vivamus nec quam ac neque iaculis eleifend sit amet in ante. </p> </div> </div> </div>
Adım 2 – Css Kodlarını Eklemek
body { background-color:#999999; color:#000000; font-family:Arial, Helvetica, sans-serif; font-size:12px;}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
#Main { width:100%; height:auto; position:relative; min-width:730px;}
* html #Main{
width: expression(document.body.clientWidth < 1032 ? "730px" : "100%" );
}
#Header { height:40px; background-color:#990000; position:relative;}
.Logo { float:left; display:inline; height:30px; background-color:#FFFFFF; font-size:18px; line-height:30px; padding:0px 10px; margin-top:5px; margin-left:20px;}
.TopMenu { float:left; display:inline; height:30px; background-color:#FF3333; margin-top:5px; padding:0px 10px; margin-left:20px;}
.TopMenu ul { margin:0; padding:0; list-style-type:circle; padding:5px 10px;}
.TopMenu ul li { float:left; display:inline; margin-right:10px;}
#UserPanel { float:right; display:inline; height:27px; background-color:#999999; padding:0px 10px; margin-top:5px; padding-top:3px; margin-right:10px;}
#UserAvatar { float:left; display:inline; width:20px; border:2px solid #333333; background-color:#CC6600; height:20px;}
#UserMenu { float:left; display:inline; padding:0px 10px;}
#UserMenu p { margin:0; padding:0; font-weight:bold;}
#UserMenu ul { margin:0; padding:0; list-style-type:none; background-color:#99CC00; padding:10px;}
#UserMenu ul li { margin-bottom:5px;}
#Content { background-color:#FFFFFF;}
#SolKolon { float:left; display:inline; width:78%; background-color:#CCCCCC; padding:1%;}
#SagKolon { float:right; direction:inline; width:18%; background-color:#999999; padding:1%;}
* Reset kullanmadığım ve gruplama yapmadığım için kodlar dağınık ve çok gelebilir kusura bakmayın acilen yazdım 
Adım 3 – jQuery Kodlarını Eklemek
İlk önce penceremizin genişliğini öğrenelim;
$(function() {
var windowW = $(window).width();
alert (windowW);
});
Sonra da penceremizi küçültüp tam olarak hangi boyutta sağ üst kısmın aşağıya indiğini görelim
Gördüğümüz gibi 730px ve altında sağ üst alanımız aşağıya kaydı. Biz istiyoruz ki pencere 730px ve altında olsa bile o alan gözükmesin ve üst üste binme olmasın. Çünkü pencereyi daha da küçülttüğümüzde o alan content alanı üstüne binmeye başlayacak. Bunun için jQuery’ nin resize(); fonksiyonunu kullanacağız.
$(function() {
$(window).resize(function() {
if ($(window).width() < 730) {
$('#UserPanel').css('display', 'none');
} else {
$('#UserPanel').css('display', 'block');
}
});
});
Bu işlemlerden sonra pencerenizi küçültün ve göreceksiniz ki 730px den küçük olduğunda üst kısımdaki alan kaybolacak.
jQuery İle Farklı Açılan Menü – Different Drop Down Menu With jQuery
6 Yorum | Bu yazı 24 Ağu 2009 tarihinde yazılmıştır
jQuery İle Farklı Açılan Menü - Differant Drop Down Menu With jQuery
Bildiğiniz gibi açılan menüler genelde listelerin alt menüleri olarak tanımlanır. Fakat geçen gün internette gördüğüm bir örnek jQuery ile çok farklı bir şekilde kullanılmış bir alt menü (drop down) olarak karşıma çıktı. Biraz inceledikten sonra sizler için onu yeniden yazıp Türkçe şekilde örneklendirdim.
Adım 1 – Html Kodlarını Eklemek
<div id="Main"> <h1>jQuery İle Farklı Açılan Menü</h1> Açılan menüler genelde direk menü listelerinin alt bölümleri veya yan bölümleri olarak bilinse de jQuery ile çok farklı şekillere sokulabilir. <a href="http://www.thewebsqueeze.com/samples/mega-menu/demosite/">http://www.thewebsqueeze.com/samples/mega-menu/demosite/</a> isimli sitedeki yapılan örneği Türkçe olarak sizler için yeniden yaptım. <!--Menü Başla--> <div class="MenuDiv"> <ul class="AnaMenu"> <li><a href="#">Menü 1</a></li> <li class="Ok"><a href="#">Menü 2</a></li> <div class="AltMenuAlan"> Bu alana Alt menüye bastığınızda çıkacak menü ile iglili bazı bilgiler yazabilirsiniz. <div class="Sol"> <h3>Menü2' ye ait 1. Alt Menü</h3> <ul class="AltMenuSol"> <li><a href="#">Alt Menü 1-1</a></li> <li><a href="#">Alt Menü 1-2</a></li> <li><a href="#">Alt Menü 1-3</a></li> <li><a href="#">Alt Menü 1-4</a></li> </ul> </div> <div class="Sag"> <h3>Menü2' ye ait 2. alt Menü</h3> <ul class="AltMenuSag"> <li><a href="#">Alt Menü 2-1</a></li> <li><a href="#">Alt Menü 2-2</a></li> <li><a href="#">Alt Menü 2-3</a></li> <li><a href="#">Alt Menü 2-4</a></li> </ul> </div> </div> <li><a href="#">Menü 3</a></li> <li class="Ok2"><a href="#">Menü 4</a></li> <div class="AltMenuAlan2"> Bu alana Alt menüye bastığınızda çıkacak menü ile iglili bazı bilgiler yazabilirsiniz. <div class="Sol"> <h3>Menü2' ye ait 1. Alt Menü</h3> <ul class="AltMenu2Sol"> <li><a href="#">Alt Menü 1-1</a></li> <li><a href="#">Alt Menü 1-2</a></li> <li><a href="#">Alt Menü 1-3</a></li> <li><a href="#">Alt Menü 1-4</a></li> </ul> </div> <div class="Sag"> <h3>Menü2' ye ait 2. alt Menü</h3> <ul class="AltMenu2Sag"> <li><a href="#">Alt Menü 2-1</a></li> <li><a href="#">Alt Menü 2-2</a></li> <li><a href="#">Alt Menü 2-3</a></li> <li><a href="#">Alt Menü 2-4</a></li> </ul> </div> </div> <li><a href="#">Menü 5</a></li> </ul> </div> <div class="GenelIcerik"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor, magna vel feugiat lacinia, dui arcu rutrum purus, eu rhoncus eros quam at urna. In aliquet diam a nisl imperdiet sollicitudin. Sed lacinia laoreet ante at aliquet. Mauris sed felis eu ligula tempor vulputate et id purus. Fusce orci enim, blandit at sodales sit amet, aliquam et neque. Suspendisse non ante sit amet erat egestas viverra. Donec mattis aliquet diam nec dapibus. Proin neque ligula, pharetra ut rutrum a, imperdiet ac ligula. Etiam molestie, massa vitae venenatis aliquet, risus justo accumsan orci, nec facilisis neque metus vitae nulla. Phasellus vehicula purus ut justo fringilla ultrices. Aliquam cursus, tellus interdum lacinia volutpat, felis arcu suscipit ipsum, ac ultricies tortor dolor non urna. Integer a libero sed neque vulputate dictum et sed tortor. Aliquam velit lorem, porttitor vel cursus vel, luctus sed ante. Integer metus arcu, varius ac semper vel, fermentum hendrerit ipsum. Donec eget velit vel eros pretium consequat. Duis molestie ligula eu mauris sollicitudin aliquam ut in massa. Mauris elementum accumsan vestibulum. Nulla consectetur malesuada orci non molestie. Donec porttitor justo venenatis purus mattis auctor. Donec commodo porttitor egestas. Donec venenatis magna lorem, vitae porta est. Integer egestas adipiscing erat sed venenatis. Donec tincidunt dignissim pellentesque. Morbi ut pretium quam. Duis faucibus rutrum augue ac porta. Nulla nunc libero, tempus a mollis quis, egestas quis leo. Donec a erat non orci porta facilisis sit amet eu diam. Pellentesque mauris sapien, dapibus ac tristique vitae, condimentum sit amet enim. Vestibulum vitae magna diam, vel tincidunt erat. Duis varius suscipit congue. In vitae dolor sagittis lorem congue ullamcorper.</div> <div class="GenelIcerik"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor, magna vel feugiat lacinia, dui arcu rutrum purus, eu rhoncus eros quam at urna. In aliquet diam a nisl imperdiet sollicitudin. Sed lacinia laoreet ante at aliquet. Mauris sed felis eu ligula tempor vulputate et id purus. Fusce orci enim, blandit at sodales sit amet, aliquam et neque. Suspendisse non ante sit amet erat egestas viverra. Donec mattis aliquet diam nec dapibus. Proin neque ligula, pharetra ut rutrum a, imperdiet ac ligula. Etiam molestie, massa vitae venenatis aliquet, risus justo accumsan orci, nec facilisis neque metus vitae nulla. Phasellus vehicula purus ut justo fringilla ultrices. Aliquam cursus, tellus interdum lacinia volutpat, felis arcu suscipit ipsum, ac ultricies tortor dolor non urna. Integer a libero sed neque vulputate dictum et sed tortor. Aliquam velit lorem, porttitor vel cursus vel, luctus sed ante. Integer metus arcu, varius ac semper vel, fermentum hendrerit ipsum. Donec eget velit vel eros pretium consequat. Duis molestie ligula eu mauris sollicitudin aliquam ut in massa. Mauris elementum accumsan vestibulum. Nulla consectetur malesuada orci non molestie. Donec porttitor justo venenatis purus mattis auctor. Donec commodo porttitor egestas. Donec venenatis magna lorem, vitae porta est. Integer egestas adipiscing erat sed venenatis. Donec tincidunt dignissim pellentesque. Morbi ut pretium quam. Duis faucibus rutrum augue ac porta. Nulla nunc libero, tempus a mollis quis, egestas quis leo. Donec a erat non orci porta facilisis sit amet eu diam. Pellentesque mauris sapien, dapibus ac tristique vitae, condimentum sit amet enim. Vestibulum vitae magna diam, vel tincidunt erat. Duis varius suscipit congue. In vitae dolor sagittis lorem congue ullamcorper.</div> </div>
Adım 2 – Css Kodlarını Eklemek
body { background-color:#c0c0c0; font-family:Arial, Helvetica, sans-serif; color:#000000; font-size:12px;}
a, a:link, a:visited { color:#ffffff; font-weight:bold; text-decoration:none;}
a:hover { color:#ff0080; text-decoration:underline;}
*.ul { margin:0; padding:0;}
.MarginRight0 { margin-right:0;}
#Main {width:800px; height:auto; margin:0 auto;}
.MenuDiv { width:798px; height:50px; background-color:#ff0080; -moz-border-radius:5px; -webkit-border-radius:5px; color:#ffffff; padding:5px 0px; border:1px solid #800040;}
ul.AnaMenu {width:700px; height:40px; list-style-type:none;}
ul.AnaMenu li { display:inline; font-size:18px; }
ul.AnaMenu li a, ul.AnaMenu li a:visited { color: #ffffff; text-decoration:none; padding:15px;}
ul.AnaMenu li a:hover { text-decoration:underline; color: #000000;}
ul.AnaMenu li.Ok, ul.AnaMenu li.Ok2 { background:url(Ok.png) 80px 10px no-repeat;}
.AltMenuAlan, .AltMenuAlan2 { display:none; position:absolute; background-color:#400080;-moz-border-radius:5px; -webkit-border-radius:5px;margin:10px 0 0 20px;padding:10px 20px; width:620px; color:#ffffff;}
.AltMenuAlan2 { background-color:#0080ff;}
.AltMenuAlan div.Sol, .AltMenuAlan div.Sag, .AltMenuAlan2 div.Sol, .AltMenuAlan2 div.Sag {margin-right:10px; border-left:1px solid #ff0080; border-right:1px solid #ff0080; width:178px; font-size:12px; float:left; padding:10px;}
.AltMenuAlan2 div.Sol {border-left:1px solid #800080;; border-right:1px solid #800080;}
.AltMenuAlan div.Sag, .AltMenuAlan2 div.Sag { border:none!important; margin-right:0!important;}
.AltMenuAlan h3 { font-size:16px; margin:0; padding:0; width:150px;}
.AltMenuAlan p, .AltMenuAlan2 p {float:left; display:inline; width:200px; margin-right:10px;}
ul.AltMenuSol, ul.AltMenuSag, ul.AltMenu2Sol, ul.AltMenu2Sag { width:180px; list-style-type:none;}
ul.AltMenuSol li a, ul.AltMenuSag li a, ul.AltMenu2Sol li a, ul.AltMenu2Sag li a { display:block; color:#ffffff; text-decoration:none; font-size:12px;}
ul.AltMenuSol li a:hover, ul.AltMenuSag a:hover, ul.AltMenu2Sol li a:hover, ul.AltMenu2Sag a:hover { text-decoration:underline; color:#ffcee7;}
.GenelIcerik {width:780px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:10px; background-color:#ffffff; margin-top:20px;}
Adım 3 – Html Dosyasına jQuery ve Css Dosyalarını Tanıtmak + jQuery Tetikleyici Kod Bloğunu Eklemek
<link rel="stylesheet" type="text/css" href="master.css" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".Ok").click(function(){
$(".AltMenuAlan").toggle("fast");
});
$(".Ok2").click(function(){
$(".AltMenuAlan2").toggle("fast");
});
});
</script>
Her zaman ki gibi mantık çok basit. Normal bir şekilde bir div içine menu kodlarımızı ekliyoruz. Alt menü eklemek istediğimiz elemanların altına bir div daha açıp o div için diğer menüleri ve yazıları ekliyoruz. Ana menüde hangi elemanların alt menüleri olduğunu belirlemek için onlara iki ayrı sınıf atıyoruz ve css dosyamızda bu elemanların yanına alt menü olduğunu anlatan bir imaj ekliyoruz.
Daha sonra ise jQuery tetikleyici kod bloğunda ise menü elemanlarına atadığımız iki ayrı sınıf için tıklanınca gösterilecek divleri toggle olarak açtırıyoruz. Burada dikkat etmeniz gereken bir şey söz konusudur; daha önce alt menülere sahip olan elemanların altına açtığımız divler css dosyasında display:none olarak tanımlanmalıdır.
Daha detaylı bilgi için lütfen -> http://www.thewebsqueeze.com/samples/mega-menu/demosite bağlantısını ziyaret ediniz.
jQuery İle Sekmeler – Tab With jQuery
4 Yorum | Bu yazı 29 Tem 2009 tarihinde yazılmıştır
jQuery İle Sekme - Tab With jQuery
Adım 1 – Html Kodlarını Eklemek
<div id="Main"> <ul class="TabMenu"> <li id="BirinciTab" class="Aktif">Tab 1</li> <li id="IkinciTab">Tab 2</li> <li id="UcuncuTab">Tab 3</li> </ul> <div class="TabIcerik Tab1"> <h1>Tab 1 Başlık</h1> <ul> <li>Tab1-1</li> <li>Tab1-2</li> <li>Tab1-3</li> </ul> </div> <div class="TabIcerik Tab2"> <h1>Tab 2 Başlık</h1> <ul> <li>Tab2-1</li> <li>Tab2-2</li> <li>Tab2-3</li> </ul> </div> <div class="TabIcerik Tab3"> <h1>Tab 3 Başlık</h1> <ul> <li>Tab3-1</li> <li>Tab3-2</li> <li>Tab3-3</li> </ul> </div> </div>
Adım 2 – Css Kodlarını Eklemek
#Main{
margin: 7em auto;
width: 400px;
}
#Main ul{
list-style: none;
list-style-position: outside;
}
#Main ul.TabMenu li{
float: left;
margin-right: 5px;
margin-bottom: -1px;
}
#Main ul.TabMenu li{
font-weight: 700;
display: block;
padding: 5px 10px 5px 10px;
background: #efefef;
margin-bottom: -1px;
border: 1px solid #d0ccc9;
border-width: 1px 1px 1px 1px;
position: relative;
color: #898989;
cursor: pointer;
}
#Main ul.TabMenu li.Aktif{
background: #fff;
top: 1px;
border-bottom: 0;
color: #5f95ef;
}
.TabIcerik{
margin: 0pt auto;
background: #efefef;
background: #fff;
border: 1px solid #d0ccc9;
text-align: left;
padding: 10px;
padding-bottom: 20px;
font-size: 11px;
}
.TabIcerik h1{
line-height: 1em;
vertical-align: middle;
height: 48px;
padding: 10px 10px 10px 52px;
font-size: 32px;
}
.TabIcerik.Tab1{
display: block;
}
.TabIcerik.Tab2{
display: none;
}
.TabIcerik.Tab3{
display: none;
}
.TabIcerik.Tab3 a{
color: #5f95ef;
}
Adım 3 – jQuery Kod Bloğu
$(document).ready(function(){
$("ul.TabMenu > li").click(function(e){
switch(e.target.id){
case "BirinciTab":
//durum değiştirme ve menu seçimi
$("#BirinciTab").addClass("Aktif");
$("#IkinciTab").removeClass("Aktif");
$("#UcuncuTab").removeClass("Aktif");
//seçileni göster diğerlerini gizle
$("div.Tab1").fadeIn();
$("div.Tab2").css("display", "none");
$("div.Tab3").css("display", "none");
break;
case "IkinciTab":
//durum değiştirme ve menu seçimi
$("#BirinciTab").removeClass("Aktif");
$("#IkinciTab").addClass("Aktif");
$("#UcuncuTab").removeClass("Aktif");
//seçileni göster diğerlerini gizle
$("div.Tab2").fadeIn();
$("div.Tab1").css("display", "none");
$("div.Tab3").css("display", "none");
break;
case "UcuncuTab":
//durum değiştirme ve menu seçimi
$("#BirinciTab").removeClass("Aktif");
$("#IkinciTab").removeClass("Aktif");
$("#UcuncuTab").addClass("Aktif");
//seçileni göster diğerlerini gizle
$("div.Tab3").fadeIn();
$("div.Tab1").css("display", "none");
$("div.Tab2").css("display", "none");
break;
}
return false;
});
});
Burada yapılan işlem çok basit aslında. li elemanlarından birisine tıklandığın e isimli bir fonksiyon çalışıyor. Bu fonksiyon kendi içinde switch case yöntemi ile id leri baz alarak işlem yapıyor. BirinciTab ise id diğer idlerin sınıflarını kaldır seçili yani tıklanana Aktif sınıfını ekle. Daha sonra ise Tab1 sınıflı divi fadeIn efekti ile göster diğer divleri ise gösterme. Bu işlemi her tab için yaparsanız istediğiniz görünümü elde edecekseniz.
Makalenin orjinal uygulamasını görmek için -> http://yensdesign.com/tutorials/tabs/ adresine bakabilirsiniz. Ben de buradaki kaynak kodlarını Türkçeye göre yorumlayarak hem html hem css hem de js dosyalarını düzenledim.
jQuery İle Dönen Harf Efekti – Airport – Information Board Text Effect
1 Yorum | Bu yazı 15 Tem 2009 tarihinde yazılmıştır
Havalimanlarında bilgilendirme tabelalarında uçakların durumu, saati v.b. bilgilerin olduğu alanların animasyonuna benzeyen bir animasyonun nasıl yapılacağını anlatacağım.
jQuery İle Dönen Harf Efekti - Airport - Information Board Text Effect
Adım 1 – HTML Kodlarını Eklemek
<div id="Main"> <p>Şu anda <span id="DonenHarf1"></span> <span id="DonenHarf1-1"></span> <span id="DonenHarf1-2"></span> adresinde bulunuyorsunuz.</p> <p>Aynı zamanda <span id="DonenHarf2"></span> <span id="DonenHarf2-1"></span> <span id="DonenHarf2-2"></span> <span id="DonenHarf2-3"></span> <span id="DonenHarf2-4"></span> isimli yazının örneğini inceliyorsunuz.</p> <p>Sevdiğim meyveler <span id="Meyveler"></span></p> </div>
Adım 2 – CSS Kodlarını Eklemek
#DonenHarf1, #DonenHarf1-1, #DonenHarf1-2 { font-size:28px; font-weight:bold; color:#FF0000;}
#DonenHarf2, #DonenHarf2-1, #DonenHarf2-2, #DonenHarf2-3, #DonenHarf2-4 { font-size:48px; font-weight:bold; color:#0099FF;}
#Meyveler { width:300px; height:100px; background-color:#999999; color:#990000; font-weight:bold;}
Adım 3 – jQuery Dosyası ve Eklenti Dosyasını Eklemek
<script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.airport-1.1.source.js"></script>
Adım 4 – jQuery Tetikleyici Kodu Eklemek
$(document).ready(function(){
$('#DonenHarf1').airport(['www.']);
$('#DonenHarf1-1').airport(['kadirgunay']);
$('#DonenHarf1-2').airport(['.com']);
$('#DonenHarf2').airport(['jQuery']);
$('#DonenHarf2-1').airport(['İle']);
$('#DonenHarf2-2').airport(['Dönen']);
$('#DonenHarf2-3').airport(['Harf']);
$('#DonenHarf2-4').airport(['Efekti']);
$('#Meyveler').airport(['Elma', 'Muz', 'Çilek', 'Portakal']);
});
Burada gördüğünüz .airport parametresi eklenti ile gelen bir durumdur. p etiketi içindeki span lere id atayarak jquery tetikleyicisinde hangi id’ ye ne kelimesinin geleceğini yazdım. Eklentinin parametresi ile de kelimeleri kendi içlerinden döndürdüm. Css kısmında ise id’ lere stil değeri atadım ve ekrana bastırdım.
Uygulamaya Ait Örneği Görmek İçin Tıklayınız
Uygulamaya Ait Örneği İndirmek İçin Tıklayınız
Makalenin orjinal anlatımı için lütfen -> http://www.unwrongest.com/projects/airport/ adresine bakınız.