jQuery İle Manşet Alanı Yapımı
(Bu yazı 1 oy aldı. Ortalama Değeri: 5,00 oy dan 5) 
jQuery’e her geçen gün kanım ısınıyor. Tahmin ediyorum ki Adobe’nin ürünü Flash’ı dahi geri bırakabilir. Gerçi Flash’ın yerini hiçbirşey tutmaz ona her zaman ihtiyaç duyulur ama jQuery boyuna göre büyük işler yapıyor. Şimdi size bahsedeceğim konudan az çok haberiniz vardır. Birçok web sitesinde ya da blogda görmüşsünüzdür. Özellikle haber sitelerinde kullanıyor bu manşat alanı. Manşat alanının nasıl yapıldığı hakkında biraz bilgi sahibi olacaksınız.
Ben bu çalışmaya güzel bir site olan bu adresten ulaştım. Çalışmayı gördüğümde dikkatimi çeken en güzel yanı çok zarif ve hoş görünmesi oldu. Neyse hemen kodlarımıza gelelim. Çalışmada bulunan dosyalar yandaki resimde görünüyor. Bir CSS dosyası, resimlerin bulunduğu images klasörü ve çalışmanın önizlemesini görebilmemiz için oluşturulmuş bir html sayfası var. Kodlarla boğuşmaya başlamadan önce buradan images klasörünü indirin.
İlk olarak aşağıdaki kodları style.css adı ile kaydederek CSS dosyamızı hazırlayalım.
[css]
#featured{
width:400px;
padding-right:250px;
position:relative;
border:5px solid #ccc;
height:250px;
background:#fff;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#featured li.ui-tabs-nav-item a{
display:block;
height:60px;
color:#333; background:#fff;
line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{
background:url(‘images/selected-item.gif’) top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px;
background: url(‘images/transparent-bg.png’);
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}
#featured .ui-tabs-hide{
display:none;
}
[/css]
CSS dosyamızı hazırladık. Şimdi sıra html sayfamızda. Aşağıdaki kodları ise index.html adı ile kaydedin.
[html]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” dir=”ltr”>
<head profile=”http://gmpg.org/xfn/11″>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Featured Content Slider Using jQuery – Web Developer Plus Demos</title>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js” ></script>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js” ></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“#featured > ul”).tabs({fx:{opacity: “toggle”}}).tabs(“rotate”, 5000, true);
});
</script>
</head>
<body>
<h3>» Featured Content Slider Using jQuery</h3>
<div id=”featured” >
<ul class=”ui-tabs-nav”>
<li class=”ui-tabs-nav-item ui-tabs-selected” id=”nav-fragment-1″><a href=”#fragment-1″><img src=”images/image1-small.jpg” alt=”" /><span>15+ Excellent High Speed Photographs</span></a></li>
<li class=”ui-tabs-nav-item” id=”nav-fragment-2″><a href=”#fragment-2″><img src=”images/image2-small.jpg” alt=”" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
<li class=”ui-tabs-nav-item” id=”nav-fragment-3″><a href=”#fragment-3″><img src=”images/image3-small.jpg” alt=”" /><span>35 Amazing Logo Designs</span></a></li>
<li class=”ui-tabs-nav-item” id=”nav-fragment-4″><a href=”#fragment-4″><img src=”images/image4-small.jpg” alt=”" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
</ul>
<!– First Content –>
<div id=”fragment-1″ class=”ui-tabs-panel” style=”">
<img src=”images/image1.jpg” alt=”" />
<div class=”info” >
<h2><a href=”#” >15+ Excellent High Speed Photographs</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam….<a href=”#” >read more</a></p>
</div>
</div>
<!– Second Content –>
<div id=”fragment-2″ class=”ui-tabs-panel ui-tabs-hide” style=”">
<img src=”images/image2.jpg” alt=”" />
<div class=”info” >
<h2><a href=”#” >20 Beautiful Long Exposure Photographs</a></h2>
<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit….<a href=”#” >read more</a></p>
</div>
</div>
<!– Third Content –>
<div id=”fragment-3″ class=”ui-tabs-panel ui-tabs-hide” style=”">
<img src=”images/image3.jpg” alt=”" />
<div class=”info” >
<h2><a href=”#” >35 Amazing Logo Designs</a></h2>
<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare….<a href=”#” >read more</a></p>
</div>
</div>
<!– Fourth Content –>
<div id=”fragment-4″ class=”ui-tabs-panel ui-tabs-hide” style=”">
<img src=”images/image4.jpg” alt=”" />
<div class=”info” >
<h2><a href=”#” >Create a Vintage Photograph in Photoshop</a></h2>
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales….<a href=”#” >read more</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
[/html]
Html sayfanızıda sorunsuz bir şekilde oluşyurduysanız işlemleri başarıyla tamamladınız demektir. index.html, style.css ve images klasörünü bir araya toplatın hatta bunların üçünü bir klasör içerisinde toplayın. Ardından index.html sayfasını çalıştırarak çalışmayı test edin.
Çalışmadan kullanılan jQuery dosyaları bu ve bu adresten çekilen dosyalardır. Zaten html kodlarını incelediğinizde jQuery dosyalarının nereden çeklidiğini göreceksiniz. İsterseniz bu dosyaları indirip çalışmanızın dosyalarına dahil edebilirsiniz. Aslında indirip dahil etmeniz daha iyi.
Yazının başında da belirtmiştim. Bu yazının asıl kaynağı burası. Kaynağının demosuda buradaki gibi. Çalışmanın orjinal halini yani yukarıda sizin ouşturduğunuz çalışmayı tek seferde indirmek için ise yine çalışmanın sayfasını ziyaret ediniz. Yazının en altında download linki bulunuyor.
97 views
RenkliTeneke.Com blogundaki yeni yazılardan haberdar olmak için RSS Abonesi olabilirsiniz. İsterseniz Twitter'dan ya da FriendFeed'den takip edebilirsiniz. Ya da "Yeni yazılar e-mail adresime gelsin" diyorsanız e-mail abonesi olabilirsiniz.
Merhaba sevgili ziyaretçi. Şuanda renkliteneke.com bloguna " Ahmet" tarafından " 20 Temmuz 2009" tarihinde yazılmış olan "jQuery İle Manşet Alanı Yapımı" başlıklı bu yazıyı okuyorsun. Bu yazının başka bir yerde yayınlaması yasaktır. Her yazı ayrı bir özen içerisinde hazırlanıyor ve bu emeğin iki tık ile heba edilmesi pek hoşuma gitmez. Bu açıklama ise bilgilenmeniz için yazılmıştır.
güzel bir çalışma olmuş ahmet eline sağlık
Bu sistemi wordpress sayfamızda nasıl kullanabiliriz? Son haber veya yazıları nasıl gösterebiliriz? Php kodlama burada devreye girecek galiba ama nasıl?
fatih arslan; teşekkürler.
raozkardes; evet wordpress sayfanızda kullanabilirsiniz. Son haber veya yazılarınızı bu çalışmaya entegre ederek ve bu çalışmayı siteniye koyarak gösterebilirsiniz. Php kodlama giriyor biraz ama basit şeyler. Eğer isterseniz bu tarz bir yazı ile yukarıdaki çalışmayı wordpress’e entegre etmeye çalışırım.
@Ahmet
gerçekten böyle bir şey yapman çok iyi olur. ;)
bu arada işe yarar yazı, ellerine sağlık. (:
Çok çok iyi olur. Bunun için şu an sitemizde bir eklenti kullanmaktayız ama haber yazıları içinde böyle bir sisteme gereksinimiz var. Bu şekilde bir çözüm çok iyi olur.
jQuery dosyalarını wordpresin kurulu olduğu dizinden alması sağlanırsa daha sağlıklı olur diye düşünüyorum. Hali hazırda bu dosyalar bulunmakta sanırım.
Sabırsızlıkla bekliyorum wordpress entegreyi çünkü manşet yazılar eklemem lazım bir an önce. (:
Ellerine sağlık süper olmuş…
Yukarıdaki yazı hakkında kendi düşüncelerinizi yazın!
Lütfen yukarıdaki yazı hakkında düşüncelerini paylaş. Senin düşündüklerin bazen bu blogdaki yeni yayınlanacak yazının hangi konuda yazı yazılması gerektiğini belirliyor.kitapyurdu
En Çok Okunan Yazılar
Kategoriler
Meta
Takipçi Sayısı
Arşivler
Bağlantılar
Etiketler
Son Yorumlar
en çok yorumlananlar
en çok okunanlar