awNotices
HTML5, CSS3 ve jQuery ile hazırlanmış yapı ikon desteği için de Font Awesome’ı kullanmakta. Flat yapıdaki tasarım, değiştirilebilir renk ve icon seçenekleriyle kolay kullanım ve şık tasarımı bir arada sunuyor.
Download awNotices Örneği
awNotices’in çalışan ve basit örneğini indirmek için aşağıdaki linki kullanabilirsiniz.
Kod:
awNotices/
├── test.html
├── css/
│ ├── awNotices.min.css
│ ├── awNotices.css
└── js/
├── awNotices.min.js
└── awNotices.jsHTML Kodları
awNotices’i aktif kılmak için yapmanız gereken tek şey .awNotices classını barındıran bir yapıya link halinde başlıkları girmek. Gerisi kendiliğinden çalışacaktır. Hadi gelin örnek bir yapı oluşturalım.
awNotices’i aktif kılmak için yapmanız gereken tek şey .awNotices classını barındıran bir yapıya link halinde başlıkları girmek. Gerisi kendiliğinden çalışacaktır. Hadi gelin örnek bir yapı oluşturalım.
PHP Kod:
<section class="awNotices">
<a notice-color="orange" href="http://adobewordpress.com"><i class="fa fa-bell"></i> Duyuru 1</a>
<a notice-color="red"><i class="fa fa-heart"></i> Duyuru 2</a>
<a notice-color="blue"><i class="fa fa-desktop"></i> Duyuru 3</a>
</section>
CSS Kodları
Renk tanımları ve diğerleri için birkaç satır CSS kodu yazmamız gerekiyor. Hazırladığımız örnek Font Awesome‘ın ikonlarını kullandık. Eğer Font Awesome hakkında detaylı bilgi almak isterseniz burayı tıklayın.
Bu ikonları direkt olarak CDN üzerinden sitenize eklemek için de aşağıdaki kodu kullanabilirsiniz.
PHP Kod:
<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
Sırada awNotices’in ihtiyaç duyduğu CSS kodlarını oluşturmak var.
PHP Kod:
.awNotices{
position:relative;
color:white;
font:400 12px Arial;
}
.awNotices a{
padding:8px 25px 8px 10px;
position:absolute;
left:0;right:0;
opacity:0;
color:inherit;
text-decoration:none;
visibility:hidden;
transition:opacity .6s;
border-radius:3px;
text-shadow:0 0 3px rgba(1,1,1,.3);
line-height:150%;
}
.awNotices a[notice-color="orange"]{background-color:#ff9800}
.awNotices a[notice-color="red"]{background-color:#e51c23}
.awNotices a[notice-color="blue"]{background-color:#3f51b5}
.awNotices a[notice-color="green"]{background-color:#8bc34a}
.awNotices a[notice-color="dark"]{background-color:#414141}
.awNotices a.active{
opacity:1;
visibility:visible;
}
.awNotices a i.fa{
padding-right:8px;
margin-right:5px;
border-right:1px solid rgba(255,255,255,.2);
}
.awNotices span.controller{
position:absolute;
cursor:pointer;
background:transparent;
right: 0;
padding:8px 10px;
line-height:150%;
}
Son olarak fonksiyonalite için jQuery kodlarımızı ekleyelim.
[url=http://www.adobewordpress.com/css-tooltip-awtooltip][/url]
[url=http://www.adobewordpress.com/css-tooltip-awtooltip][/url]
jQuery Kodları
Öncelikle sayfanızda jQuery tanımlı olup olmadığına bakın. Eğer yoksa Body‘nin bittiği yere, tanımının hemen öncesine jQuery’i ekleyerek devam edelim.
Öncelikle sayfanızda jQuery tanımlı olup olmadığına bakın. Eğer yoksa Body‘nin bittiği yere, tanımının hemen öncesine jQuery’i ekleyerek devam edelim.
PHP Kod:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
İlk olarak durdur/oynat butonunu, sonrasında da tetikleyici classımızı ekleyelim.
PHP Kod:
$('.awNotices').append('<span class="controller fa fa-pause"></span>');
$('.awNotices a:nth-of-type(1)').addClass('active');
Slider şeklinde çalışan yapıyı aktif kılacak ilk fonksiyonumuzu yazalım.
PHP Kod:
function awNotice() {
if(!$('.awNotices').hasClass('stopped')){
var $active = $('.awNotices a.active');
var $next = $active.next('a');
if ($next.length){
$next.addClass('active');
$active.removeClass('active');
}else{
$active.removeClass('active');
$('.awNotices a:first-of-type').addClass('active');
}
}
}
Artık durdur/oynat butonunun arkasını doldurabilirsiniz. Beraberinde de çalıştırıcı tanımımızı yapalım.
PHP Kod:
$('.awNotices .controller').click(function(){
$(this).toggleClass('fa-pause fa-play');
$('.awNotices').toggleClass('stopped');
})
function awNotices(timer){
setInterval( "awNotice()", timer);
}
Bu kadar. Web sayfanıza eklemeniz gereken tek JavaScript kodu aşağıdaki olacaktır.
PHP Kod:
awNotices(4500);
Bu kod her 4.5 saniyede bir değişen haber akışını çalışır kılar.