MENU

jQuery ile Uzantılara farklı renkler vermek

Anasayfa » jQuery » jQuery ile Uzantılara farklı renkler vermek
jQuery ile Uzantılara farklı renkler vermek

jQuery kullanarak .html, .css, .jpg gibi uzantılı dosyaların renklerini değiştirebilirsiniz. Her uzantı için ayrı css classı vermektense bu daha mantıklı örneklerle daha iyi anlayacaksınız.

http://1.bp.blogspot.com/-gl3R8XT4ApA/UN4OjW_NvKI/AAAAAAAANko/RixawKMJWj4/s1600/jquery-uzanti.JPG

jQuery to style Hyperlinks based on URL extension

Bunun mantığını size biraz daha açıklayacağım örneğin bir link verdiniz uzantısı .jpg bu uzantının css class’ını jquery ile verebiliyorsunuz. Aynı şekilde diğer formatlarıda ayarlayabiliyorsunuz. Size vermiş olduğum linke tıkladığınızda kontrol edip çalıştırabilirsiniz.

Demo olarak buradan bakabilirsiniz.

jQuery kodumuz;

Aşağıdaki kodda “a” taglarına otomatik target _blank yani yeni sekmede aç demişiz ve daha sonra ise a tag’ının uzantısı .pdf ise rengi kırmızı olsun demişiz. Bu şekilde yeni formatlar ekleyerek renkler verip farklı stiller oluşturabilirsiniz.

$(document).ready(function() {
    $('a').attr('target', '_blank');
    $("a[href$=pdf]").css("color", "Red");
    $("a[href$=png]").css("color", "green");
    $("a[href$=jpg]").css("color", "blue");
    $("a[href$=html]").css("color", "maroon");
});​

HTML Kodumuz;


<a href="dosya.pdf">.pdf</a>
<br/>
<a href="resim.jpg">.jpg</a>
<br/>
<a href="arkaplan.png">.png</a>
<br/>
<a href="index.html">.html</a>​

Sonuç olarak uzantısına göre renkleri değiştirdik :)

Rooteto Teknoloji Blogu

Rooteto WordPress, Sosyal Medya, Teknoloji, HD Resimler ve Video paylaşımında bulunan bağımsız olarak çalışan online haber teknoloji sitesidir.

Yaklaşık 1 Milyondan fazla tekil aylık ziyaretci ile Rooteto'yu büyük yapan teknoloji topluluklarıdır. 2009 yılında kurulan Rooteto'nun genel merkez ofisi İzmir / Bornova'dadır.