FeatureList.js – Kullanışlı bir manşet çalışması
Sitemizin en üst bölümüne ekleyebileceğimiz buna benzer bir sürü örnek var internet üzerinde. Ama hiç biri tam olarak istediğimiz gibi olamıyor. FeatureList.js uygulaması gibi ücretsiz olarak dağıtılan benzer çalışmalar da görmeidm şu ana kadar. Muhtemelen ücretli yada ücretsiz olanları vardır ama daha bana denk gelmedi. Sol taraftaki başlıklara incelemek için tıkladığınızda sağ tarafta başlığın resmi çıkıyor ve konu başlığının arkaplanı siyah ok işareti gibi oluyor. Fotoğraflar arası geçiş fade efekti ile gerçekleşiyor. Kullanımı oldukça basit sadece aşağıdaki adımları izleyerek sitenize uyarlamanız mümkün. Ayrıca otomatik geçiş özelliği de bulunuyor bu çalışmada. Bir açıdan baktığınızda slayt örneği gibi görülebilir olsa da tab olarak tasarlanmış. Örneğin üzerinde herhangi bir değişiklik yapmadan da kullanabilirsiniz. Olduğu gibi sitenize uyarlamanız en iyisidir bence.
Kullanım
- Head etiketleri arasına eklenmesi gereken bölümler.
Js dosya aresleri :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript" src="jquery.featureList-1.0.0.js"></script>
Stil :
<style type="text/css"> h3 { margin: 0; padding: 7px 0 0 0; font-size: 16px; text-transform: uppercase; } div#feature_list { width: 750px; height: 240px; overflow: hidden; position: relative; } div#feature_list ul { position: absolute; top: 0; list-style: none; padding: 0; margin: 0; } ul#tabs { left: 0; z-index: 2; width: 320px; } ul#tabs li { font-size: 12px; font-family: Arial; } ul#tabs li img { padding: 5px; border: none; float: left; margin: 10px 10px 0 0; } ul#tabs li a { color: #222; text-decoration: none; display: block; padding: 10px; height: 60px; outline: none; } ul#tabs li a:hover { text-decoration: underline; } ul#tabs li a.current { background: url('feature-tab-current.png'); color: #FFF; } ul#tabs li a.current:hover { text-decoration: none; cursor: default; } ul#output { right: 0; width: 463px; height: 240px; position: relative; } ul#output li { position: absolute; width: 463px; height: 240px; } ul#output li a { position: absolute; bottom: 10px; right: 10px; padding: 8px 12px; text-decoration: none; font-size: 11px; color: #FFF; background: #000; -moz-border-radius: 5px; } ul#output li a:hover { background: #D33431; } </style>
JavaScript :
<script language="javascript"> $(document).ready(function() { $.featureList( $("#tabs li a"), $("#output li"), { start_item : 1 } ); }); </script>
- Body etiketleri arasına eklenmesi gereken bölüm.
<style type="text/css"> <div id="content"> <hr /> <div id="feature_list"> <ul id="tabs"> <li> <a href="javascript:;"> <img src="services.png" /> <h3>Services</h3> <span>Lorem ipsum dolor sit amet consect</span> </a> </li> <li> <a href="javascript:;"> <img src="programming.png" /> <h3>Programming</h3> <span>Lorem ipsum dolor sit amet consect</span> </a> </li> <li> <a href="javascript:;"> <img src="applications.png" /> <h3>Applications</h3> <span>Lorem ipsum dolor sit amet consect</span> </a> </li> </ul> <ul id="output"> <li> <img src="sample1.jpg" /> <a href="#">See project details</a> </li> <li> <img src="sample2.jpg" /> <a href="#">See project details</a> </li> <li> <img src="sample3.jpg" /> <a href="#">See project details</a> </li> </ul> </div> </div>

1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?